ページごとにヘッダーの背景画像を変更する方法《cocoon》

カスタマイズ

以前、固定ページやカテゴリーページなど特定のページごとにヘッダーロゴを変更するカスタマイズを行いました。

固定ページや特定のカテゴリーページのヘッダーロゴを変える!《cocoon》
今回は、固定ページに新しく子サイトを作成するイメージで、ガラッと印象を変えたページを作成してみたのですが、ヘッダーの変更など、割と手間取ったので記録しておきたいと思います。 こんな人にオススメ・トップページと固定ページのヘッダーロ...

今回は、ヘッダーの背景画像の変更方法についてです。
同じヘッダー内のカスタマイズなので『記事その①その②(続編)』として、セットでご参考になれば幸いです。

 

ぶっちゃける同じ記事内に追記しようと思ったのですが、私の文才では訳が分からなくなりそうだったので記事を分けました。。

 

スポンサーリンク

ヘッダー画像とヘッダーロゴの違い

まず、ヘッダー画像とヘッダーロゴの違いについて
同じヘッダー内にあるので両方ともヘッダー画像になるのですが、ここでは

  • ヘッダー内の背景画像を『ヘッダー画像』
  • ヘッダー内のサイトロゴを『ヘッダーロゴ』

とさせていただきます。

 

ヘッダーには背景画像とロゴの2種類を設定することができます。
設定の仕方は下記の記事内をご覧くださいませ。

ヘッダーロゴの画像がスマホで見ると崩れている現象を解決!と、設定の仕方
設定したヘッダーロゴの画像が、パソコンやタブレットではきれいに表示されているのに、スマホでは伸びたり縮んだりと表示が崩れてしまうことがあります。 私が現在作成しているサイトでもヘッダーロゴの画像が縮...

画像をアップロードする

トップページとは別のヘッダー画像が必要となるため、各ページで使用したい画像をメディアから追加しておきます。

画像URLの取得方法

  1. ヘッダー画像をダッシュボードのメディアにアップロード
  2. アップロードした画像から画像URLを取得
画像URLをCSS中の(”画像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が効かない場合、サイトで使用されているクラス名などをご確認ください。
検証やデベロッパーツールなどで確認できると思います。

最後に言うのもアレなんですが…
カスタマイズする際は失敗しても元に戻せるようにしておいた方が安心ですよ。

 

おわり

タイトルとURLをコピーしました