Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › TOPページ以外 または特定のカテゴリーページを ヘッダー画像なしで
- このトピックには7件の返信、1人の参加者があり、最後に
Hidekichiにより9年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年11月1日 8:12 AM #46956
慎太郎
ゲストお世話になります
現在
ヘッダーの高さを300に設定し画像とメニューを表示していますTOPページ以外
または特定のカテゴリーページを
ヘッダー画像なしでメニューだけにしたいと思いますアドバイスいただけないでしょうか
よろしくお願いいたします -
2016年11月1日 8:24 AM #46957
Hidekichi
ゲスト#header { display: none; } .home #header { display: block; } .categoryid-(任意のカテゴリid) #header { display: block; }でどうでしょう?
全部のページで#headerを非表示にしておいて、.homeの時だけ、あるいは必要なカテゴリの時だけ表示するという具合です。 -
2016年11月1日 1:01 PM #46959
慎太郎
ゲストありがとうございます
ほー
CSSだけでヘッダーが消えるんですねヘッダーを消さずに
高さを変えて
画像なしのタイトルだけにも
変更できますか? -
2016年11月1日 2:27 PM #46960
Hidekichi
ゲストできますよ。原理は同じです。
どういう時に、どのようにするかが決まっていればできます。ヘッダーの画像の幅が、画面幅か記事幅かで、#h-topか#headerのいずれかに背景画像が入りますが、これを初期化すれば画像は消えますし、高さもその条件の時にいくつにするかで変更できます。
-
2016年11月1日 3:23 PM #46962
慎太郎
ゲスト是非、ご教示下さい
<HOME>
ヘッダーの画像は画面幅で高さ300PX
<その他>
画像なしで高さは100pxよろしくお願いします
m(_ _)m -
2016年11月1日 3:59 PM #46963
Hidekichi
ゲスト#header { height: 100px; background: initial; } .home #header { background-image: url("IMAGE-PATH"); height: 300px; background-repeat: repeat-x; /*C*/ background-position: 0 0; /*A*/ background-size: 100% auto; /*B*/ }基本はこういう感じでしょうか。
Cに関しては、画像が大きい場合で、リピートする必要がなければno-repeat。
Aは、背景画像をどこ基準に表示させるかということで、ど真ん中なら 50% 50%。
Bは、この場合、横100%で表示して縦は元の画像の縦横の比率のまま横100%へということですが、background-size: cover;を設定することで縦が足りないなら縦のサイズに拡大して横はみ出し。横が足りないなら横が合うようにして縦をはみ出し。ただしbackground-size: cover;はsafariでブラウザ側の問題で何かしら問題がが出る可能性もあります。一応どのブラウザもサポートはしてると思います。サンプルで高さを固定して横方向に伸びるように設定した時に、background-position: 0 0の場合、画像右側と下側が切れる可能性があります。
background-position: 50% 50%の場合、画像センター基準で四方が少しずつ切れる可能性があります。背景画像のアスペクト比を保ったまま拡大縮小するためにはheightでサイズを固定してはダメなのです。でまぁ横サイズに対する縦サイズの可変の方法はまた別にして、どのような画像で、どの位置を基準に表示させるかは僕らはわかりませんので、そのあたりもよく考慮しながら画像の作成と位置の設定を微調整してください。
-
2016年11月1日 5:52 PM #46977
慎太郎
ゲストありがとうございます!!
いろんなパターンで
ヘッダーをアレンジしてみますurl("IMAGE-PATH")
そのままコピペでなく
「IMAGE-PATH」に画像のアドレスを記入ですねカスタマイザーで設定した画像も削除
-
2016年11月1日 9:40 PM #47002
Hidekichi
ゲスト> 「IMAGE-PATH」に画像のアドレスを記入ですね
そうですね。
ただ試してないのでわかりませんが、カスタマイザーで画像を設定したとして、カスタマイザーの設定が子テーマで上書きされない場合はbackground-imageは書かなくてもよいかも知れません。#headerでbackground: initialとして初期化しているので書いておいた方が良いかとは思いますが。
また、#header { height: 100px; background-image: none; }で背景画像の非表示がイケるなら、
.home #header { background-image: url("IMAGE-PATH"); height: 300px; }これだけでよいかも知れません。
カスタマイザーの設定に頼らずとも、子テーマstyle.cssに直接追記するほうが柔軟に対応できると思います。
カスタマイザーで画像を設定しない場合、記事幅のヘッダ背景設定にはbackground-repeatなどが書いてあったと思いますが、#headerには何も書いてなかったと思うので、#header { height: 100px; } .home #header { background-image: url("IMAGE-PATH"); height: 300px; background-repeat: repeat-x; background-position: 0 0; background-size: 100% auto; }これで良いのかも知れませんね。
カスタマイザーの設定が入ることでいくつかのプロパティが追記されることもあり、場合によってはそれらを打ち消すプロパティを書く必要が出てくる場合もありますので、そこらはデベロッパーツール等で確認しながら作業してください。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。