固定ページ毎にヘッダー画像を変えたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 固定ページ毎にヘッダー画像を変えたい

このトピックには11件の返信が含まれ、1人の参加者がいます。1 年、 1 ヶ月前 奥野登世子 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60284

    奥野登世子

    いつもお世話になります。

    固定ページ毎にヘッダー画像を変えるやりかた

    https://wp-simplicity.com/suport/topic/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%81%A0%E3%81%91%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B/

    上のトピックが希望に近い形だったのですが、解決策がなく続きがしりたいと思いました。
    私のstyle.cssには

    /*———————————
    ヘッダー画像消す
    ——————————–*/
    #header {
    display: none;
    }
    /*———————————
    ヘッダー画像表示
    ——————————–*/
    .home #header {
    display: block;
    }
    /*———————————
    ヘッダー画像 固定ページ表示
    ——————————–*/

    .page-id-68 #header {
    display: block;
    }
    /*———————————
    ヘッダー画像 投稿ページ カテゴリ別表示
    ——————————–*/
    .single #header {
    display: block;
    }

    ★と記述しているのですが、固定ページ毎に画像を入れようと思って
    background-image url…のタグを入れても表示されません。
    (ID68はprivacy/policyのページです。)

    ★投稿ページはカテゴリごとに画像を替えれないかといろいろ調べてみたのですが、解決できませんでした。

    https://sakura-drop.com/
    こちらが製作中のURLです。
    ご教授いただけますと、幸いです。

    よろしくお願いします。

  • #60285

    かうたっく
    /*ここは基本表示されるヘッダー領域の背景*/
    #h-top {
    	background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/cropped-relaxation_new04-e1529652893312.jpg);
    }
    .page-id-68 #h-top {
    	background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/top_tel.png);
    }
    .page-id-** #h-top {
    	background-image: url(画像のパス);
    }

    たまたまあった画像を背景に表示しましたが、こんな感じで基本の背景画像をCSSに追記・上書きしていけばよくないですかね?

    (ブラウザ・プラグイン・サーバー上に)キャッシュが残ってる場合、キャッシュをクリアにしてからご確認くださいね

  • #60286

    かうたっく

    .page-id-数字
    これは固定ページのIDを指定

    .category-数字
    カテゴリのIDを指定

    固定ページ・カテゴリページのそれぞれの管理画面を開いたらURLにID=10と言う数字が書いてあります。これがIDが10になります。

  • #60287

    かうたっく

    忘れ物しました。そういえば画像によって高さが違うと思うので、高さ指定は以下のように画像サイズに合わせて変更してください。

    min-height: 400px;

    あと大きすぎる画像の場合、スマホでもご確認いただき、はみ出してたばあいは、検索するとたくさんページが出てくると思います。

  • #60288

    奥野登世子

    かうたっく様

    ありがとうございます!

    /*ここは基本表示されるヘッダー領域の背景*/
    #h-top {
    background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/relaxation_new04-e1529652893312.jpg);
    }
    .page-id-68 #h-top {
    background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/2abaff7cbb31f5689cd28b32df35dfc5.jpg);
    min-height: 83px;

    }
    .category-5 #h-top {
    background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/2abaff7cbb31f5689cd28b32df35dfc5.jpg);
    }

    上記のようにスタイルcssに記述しなおしたのですが、PCでは固定ページでちゃんと表示されましたが、mobileではフロントページで設定しているヘッダー画像が表示されています。高さの設定は反映しているのですが。。。

    あと、カテゴリは反映していませんでした。
    記述にミスなどがるのでしょうか???

    宜しくお願いします。

  • #60289

    かうたっく

    実際のURLがなかった・アクセスしてもどこにカテゴリがあるのか不明ですので
    以下Simplicityカテゴリで調べてみました。

    https://wp-simplicity.com/category/settings/customizer/

    SimplicityではモバイルCSSに以下が書いてあるようです。

    #header #h-top {
    	background-image: none;
    }

    って事で、以下のようにstyle.cssで指定すればPC・スマホとも表示されるかと思われます。

    .page-id-68 #header #h-top,
    .category-5 #header #h-top {
    	background-image: url(https://sakura-drop.com/wp-content/uploads/2018/06/2abaff7cbb31f5689cd28b32df35dfc5.jpg);
    }

    キャッシュを削除しても反映されないは、もしかしたら別の設定があるのかもしれません。

    ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

    上記のとおり、.category-5や固定ページID68とやらのURLを置いていただけたらと思います。

  • #60290

    かうたっく

    PCでは固定ページでちゃんと表示されましたが、mobileではフロントページで設定しているヘッダー画像が表示されています。

    この辺がどういう風なのかよくわかりません。もし上のCSSでダメなばあい。

    『もう少し詳細を教えていただけたら。』と思います❦

    うまくいくと良いですね!

  • #60298

    奥野登世子

    かうたっく様

    ご指導ありがとうございました!
    固定ページの画像、PCとモバイルどちらも表示できるようになりました。
    画像とサイズの調整をすれば、希望通りのものができそうです。

    カテゴリはやはり変化がなくて、こちらは、今のままで行くことにしました!
    多分、色々カスタマイズした影響が出ているのかもしれません。。。

    いつも、希望通りのものになるまで教えて頂けて本当に感謝です。
    ありがとうございました!!

  • #60299

    かうたっく

    でしたら、試しにこんな指定方法はどうでしょう??

    https://wp-simplicity.com/category/settings/customizer/
    .category-customizer

    .category-スラッグ

    全カテゴリの場合
    .category

    ダメかも知れませんが?

  • #60300

    かうたっく

    また、カテゴリ一覧にある記事の指定の場合

    .post-52431

    52431は記事IDです。

    って…。こんな記事を作ろう!と、思ってたのを思い出した気がしました^^;

  • #60301

    かうたっく

    .post-52431コチラは間違いです。

    #post-52431 これが正解になります。

    あれ???っと思い・・・気になって見に来たら、やっぱり間違ってました…><

  • #60310

    奥野登世子

    かうたっく様

    ありがとうございます!
    スラッグでも試してみたのですが、やはり変わらずでした。
    原因が不明で心のコリですが、他の固定ページはイメージ通りにできましたので、大満足です。

    ご丁寧に、ありがとうございました!
    また、よろしくお願いいたします。

トピック「固定ページ毎にヘッダー画像を変えたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)