http://10plate.blog44.fc2.com///blog-entry-108.html

便利ナビの背景を画像にする

私のテンプレートはmyhurtさんの便利ナビ機能を標準装備しています。
カテゴリ、カレンダー、検索結果を表示するときに該当記事一覧を上部に表示してナビゲーションしてくれるとても便利な機能です。
このナビゲーションが表示される部分の背景画像を設定するカスタマイズを紹介します。
このカスタマイズはテンプレートstandardが対象です。

HTMLを編集します。

<div class="category_navi">
<div class="menu_title">カテゴリー  [<%sub_title> ]</div>
～
</div>
</div>





<div class="date_navi">
<div class="menu_title">月別アーカイブ  [ <%now_year>年<%now_month>月 ] </div>
～
</div>
</div>





<div class="search_navi">
<div class="menu_title">[<%sub_title> ] を含む記事</div>
～
</div>
</div>

次にスタイルシートを編集します。
スタイルシートの何処でもいいので次の記述を加えます。

/* カテゴリナビゲーションの背景 */
.category_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

/* 月別アーカイブナビゲーションの背景 */
.date_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

/* 検索ナビゲーションの背景 */
.search_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

該当記事数によってナビゲーション部分の広さが変わってくるので、それを考慮した背景画像を用意しなければなりません。

関連記事

[ 2006/12/11 23:40 ] カスタマイズ standard 専用 | TB(0) | CM(1)

スポンサーサイト

便利ナビの背景を画像にする