[ 解決済 ] ウィジェット>フッター上部の画像（３種類）とフッターの色（3種類）をページごとに使い分けしたい

このトピックには9件の返信、3人の参加者があり、最後に中村により2年、 8ヶ月前に更新されました。

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

投稿者

投稿
2022年3月13日 7:48 PM #63035

中村
参加者

■ 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

■ 実際の症状
不燃物ページのフッター色変更が上手くいかない。
ウィジェット>フッター上部の画像の変更が上手くいかない。

Attachments:
You must be logged in to view attached files.

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

2022年3月13日 10:24 PM #63042

石川＠Vektor,Inc.
キーマスター
制作実績

どの属性のページを表示しているかは body の class に出力されていますので、
body の class をセレクタに使えば、ページ属性で表示の切り替えを実現できると思います。

できる！CSSカスタマイズ

2022年3月14日 11:35 AM #63056

中村
参加者

不燃物ページの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以下が赤字になっていたので指定の仕方自体を間違っているのかと思います。

2022年3月14日 1:23 PM #63060
うなこ
モデレーター
書き方は間違っていないので、おそらく全角スペースがどこかに入っているのではないかと思います。
半角じゃないと、反映されませんので、ひとまず空白が空いている箇所があれば空白を削除してください。

例えば、　background-color:〇〇;の前に全角スペースが入っていませんか？
- この返信は2年、 8ヶ月前にうなこが編集しました。
2022年3月14日 1:43 PM #63063

中村
参加者

フッター色の変更について

>例えば、　background-color:〇〇;の前に全角スペースが入っていませんか？

スペースを消してみたところ無事色変え成功しました！（緑、青とも）
ありがとうございます。
知らないうちに全角スペースを使っていたようです。

ウィジェット>フッター上部の画像の変更については
どのようにCSSを書けば良いのかよく分からない状況です。

2022年3月14日 2:55 PM #63069
うなこ
モデレーター
ウィジェット>フッター上部の画像の変更については
どのようにCSSを書けば良いのかよく分からない状況です。

そうですね、、画像ですので、おそらくウィジェットに全部の色違いの画像を入れて、検証ツールで見ると別々のid（id="block-〇〇"　みたいな）　がつくと思います。
それに対してcssでdisplay:block;とdisplay:none; で表示or非表示にする感じでしょうか？

もしもわからなくなりましたらご連絡ください。
- この返信は2年、 8ヶ月前にうなこが編集しました。
- この返信は2年、 8ヶ月前にうなこが編集しました。
2022年3月14日 5:54 PM #63082

中村
参加者

ウィジェットに色違い画像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;
}

↑トップページのウィジェット>フッター上部の画像が非表示になっています。

2022年3月14日 6:31 PM #63086
うなこ
モデレーター
.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;
}
```
- この返信は2年、 8ヶ月前にうなこが編集しました。
- この返信は2年、 8ヶ月前にうなこが編集しました。
2022年3月14日 7:22 PM #63095
中村
参加者
ありがとうございます。

トップページ、事務局ページ(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のウィジェット>フッター上部の画像が表示されません。
- この返信は2年、 8ヶ月前に中村が編集しました。
- この返信は2年、 8ヶ月前に中村が編集しました。
2022年3月15日 1:36 PM #63118

中村
参加者

この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;
}

で解決しました。
投稿者

投稿