HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ中級 > カテゴリーリストに各画像を加えて目立つように

カテゴリーリストに各画像を加えて目立つように

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-227.html
カテゴリー毎に画像を付けたカテゴリーの一覧

カテゴリーの一覧(カテゴリーリスト)は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像(もしくはアイコン等)になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。

以前、コメントで似たような質問を受けたことがありますが、最近また FC2ユーザーフォーラム でトピックが上がっていたので、それにも回答し 記事に残しておくことにしました。

図は 完成イメージの一例です。
画像部分とテキスト全体をリンクにしてあります。 背景画像を使っているので、サイズ次第で アイコンのようにすることもできますし、一部のカテゴリーを非表示 にすることも簡単です。 (非表示の方法は 「CSS で見えなくする方法」 と、「FC2ブログの仕様と変数を利用し、ソース自体にそのカテゴリーを載せないようにする方法」 があります。)

色々応用できると思いますが、図を例にして 方法を紹介します。

FC2ブログ カテゴリーリストに それぞれの画像を入れる方法


1. プラグイン「カテゴリー」 の 【 HTMLの編集 】

環境設定: プラグインの設定 で 該当するプラグイン の 【 詳細 】 をクリック → プラグインの改造 【 HTMLの編集 】 をクリックで 表示される内容を書き換えます。 プラグインを使わず、テンプレートに直接記入してもOK です。

<ul class="catlist">
<!--category-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>

2. スタイルシートの設定

環境設定: テンプレートの設定 で スタイルシートに以下を追加します。 (テスト中は 複製のテンプレートなどで作業をすると良いと思います。)

/* 画像の大きさが (幅200px) 高さ38px の場合 */
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:40px 2px 0 2px;
color:#999; /* リンクの色を他と変える必要がなければ不要 */
}

.cat24 { background:url(A画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat0 { background:url(http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png) no-repeat center top; } /* テスト用 */
.cat19 { background:url(C画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat20 { background:url(D画像のパス) no-repeat center top; } /* カテゴリー名メモ */
/* 以下同様 */

/* 非表示にしたいカテゴリーがある場合 */
.cat31 { display:none; }

応用: 親子カテゴリーの場合

親子カテゴリーを利用している場合で、親と子に見た目の変化をつけたい場合には 以下のようなソースを利用すると良いと思います。 この場合にも 非表示カテゴリー が利用可能です。

<ul class="catlist">
<!--category-->
<!--category_parent-->
<li class="c_oya cat<%category_no>"><b><a href="<%category_link>" title="親カテゴリー: <%category_name> へ &#10;[ total <%category_count> 件 ]"><%category_name></a></b></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_end-->
<!--/category-->
</ul>


この記事では スタイルシートで各カテゴリーの背景画像を設定する方法 を紹介しましたが、背景ではなく 直接画像タグ(<img>)を使うことも可能です。 ここで紹介していないものについては、フォーラムのコメントなどを参考にしてみてください。

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-227.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 2件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ中級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る