[ 解決済 ] フッター上部の画像を全幅表示させたい

[中村]

■ WordPress のバージョン
7.1.3

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

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

■ テーマのバージョン
子テーマ　lightning child バージョン0.5.1 (Lightningバージョン: 15.42.0)

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

■ スキンの種類
プレーン

■ プラグインの種類・バージョン
All-in-One WP Migration and Backup バージョン 7.112
Duplicator バージョン 5.0.6
Ghost Kit バージョン 3.7.2
Invisible reCaptcha バージョン 1.3.3
Lightning G3 Pro Unit バージョン 0.32.3
PublishPress Future Free バージョン 4.11.2
Simple Custom CSS and JS バージョン 3.54.3
SiteGuard WP Plugin バージョン 1.8.9
TablePress バージョン 3.4.1
TablePress Extension: Responsive Tables バージョン 1.8
　※This TablePress Extension was retired
VK All in One Expansion Unit バージョン 9.123.1
VK Block Patterns バージョン 1.39.1
VK Blocks Pro バージョン 1.129.0
VK Legacy Notice バージョン 0.2.0
VK Link Target Controller バージョン 1.10.5
WP Multibyte Patch バージョン 2.9.3

■ 期待する動作
添付画像「footer1」のようびフッター上部の画像が全幅表示され、フッターとのすき間なく表示されるようにしたい。

■ 自分で試した事
外観＞カスタマイズ＞追加 CSS部分の確認を行いましたが、よくわかりませんでした。

追加 CSSの該当箇所

<!– フッター上の画像調整 –>
.site-body-bottom .container{
max-width:100%;
padding:0;
}

.site-body-bottom .container .widget .wp-block-image{
margin-bottom:0;
}
.site-body-bottom .container .widget .wp-block-image img {
width: 100vw;
}

.site-body-bottom .container .widget_media_image{
margin-bottom:0;
}

.site-body-bottom .container .widget_media_image{
margin-right:0;
}

■ 症状が発生するブラウザ
Google Chrome　Microsoft Edge

■ 実際の症状
現状は「footer2」「footer3」のように画像の解像度をフルサイズにしても、フッター上部の画像が全幅表示されず、フッター上部とフッターの間に黒い線が表示されてしまう。

■ その他特記事項
PHP 7.4.33
WordPress 5.9.19
lightning child バージョン0.5.1 (Lightningバージョン: 15.1.3)
Lightning G3 Pro Unit バージョン 0.17.1
VK All in One Expansion Unit バージョン 9.75.0.0
VK Blocks Pro バージョン 1.109.2.0
※このプラグインは現在使用中の WordPress のバージョンでは動作しません。 WordPress を更新してください。の表示あり

の環境下では以前フォーラムで回答いただいたCSSの追加で問題なく表示されていたのですが（以前のトピック）、

[ 解決済 ] フッター背景画像サイズについて

2026年10月21日に発表されたPHPの深刻な脆弱性（通称「PHP2Shell」）対応のためPHPを8.4（パッチ適用済）
WordPress本体・テーマ・プラグインを最新版に更新したところ、表示が崩れてしまいました。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

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

[対馬 俊彦]

もうひとつのトピックも含めて、
CSS のコメントの書き方を以下のように修正してみてください。

【誤】
<!-- フッター上の画像調整 -->

【正】
/* フッター上の画像調整 */

前者(誤)は HTML のコメント、後者(正)は CSS のコメントです。

いままではどちらでもオッケーだったのが、
アップデートにより前者の書き方だと CSS が反映されなくなったのだと思います。

[中村]

対馬様ご回答ありがとうございます。

別トピ

[ 解決済 ] フッターの色（3種類）をページごとに使い分けしたい

の色変えについてはお教えいただいた方法で上手くいきました。

<!– フッター上の画像調整 –>
を
/* フッター上の画像調整 */
に変更したところ
何かうまくいかなかったようです。時間を置いてもう一度お試しください。
のエラーが出ましたので元の
<!– フッター上の画像調整 –>
に戻しています。

また、フッターとフッター上部の線については
/* フッターの上の線を非表示にする */
.site-footer{
border-top:none;
}
を追加したところ、フッター上部の線を非表示にすることが出来ました。

その後、外観＞ウィジェット＞フッター上部の内容を確認し
画像配置が「なし」になっていたため「全幅」に変更したところ、無事全幅表示されました。

初歩的なミスで申し訳ありません。

[投稿者]

投稿