以前、固定ページやカテゴリーページなど特定のページごとにヘッダーロゴを変更するカスタマイズを行いました。
今回は、ヘッダーの背景画像の変更方法についてです。
同じヘッダー内のカスタマイズなので『記事その①その②（続編）』として、セットでご参考になれば幸いです。
同じ記事内に追記しようと思ったのですが、私の文才では訳が分からなくなりそうだったので記事を分けました。。
ヘッダー画像とヘッダーロゴの違い
まず、ヘッダー画像とヘッダーロゴの違いについて
同じヘッダー内にあるので両方ともヘッダー画像になるのですが、ここでは
- ヘッダー内の背景画像を『ヘッダー画像』
- ヘッダー内のサイトロゴを『ヘッダーロゴ』
とさせていただきます。
ヘッダーには背景画像とロゴの2種類を設定することができます。
設定の仕方は下記の記事内をご覧くださいませ。
画像をアップロードする
トップページとは別のヘッダー画像が必要となるため、各ページで使用したい画像をメディアから追加しておきます。
画像URLの取得方法
- ヘッダー画像をダッシュボードのメディアにアップロード
- アップロードした画像から画像URLを取得
画像URLの文字を消してURLを入力してください。
固定ページやカテゴリーページでヘッダー画像を変更する
設定されているヘッダー画像はトップページで表示、
固定ページやカテゴリーページなど、特定のページでは別のヘッダー画像を表示させたい！！
と言った場合のカスタマイズです。
指定のCSSをスタイルシートに追加してカスタマイズを行っていきます。
CSS追加方法ダッシュボード『外観→カスタマイズ→追加CSS』
または、『外観→テーマエディター→スタイルシート』にCSSコードをコピペしていきます。
全ての固定ページでヘッダー画像を変更する
全ての固定ページに適用されます。
使用したい画像のURLをbackgroundの（”画像URL”）に入力します。
.page .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
指定した固定ページのみヘッダー画像を変更する
固定ページを指定する場合、それぞれのページに振り分けられている『ページID』を記載します。
『.page-id-●●●』●●●の部分にページIDを挿入してください。
.page-id-●●● .logo {
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
カテゴリーページのヘッダー画像を変更する
カテゴリーをクリックしたときに表示されるカテゴリーページのヘッダー画像を変更します。
.category .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
指定したカテゴリーページのみヘッダー画像を変更する
特定のカテゴリーページでのみヘッダー画像を変更することが出来ます。
各カテゴリで画像を変更したり、特定のジャンルだけガラッと雰囲気を変えたいときにオススメ。
変更したいカテゴリーページのIDを記入していきましょう。
.category-●● .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
このとき変更されるのは、カテゴリーページのヘッダーのみです。
特定のカテゴリーに属する記事のみヘッダー画像を変更する
特定のカテゴリーに属する記事のヘッダー画像を変更することができます。
●●にはカテゴリーIDを記入してください。
.categoryid-●● .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
特定のカテゴリーページと属する記事を一気に指定
特定のカテゴリーだけヘッダーを分けて印象を変えたい場合、
カテゴリーページのヘッダー画像と、そのカテゴリーに属する記事のヘッダー画像が同じな方が自然かと思います。
この場合、CSSを二つ書くのではなく一つにまとめて
特定のカテゴリーページと、そのカテゴリーに属する記事のヘッダー画像を同時に指定することが出来ます。
.category-●● .logo, .categoryid-●● .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
ポイント●●に記入するのはカテゴリーIDなので、カテゴリーページ用も属する記事用も入る数字は同じカテゴリーIDになります。
全てのタグページでヘッダー画像を変更する
タグをクリックした際にタグページ内で表示されるヘッダー画像を変更することが出来ます。
.tag .logo{
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
特定のタグページのヘッダー画像を変更する
IDで指定したタグページのみ、ヘッダー画像を変更することが出来ます。
.tag-●● .logo {
background: url("画像URL") no-repeat;
background-size: contain;
background-position: center;
}
ヘッダーロゴを非表示にする
背景画像が変わるとなんだかヘッダーロゴが邪魔だなー…
なんてことになるかもしれません。
ヘッダーロゴを非表示にする場合は、ページごとのロゴに対して『visibility: hidden;』と指示します。
.page .logo > a img {
visibility: hidden;
}
非表示にしたい箇所によってセレクタを変更してください。
/*固定ページ全体*/ .page .logo > a img {visibility: hidden;}
/*固定ページ(ID指定)*/ .page-id-●● .logo > a img {visibility: hidden;}
/*カテゴリーページ*/ .category .logo > a img {visibility: hidden;}
/*カテゴリーページ（ID指定）*/ .category-●● .logo > a img {visibility: hidden;}
/*カテゴリー記事*/ .categoryid-●● .logo > a img {visibility: hidden;}
/*タグページ*/.tag .logo > a img {visibility: hidden;}
/*タグページ（ID指定）*/ .tag-●● .logo > a img {visibility: hidden;}
.logo > a img { }だけだと、サイト内全てのヘッダーロゴが非表示になります。
display:noneとの違い
display:none; と指示しても非表示になるのですが、こちらは要素を元から非表示にしてしまいます。
そのため、『.logo > a img { display:none; }』としてしまうと、ヘッダー全体が無くなり、ロゴと背景画像どちらも消し去ってしまいます。
一方、visibility: hidden; と指示すると、要素は残っているけど視覚的に非表示にしてくれます。そのため、”ロゴだけ見えなくして背景だけを残す”といったことが可能になります。
さいごのひとこと
CSSが効かない場合、サイトで使用されているクラス名などをご確認ください。
検証やデベロッパーツールなどで確認できると思います。
最後に言うのもアレなんですが…
カスタマイズする際は失敗しても元に戻せるようにしておいた方が安心ですよ。
おわり
