Raindrops1.355で、アーカイブページ等で特別なヘッダー画像設定します。
Step1 ヘッダー画像を指定します。
.category #header-image{
background:url(画像のURL);
background-size:cover;
}
.categoryは、カテゴリーアーカイブに適用する例です（.categoryクラスは、body要素のクラスです。）
特定のカテゴリー等を指定する場合は、htmlソースから、body要素のクラスを確認してください。
category-15 等といった、category- カテゴリーID 等のクラスを使用できます。
Step2 ヘッダー画像のレスポンシブ設定
.category #doc3 #header-image{
padding-bottom:23.2%;
}
23.2%というのは ヘッダー画像の 高さ ÷ 幅 x 100 の値です。
トップページのヘッダー画像と縦横比が異なる場合にこの指定が必要になります。
同じサイズであれば必要ありません
この指定は、詳細度を高めにする必要があります。#doc3は必須です。
#doc3は、 ページ幅 レスポンシブ ボックス の場合に指定します。
#doc5は、 ページ幅 フルサイズレスポンシブ の場合に指定します。
ページ幅の指定は、アドミンバー/カスタマイズ/外観/レイアウトとサイドバーのセクションで確認することが出来ます。
Step3 サイトタイトルと タグラインの色の指定
.category #site-title span,
.category #header-image p{
color:red;
background:#fff;
}
.category #site-title span は、サイトタイトル用
.category #header-image p は、タグライン用の指定です。
以上のように、body要素の クラスに応じて柔軟に ヘッダー画像の変更が出来ます。
