[ 解決済 ] ウィジェット>フッター上部の画像(3種類)とフッターの色(3種類)をページごとに使い分けしたい
[ 解決済 ] ウィジェット>フッター上部の画像(3種類)とフッターの色(3種類)をページごとに使い分けしたい
-
投稿者投稿
-
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色)とフッター上部の画像(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どの属性のページを表示しているかは body の class に出力されていますので、
body の class をセレクタに使えば、ページ属性で表示の切り替えを実現できると思います。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年、 5ヶ月前に
うなこが編集しました。
2022年3月14日 1:43 PM #63063
中村参加者フッター色の変更について
>例えば、 background-color:〇〇;の前に全角スペースが入っていませんか?
スペースを消してみたところ無事色変え成功しました!(緑、青とも)
ありがとうございます。
知らないうちに全角スペースを使っていたようです。ウィジェット>フッター上部の画像の変更については
どのようにCSSを書けば良いのかよく分からない状況です。2022年3月14日 2:55 PM #63069
うなこモデレーター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; }
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のウィジェット>フッター上部の画像が表示されません。
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;
}で解決しました。
-
この返信は2年、 5ヶ月前に
-
投稿者投稿
- このトピックに返信するにはログインが必要です。