[ 解決済 ] ウィジェット>フッター上部の画像（３種類）とフッターの色（3種類）をページごとに使い分けしたい
[ 解決済 ] ウィジェット>フッター上部の画像（３種類）とフッターの色（3種類）をページごとに使い分けしたい
- このトピックには9件の返信、3人の参加者があり、最後に
により2年、 8ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress5.9.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
子テーマ lightning-child-sample 0.5.1■ Pro Unit のバージョン
0.17.1■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
iframe バージョン 4.5
Lightning G3 Pro Unit バージョン 0.17.1
Simple Custom CSS and JS バージョン 3.38.1
VK All in One Expansion Unit バージョン 9.73.1.0
VK Block Patterns バージョン 1.13.1
VK Blocks Pro バージョン 1.24.5
What’s New Generator バージョン 2.0.2
WP Multibyte Patch バージョン 2.9■ 期待する動作
・ページによりフッターの色（3色）とフッター上部の画像（３種類・色違い）の使い分けができるようにしたいトップページ、事務局ページ：footer-g.png（緑の画像）+ フッター色 #64ab9f
不燃物ページ：footer-b.png（青の画像）+ フッター色 #7ea6e0
消防ページ：footer-y.png（オレンジの画像）+ フッター色 #ffb364■ 自分で試した事
追加CSSの編集<!– トップページのフッター色変更 –>
.home .site-footer{
background-color: #64ab9f;
}<!– トップページのフッター上画像変更 –>
.home .site-body-bottom .container .widget .wp-block-image<!– 不燃物ページのフッター色変更 –>
.page-id-41 .site-footer{
background-color: #7ea6e0;
}※トップページのフッター色変更のみ上手くいきました。
不燃物ページのフッター色変更は上手くいきません。
フッター色オレンジのページ数が多くなる予定なので、Lightning フッター設定>フッタースタイル設定>フッター背景色は #ffb364 （オレンジ）にしています。※ウィジェット>フッター上部の画像の変更をどのように書けば良いか分かりません。
■ 症状が発生するブラウザ
Google Chrome Microsoft Edge■ 実際の症状
不燃物ページのフッター色変更が上手くいかない。
ウィジェット>フッター上部の画像の変更が上手くいかない。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
どの属性のページを表示しているかは body の class に出力されていますので、
body の class をセレクタに使えば、ページ属性で表示の切り替えを実現できると思います。不燃物ページのbody classが
<body class=”page-template-default page page-id-41 logged-in admin-bar wp-embed-responsive vk-blocks fa_v5_css customize-support device-pc scrolled header_scrolled”>
となっていたので、
.page-id-41にしてみたのですがフッター色変更反映されません。他のページで試してみたところ（事務局ページ）、
<body class=”page-template-default page page-id-39 logged-in admin-bar no-customize-support wp-embed-responsive vk-blocks device-pc fa_v5_css”>
のページで
.page-id-39 .site-footer{
background-color: #64ab9f;
}
を追加したところ、一度はフッター色が緑色に変更されたのですが、その後
.page-id-39 .site-footer{
background-color: #7ea6e0;
}
に変えて青色になるか確認したところ反映されず（オレンジ）
先ほど上手くいった緑色のコードに戻したのですが、反映されません（オレンジ）
.page-id-39 .site-footer{
background-color: #64ab9f;
}ウィジェット>フッター上部の画像はこのあたりかと思うのですが、
<div class=”site-body-bottom”>
<div class=”container”>
<aside class=”widget widget_block widget_media_image” id=”block-46″>
<figure class=”wp-block-image size-large”>
</figure>
</aside> </div>追加CSSに
<!– トップページのフッター上画像変更 –>
.home .home .site-body-bottom .container .widget .widget_block .widget_media_image{ url(https://procyon.fukushi-net.or.jp/renew_kenou/wp/wp-content/uploads/2022/02/footer-b.png);
}
を追加してみたのですが反映されません。
url以下が赤字になっていたので指定の仕方自体を間違っているのかと思います。フッター色の変更について
>例えば、 background-color:〇〇;の前に全角スペースが入っていませんか？
スペースを消してみたところ無事色変え成功しました！（緑、青とも）
ありがとうございます。
知らないうちに全角スペースを使っていたようです。ウィジェット>フッター上部の画像の変更については
どのようにCSSを書けば良いのかよく分からない状況です。ウィジェットに色違い画像3つとも入れてみました。
緑が id=”block-46″
青が id=”block-70″
オレンジが id=”block-71″ です。トップページは緑にしたいので
青のブロック（id=”block-70″）を消す、オレンジのブロック（id=”block-71″）を消す
ということでしょうか？CSSの書き方が良く分からないのですが、↓ここにid=”block-70″とid=”block-71″を指定
すれば良いですか？
.home .site-body-bottom .container .widget .wp-block-image img {
display:none;
}↑トップページのウィジェット>フッター上部の画像が非表示になっています。
.home .site-body-bottom .container .widget .wp-block-image img {
display:none;
}↑img（画像）を非表示にしていますが、ウィジェットのブロックごと非表示でいいと思うので、トップページの場合は以下の感じでしょうか？
.home .site-body-bottom .widget_media_image#block-70, .home .site-body-bottom .widget_media_image#block-71{ display:none; }ありがとうございます。
トップページ、事務局ページ(page-id-39)：id=”block-46″（緑の画像）+ フッター色 #64ab9f
不燃物ページ（page-id-41）：id=”block-70″（青の画像）+ フッター色 #7ea6e0の表示上手くいきました。
フッターとの間にすき間があったので
.site-body-bottom .container .widget_media_image{
margin-bottom:0;
}
を追加したところ上手くいったようです。この3ページ（home、page-id-39、page-id-41）以外は
id=”block-71″（オレンジの画像）+ フッター色 #ffb364
にしたかったので:not(.home):not(.page-id-39):not(.page-id-41) .site-body-bottom .widget_media_image#block-46,
:not(.home):not(.page-id-39):not(.page-id-41) .site-body-bottom .widget_media_image#block-70{
display:none;
}を追加しました。
上手くいったと思ったのですが、home、page-id-39、page-id-41のウィジェット>フッター上部の画像が表示されません。
この3ページ（home、page-id-39、page-id-41）以外は
id=”block-71″（オレンジの画像）+ フッター色 #ffb364
にしたかったので:not(.home):not(.page-id-39):not(.page-id-41) .site-body-bottom .widget_media_image#block-46,
:not(.home):not(.page-id-39):not(.page-id-41) .site-body-bottom .widget_media_image#block-70{
display:none;
}を追加しました。
の方法で上手くいかなかったので、もう一度body の classを見直して
<!– 投稿ページフッター上画像 青と緑非表示 –>
.post-template-default .site-body-bottom .widget_media_image#block-46,
.post-template-default .site-body-bottom .widget_media_image#block-70{
display:none;
}<!– 親ページフッター上画像 青と緑非表示 –>
.page-parent .site-body-bottom .widget_media_image#block-46,
.page-parent .site-body-bottom .widget_media_image#block-70{
display:none;
}で解決しました。
- このトピックに返信するにはログインが必要です。
