Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 固定ページ毎にヘッダー画像を変えたい
- このトピックには11件の返信、1人の参加者があり、最後に
奥野登世子により7年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
2018年6月26日 2:09 PM #60284
奥野登世子
ゲストいつもお世話になります。
固定ページ毎にヘッダー画像を変えるやりかた
上のトピックが希望に近い形だったのですが、解決策がなく続きがしりたいと思いました。
私の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です。
ご教授いただけますと、幸いです。よろしくお願いします。
-
2018年6月26日 6:47 PM #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に追記・上書きしていけばよくないですかね?
(ブラウザ・プラグイン・サーバー上に)キャッシュが残ってる場合、キャッシュをクリアにしてからご確認くださいね
-
2018年6月26日 6:53 PM #60286
かうたっく
ゲスト.page-id-数字
これは固定ページのIDを指定.category-数字
カテゴリのIDを指定固定ページ・カテゴリページのそれぞれの管理画面を開いたらURLに
ID=10と言う数字が書いてあります。これがIDが10になります。 -
2018年6月26日 6:59 PM #60287
かうたっく
ゲスト忘れ物しました。そういえば画像によって高さが違うと思うので、高さ指定は以下のように画像サイズに合わせて変更してください。
min-height: 400px;あと大きすぎる画像の場合、スマホでもご確認いただき、はみ出してたばあいは、検索するとたくさんページが出てくると思います。
-
2018年6月26日 11:26 PM #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ではフロントページで設定しているヘッダー画像が表示されています。高さの設定は反映しているのですが。。。
あと、カテゴリは反映していませんでした。
記述にミスなどがるのでしょうか???宜しくお願いします。
-
2018年6月27日 5:25 AM #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を置いていただけたらと思います。
-
2018年6月27日 5:27 AM #60290
かうたっく
ゲストPCでは固定ページでちゃんと表示されましたが、mobileではフロントページで設定しているヘッダー画像が表示されています。
この辺がどういう風なのかよくわかりません。もし上のCSSでダメなばあい。
『もう少し詳細を教えていただけたら。』と思います❦
うまくいくと良いですね!
-
2018年6月27日 11:14 PM #60298
奥野登世子
ゲストかうたっく様
ご指導ありがとうございました!
固定ページの画像、PCとモバイルどちらも表示できるようになりました。
画像とサイズの調整をすれば、希望通りのものができそうです。カテゴリはやはり変化がなくて、こちらは、今のままで行くことにしました!
多分、色々カスタマイズした影響が出ているのかもしれません。。。いつも、希望通りのものになるまで教えて頂けて本当に感謝です。
ありがとうございました!! -
2018年6月28日 12:30 AM #60299
かうたっく
ゲストでしたら、試しにこんな指定方法はどうでしょう??
https://wp-simplicity.com/category/settings/customizer/
.category-customizer.category-スラッグ
全カテゴリの場合
.categoryダメかも知れませんが?
-
2018年6月28日 12:34 AM #60300
かうたっく
ゲストまた、カテゴリ一覧にある記事の指定の場合
.post-52431
52431は記事IDです。
って…。こんな記事を作ろう!と、思ってたのを思い出した気がしました^^;
-
2018年6月28日 1:09 AM #60301
かうたっく
ゲスト.post-52431コチラは間違いです。#post-52431これが正解になります。あれ???っと思い・・・気になって見に来たら、やっぱり間違ってました…><
-
2018年6月29日 2:12 PM #60310
奥野登世子
ゲストかうたっく様
ありがとうございます!
スラッグでも試してみたのですが、やはり変わらずでした。
原因が不明で心のコリですが、他の固定ページはイメージ通りにできましたので、大満足です。ご丁寧に、ありがとうございました!
また、よろしくお願いいたします。
-
-
投稿者投稿
- トピック「固定ページ毎にヘッダー画像を変えたい」には新しい返信をつけることはできません。