このページの記事目次 （タグ: カテゴリー の検索結果 4 件）
カテゴリーの一覧（カテゴリーリスト）は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像 （もしくはアイコン等）になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。
以前、コメントで似たような質問を受けたことがありますが、最近また 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 の場合 */24 { background:url(A画像のパス) no-repeat center top; } /* カテゴリー名メモ */0 { background:url(http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png) no-repeat center top; } /* テスト用 */19 { background:url(C画像のパス) no-repeat center top; } /* カテゴリー名メモ */20 { background:url(D画像のパス) no-repeat center top; } /* カテゴリー名メモ */31 { display:none; }
応用： 親子カテゴリーの場合
親子カテゴリーを利用している場合で、親と子に見た目の変化をつけたい場合には 以下のようなソースを利用すると良いと思います。 この場合にも 非表示カテゴリー が利用可能です。
<ul class="catlist">
<!--category-->
<!--category_parent-->
<li class="
c_oya cat<%category_no>"><b><a href="<%category_link>" title="親カテゴリー: <%category_name> へ [ 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ブログ プラグイン 変数
スポンサーリンク
「私のカテゴリーリストはどのように...？」 と質問があったのでまとめてみました。 右側 が 私のカテゴリーリストです。 地味ではありますが、
普段は折りたたみ式， カテゴリー別ページでは 展開状態 カテゴリー別ページ では 現在地 を目立つように表示 カテゴリーリストに 「現在地表示機能」 を ] ← これの発展形 スクリプトOFF でも 問題なし （展開状態で表示） 任意のカテゴリーを非表示 に （無駄のない 変数ベース） と、色々小細工しています。 一般的には カテゴリーは目立つように 表示するのが良いと思いますが、私のテンプレートでは 上のナビゲーション部分にも入っているので．．． このぐらいで丁度良いかな と思っています。
左側 は Paroday さん作の Categories... というプラグインです。この綺麗なアイコンが使ってみたかったので... 作者さんにお願いして アイコンだけ加工して使わせていただくことにしました。 Paroday さんのプラグインについては 過去記事 を参照してください。
現在地表示機能付き カテゴリーリスト の設置方法
このブログで使っているものと 「完全に同じものではありません」 が このままコピー&ペーストすれば大丈夫なようにしてあります。 （※私が実際に使っているものは 非表示カテゴリー対応版 で <!--category_nosub--> ～ <!--/category_nosub--> 部分を外しています。 また、使用している id名 なども 下のソースとは異なる部分がありますので 混在させないようにご注意ください。） 必要な部分だけ取り入れてもらえば 色々と応用できると思います。
単カテゴリーのみ の場合 （親子カテゴリーの必要がない場合） は、
<!--category_parent--> ～ （中略） ～ <!--/category_sub_end--> 部分は不要です。 （※そのまま残しても特に問題はありません。）
1. プラグインの編集 で内容を以下のものと変更
プラグイン → 詳細 → 【HTMLの編集】 で内容を以下のものと変更します。 プラグインは 公式プラグインのカテゴリーでも それ以外でも何でもOKです。
<!-- ==========================================
折りたたみスクリプト 「プラグインの折りたたみ」 本体
Copyright (c) FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/blog-entry-131.html
テンプレート内 又は プラグイン内 に1つだけ記入すればOK！
=========================================== -->
<script type="text/javascript">
// <![CDATA[
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
// ]]>
</script>
<!-- ======================================= -->
<!--not_category_area-->
<script type="text/javascript">1 "><a href="#" onclick="showPlagin(1 ); return false;" title="カテゴリーリストを表示します">▽ List OPEN ▽</a></div>');1 " style="display:none">');1 ); return false;">List CLOSE</a>');
<!--/not_category_area-->
<ul id="oyako_cat">
<!--category_parent-->
<li
class="c_oya<%category_no>" ><a href="<%category_link>"
class="cat_oya<%category_no>" title="親カテゴリー: <%category_name> へ"><%category_name> [total <%category_count>]</a>
<ul><!--/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>
</ul>
</li>
<!--/category_sub_end-->
<!--category_nosub--> class="cat<%category_no>" ><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
<!--not_category_area-->
<script type="text/javascript">
<!--/not_category_area-->
これをアレンジして document.write の形にしてあります。 このようにしておけば スクリプトOFF でも問題なく表示できるので、色々な用途に使えます。
2. スタイルシートに 以下を記入
c_close.gif
/* 親子カテゴリー プラグイン用 */* html #oyako_cat li ul li {
追記 ： 2011/10/03
ul#oyako_cat {
margin:auto 0;
list-style:none;
}
3. テンプレートの <head> ～ </head> 部分に 以下を記入
カテゴリー別のページ（<!--category_area-->） でだけ 反映されるスタイル を設定します。 変数 を利用していますので、テンプレートの <head> 部分に入れてください。
c_open.gif
<!--category_area--> /**/ :/**/ url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/c_open.gif) no-repeat left top;<!--/category_area-->
適当にアレンジして使ってみてください。 変数 って本当に便利！
キーワード検索 ： カテゴリー 現在地表示 変数 非表示カテゴリー 折りたたみ
スポンサーリンク
FC2ブログの カテゴリー（一覧）のリスト表示 に 今どこのカテゴリーを表示しているか という 「現在地表示機能」 を付ける方法を紹介します。
ブログでは まだあまり見かけない機能だと思いますが、すごく簡単なので是非お試しを！ カテゴリーリストの形式は どんなタイプのものでもOKです。
要は単なるスタイル設定なので、リストの先頭マークに画像を入れているものであれば、その画像を 「現在地」 でだけ変えたり．．．色々とアレンジ出来ます。
FC2ブログに 現在地表示機能 を付ける方法 （カテゴリーリスト編）
まず、現在使っている カテゴリーリスト の リンクになっている部分 （サンプルソース参照 <a href="" ～> の中） に class="cat<%category_no>" を追加します。 変数 が多いところなので 位置を間違えないように 入れてください。
サンプルソースは 3種類 用意したので、丸ごとコピーしてもOKです！
カテゴリーリスト （現在地表示 対応版）サンプルソースA
このブログで使っているものと基本的に同じです。（※私のは 非表示カテゴリー対応版 で、ソースは 下のものよりちょこっとスマート！）
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul>
<!--category-->
<!--category_parent-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="親カテゴリー: <%category_name> へ"><b><%category_name></b> [total <%category_count>]</a>
<ul><!--/category_parent--><!--category_sub_hasnext-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
<!--/category_sub_hasnext--><!--category_sub_end-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
</ul>
</li>
<!--/category_sub_end-->
<!--category_nosub-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--/category-->
</ul>
カテゴリーリスト （現在地表示 対応版）サンプルソースB
親子カテゴリーの必要がない方用 のソース。シンプルなリスト形式になります。
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul>
<!--category-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
カテゴリーリスト （現在地表示 対応版）サンプルソースC
旧テンプレートで使っていたもので、親子カテゴリーが ツリー状表示 になります。
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul style="margin-top:5px">
<!--category-->
<!--category_parent-->
<li style="margin:0 0 6px 0">
<a href="<%category_link>"
class="cat<%category_no>" title="親カテゴリー: <%category_name> へ"><b><%category_name></b> [total <%category_count>]</a><br />
<!--/category_parent--><!--category_sub_hasnext-->
├ <a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a><br />
<!--/category_sub_hasnext--><!--category_sub_end-->
└ <a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a><br />
</li><!--/category_sub_end-->
<!--category_nosub-->
<li><a href="<%category_link>"
class="cat<%category_no>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--/category-->
</ul>
テンプレートの <head> ～ </head> 部分に 以下を記入
カテゴリー別のページ（カテゴリーエリア） でだけ 反映されるスタイル を設定します。 スタイル設定 はお好みで変更，追加してください。 たった これだけ！ 完成です。
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<!--category_area-->a.cat<%cno> { color:#000; }
※今回は <a href="" ～> に追加する方法で説明しましたが、サンプルソースA，B のようなものであれば <li> に class="cat<%category_no>" を加えてもOKです。 その場合は li.cat<%cno> { color:red; } や li.cat<%cno> { list-style-image:url('http://blog-imgs-xx .fc2.com/x/x/x/ …… /cat_li_this.png '); } などの設定が面白いかも。
これ以外の 「今どこ機能」 もついでに・・・
私のブログでは、これ以外にも色々 「今どこ機能」 を付けています。 便利ナビ や ページナビ，エリア変数を加えただけの class="" 指定，「その月」が強調表示される HS月別アーカイブ （月別の記事ページのみ） など。 FC2ブログなら、結構何でもできますよ♪
キーワード検索 ： FC2ブログ カテゴリー 現在地表示 変数 ページナビ
スポンサーリンク
カテゴリーの一覧で表示されない 「非表示カテゴリー 」 の作り方を紹介します。 これは、スクリプトを使っている訳でもなく スタイルシートで見えなくした訳でもない 極めて単純な発想ですが、私が実際に使っている方法です。
今現在 私が使っているのは 「ノンカテゴリー 」 と 「非表示カテゴリー 」 の2つです。 カテゴリー名は適当に付けてありますが、使っている意味合いが異なります。 例えば、「ゴミ箱行きカテゴリー」 「補足だけの記事」 「管理用カテゴリー」 「ご利用規約」 などに使うのも一案です。
右上の カテゴリーリスト は FC2の変数 を利用して 自動的に書き出している 一般的なものですが、 「ノンカテゴリー」 と 「非表示カテゴリー」 は載りません。 （月別アーカイブ や 検索結果ページ などには 記事 が反映されます。）
カテゴリーリストで 表示されないカテゴリー の作り方
A. 親子ツリー表示の場合
このサイトのように、カテゴリーに親と子を表示している場合の方法です。 公式または共有プラグイン を使っていれば、以下のような 変数 が入っているかと思いますが．．． まずは それを確認。
<!--category_parent-->
<!--category_sub_begin-->
<!--category_sub_hasnext-->
<!--category_sub_end-->
<!--category_nosub-->
表示したいカテゴリーを 親カテゴリー または 子カテゴリー という親子関係のものにしておけば、5. が余ってきます。 ここに目をつけ、テンプレートやプラグイン のカテゴリー表示該当箇所から 5. 部分を削除し、非表示にしたいカテゴリー を 5. に該当するように入れておきます。
↓↓ カテゴリーリスト用 ソースの一例 ↓↓
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul style="margin-top:5px">
<!--category-->
<!--category_parent-->
<li style="margin:0 0 6px 0">
<a href="<%category_link>" title="親カテゴリー: <%category_name> へ"><b><%category_name></b> [total <%category_count>]</a><br />
<!--/category_parent--><!--category_sub_hasnext-->
├ <a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a><br />
<!--/category_sub_hasnext--><!--category_sub_end-->
└ <a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a><br />
</li><!--/category_sub_end-->
<!--/category-->
</ul>
↑ ソースは このブログ で以前使っていたもので 一例 です。 要は、今使っているソースの <!--category_nosub--> ～ <!--/category_nosub--> 部分を削除 すればOK!
B. 単カテゴリー表示の場合
親カテゴリーのない単カテゴリーで使っている場合には、逆に 5. だけでOKなので、テンプレートやプラグイン のカテゴリー表示該当箇所から 5. 部分以外を削除し、非表示にしたいカテゴリー を 親と子 に該当するように入れておきます。
↓↓ カテゴリーリスト用 ソースの一例 ↓↓
【 参照 ： 直接編集OK 整形済みコピー用ソース 】
<ul>
<!--category-->
<!--category_nosub-->
<li><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--/category-->
</ul>
↑ ソースは オーソドックスなリスト表示 のものですが、使えそうならどうぞ。
キーワード検索 ： FC2ブログ 非表示カテゴリー カテゴリー スクリプト未使用
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
c_close.gif
c_open.gif
