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

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

  • このトピックには11件の返信、1人の参加者があり、最後に奥野登世子により7年、 10ヶ月前に更新されました。
11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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
      奥野登世子
      ゲスト

      かうたっく様

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

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

11件の返信スレッドを表示中
  • トピック「固定ページ毎にヘッダー画像を変えたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)