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

VWSとは フォーラム Lightning [ 解決済 ] ウィジェット>フッター上部の画像(3種類)とフッターの色(3種類)をページごとに使い分けしたい

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

  • このトピックには9件の返信、3人の参加者があり、最後に中村により1年、 11ヶ月前に更新されました。
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #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はフォーラムライセンスが有効のユーザーにのみ表示されます

    #63042

    石川@Vektor,Inc.
    キーマスター

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

    できる!CSSカスタマイズ

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

    #63060

    うなこ
    モデレーター

    書き方は間違っていないので、おそらく全角スペースがどこかに入っているのではないかと思います。
    半角じゃないと、反映されませんので、ひとまず空白が空いている箇所があれば空白を削除してください。

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

    • この返信は1年、 11ヶ月前にうなこが編集しました。
    #63063

    中村
    参加者

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

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

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

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

    #63069

    うなこ
    モデレーター

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

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

    もしもわからなくなりましたらご連絡ください。

    • この返信は1年、 11ヶ月前にうなこが編集しました。
    • この返信は1年、 11ヶ月前にうなこが編集しました。
    #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;
    }

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

    #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;
    }
    • この返信は1年、 11ヶ月前にうなこが編集しました。
    • この返信は1年、 11ヶ月前にうなこが編集しました。
    #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のウィジェット>フッター上部の画像が表示されません。

    • この返信は1年、 11ヶ月前に中村が編集しました。
    • この返信は1年、 11ヶ月前に中村が編集しました。
    #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;
    }

    で解決しました。

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。