ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
画像  カテゴリー  FC2ブログ  プラグイン  変数  

スポンサーサイト

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

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

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

2012/07/28 (土)  カテゴリー: ブログカスタマイズ中級
カテゴリー毎に画像を付けたカテゴリーの一覧

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

以前、コメントで似たような質問を受けたことがありますが、最近また 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; }
  • .cat番号 には 自分のサイトで利用しているカテゴリー番号を入れてください。
  • カテゴリー0 は通常使っていると思うので、そこに テスト用の画像を入れておきました。 http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png 幅200px 高さ38px です。 利用する画像のサイズを変えた場合には、スタイルシートも調整してご利用ください。
  • /* メモ */ 部分には /* ブログ雑記 */ などコメントを入れておくと分かり易いかも。
  • 非表示にしたいカテゴリーがある場合、上の方法で 見えなくする以外にも方法はあります。
    過去記事 FC2 非表示カテゴリーの作り方 を参照してください。

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

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

<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>
  • 親カテゴリー部分のスタイルに c_oya を追加してある以外は 基本形と同じです。
  • 必要に応じて li.c_oya { 親カテゴリーの時のスタイル } を追加してください。


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

キーワード検索 : 画像  カテゴリー  FC2ブログ  プラグイン  変数  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-227.html

2012/07/28 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: カテゴリーリストに各画像を加えて目立つように


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。