便利ナビの背景をカテゴリ別に変える

便利ナビの背景をカテゴリ別に変えるカスタマイズを紹介します。
このカスタマイズは当サイトが提供する共有テンプレート lightframe シリーズが対象です。

HTMLを編集します。
赤い部分を加えてください。

<div class="various_outline">
<div class="various_title">カテゴリー  [<%sub_title> ]<%cno></div>
<div class="various_body cno_<%cno>" >
<div class="various_text">
～

次にスタイルシートの末尾に以下を加えてください。

/* カテゴリ１(blog-category-1)の便利ナビ */
.cno_1 {
background-image: url("http://～"); /* 画像URL */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: right bottom; /* 画像の配置 */
height:300px; /* 高さ */
}

/* カテゴリ２(blog-category-2)の便利ナビ */
.cno_2 {
background-image: url("http://～"); /* 画像URL */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: right bottom; /* 画像の配置 */
height:300px; /* 高さ */
}

以下同じように .cno_3 .cno_4 ・・・といくらでも追加できます。

http://～に背景にしたい画像のURLを入れてください。
高さ、繰り返し表示、画像の配置はお好みに合わせて設定してください。

高さを一定ではなく、リスト数にあわせたければ、高さを設定している行を削除してください。

便利ナビに背景があれば、各カテゴリをユーザーへ直感的に伝えられるかも知れませんね。

関連記事