FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

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

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


HTMLを編集します。

<!--▼▼ カテゴリ、月別、検索結果ナビゲーション ▼▼-->

<!--▼カテゴリー別記事ナビゲーション▼-->
<!--category_area-->
<div class="category_navi">
<div class="menu_title">カテゴリー &nbsp;[<%sub_title> ]</div>

</div><!--/page_navi-->
</div><!--/category_navi-->
<!--/category_area-->
<!--▲カテゴリー別記事ナビゲーション▲-->

<!--▼月別記事ナビゲーション▼-->
<!--date_area-->
<div class="date_navi">
<div class="menu_title">月別アーカイブ &nbsp;[ <%now_year>年<%now_month>月 ]&nbsp;</div>

</div><!--/page_navi-->
</div><!--/date_navi-->
<!--/date_area-->
<!--▲月別記事ナビゲーション▲-->

<!--▼検索結果ナビゲーション▼-->
<!--search_area-->
<div class="search_navi">
<div class="menu_title">[<%sub_title> ] を含む記事</div>

</div><!--/page_navi-->
</div><!--/search_navi-->
<!--/search_area-->
<!--▲検索結果ナビゲーション▲-->

<!--▲▲ カテゴリ、月別、検索結果ナビゲーション ▲▲-->


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

/* カテゴリナビゲーションの背景 */
.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; /* 画像を中央寄せする場合 */
}


該当記事数によってナビゲーション部分の広さが変わってくるので、それを考慮した背景画像を用意しなければなりません。
関連記事
[ 882 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2006/12/16 03:34 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る