[ 解決済 ] フッター上部ウィジェットを2カラムにした際、マップ側の余白が消えません

このトピックには2件の返信、2人の参加者があり、最後に高島福士により3週前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2025年12月17日 11:54 AM #115479

高島福士
閲覧者
制作実績

■ WordPress のバージョン
WordPress 6.8.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.32.1

■ Pro Unit のバージョン
バージョン 0.29.7

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.7

■ 期待する動作
お世話になっております。
フッター上部のウィジェットエリアを2カラムにし、
左：テキスト（教室情報など）
右：Googleマップ（iframe）　
を配置しています。

＜やりたいこと＞
フッター上部ウィジェットを2カラム表示
左右とも上下の余白を完全になくす
左右のウィジェットの高さを揃える

■ 自分で試した事
地図のカラムにCSSで余白をなくす、あるいはカラム中に、グループやカバー等のブロックを入れてCSSで余白をなくすよう試みました。

■ 症状が発生するブラウザ
google　crome

■ 実際の症状
上記を試みましたが、左側の余白が残ったり、地図の長さが左側と揃わなかったり上手くいきませんでした。現状は、一旦左右・上下とも均等な余白になるよう設定しましたが、本来の希望はすべて余白なしです。
＜質問＞
・Lightningでフッター上部ウィジェットを2カラムにした場合、上下余白を完全に0にする正式・推奨の方法はありますでしょうか？
・フッターウィジェット内で左右の高さを揃える正しい実装方法があればご教示いただきたいです。
・この挙動はテーマ側の仕様でしょうか？

お手数ですが、よろしくお願いいたします。

該当URL : https://*********
※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

2025年12月17日 12:26 PM #115482
対馬俊彦
参加者
制作実績
> この挙動はテーマ側の仕様でしょうか？

違います。

余白に関しては、該当URLのサイトで行ったカスタマイズが原因です。
具体的には、子テーマに記述してある以下のコードが原因です。
```
@media (min-width: 768px) {
  .map-padding {
    padding-top: 20px;
    padding-bottom: 20px;

    /* 左右の見た目差を補正 */
    padding-left: 18px;
    padding-right: 20px;

    box-sizing: border-box;
  }
}
```
> フッターウィジェット内で左右の高さを揃える正しい実装方法があれば

左のカバーブロックに height: 100%; を指定すればよさそうです。
2025年12月17日 3:12 PM #115485

高島福士
閲覧者
制作実績

ご回答ありがとうございます。
当該CSSは、いろいろと試みましたが、左側の余白が残ったり、地図の長さが左側と揃わなかったり上手くいかなかったので、一旦左右・上下とも均等な余白になるよう調整する目的で追加していたものでした。

今回、この指定を外し、教えていただいたとおり、左側のカバーブロックに height: 100%; を指定したところ、
余白なしの状態で左右の高さも揃い、希望どおりの表示になりました。

的確なご指摘と解決方法をご提示いただき、ありがとうございました。
投稿者

投稿