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

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  カテゴリー  現在地表示  変数  ページナビ  

スポンサーサイト

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

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

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

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

カテゴリーリストに 「現在地表示機能」 を

2009/12/04 (金)  カテゴリー: ブログカスタマイズ上級
カテゴリーのリスト表示 (カテゴリー別のページで、現在地だけ少し目立つように設定できます。)

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-->
<style type="text/css">
a.cat<%cno> { color:#000; }
</style>
<!--/category_area-->

※今回は <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ブログなら、結構何でもできますよ♪

カテゴリーエリアのその他の 「今どこ機能」
(便利ナビ, ページナビ, ...etc)

キーワード検索 : FC2ブログ  カテゴリー  現在地表示  変数  ページナビ  

スポンサーリンク

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

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

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

-0 Comment

コメントを投稿する 記事: カテゴリーリストに 「現在地表示機能」 を


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

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

Trackback

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