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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

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

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


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

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

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

<!--▲カテゴリー別記事ナビゲーション▲-->


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

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

/* カテゴリ2(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を入れてください。
高さ、繰り返し表示、画像の配置はお好みに合わせて設定してください。

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

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

関連記事
コメントの投稿









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

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

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

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

いたおの他の運営サイト
カレンダー
08 | 2016/09 | 10
- - - - 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 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

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

08 | 2016/09 | 10
- - - - 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 -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。