ブログを始めた頃から各記事のカテゴリの分類の仕方に困っていました。
FC2ブログでは記事投稿時のカテゴリの選択は必須ですしね。
そんなこんなで記事数も増えてきましたし、ここらで一度カテゴリ分けを整理しようと検索していると、参考になる記事を見つけました↓ 『ブロガーがやって損はない7つのカテゴリ分けTips - WebとPCのメモ帳』
さらに同じブログでFC2の親子カテゴリ機能というものも知りました↓ 『FC2ブログの親子カテゴリの使い方 - WebとPCのメモ帳』
今回はこれの情報を参考にブログ記事のカテゴリ分類について書いていきたいと思います。
1.カテゴリの分類の仕方 『ブロガーがやって損はない7つのカテゴリ分けTips - WebとPCのメモ帳』では7つの指針が示されていますが、結局肝心なことは訪問者から見て意味の分かる(価値のある)分類を行うことのようです。
ほとんどの訪問者は検索エンジンから何かしらの検索ワードにヒットしたページに偶然やってきます。
そうしてそのページを見たときに「何か他にも関連記事がないか」とか「これはシリーズ化されてるから、他の記事も読みたい」という時にカテゴリを利用すると思います。
ここでカテゴリ名・分類の仕方が不適切だったりカテゴリへのリンクが分かりにくいところにあると、せっかくの訪問者が目的の記事にたどり着けなくなる訳です。
上の記事にある7つの注意点の
3. 訪問者が読んで意味がわかるカテゴリ名にする 5. カテゴリリストはきちんと目に付きやすい場所に配置する これらはユーザービリティーの問題ですね。
自分のためのカテゴリ分けというのではなく、他人が見て分かる機能になるようにカテゴリを使わなければなりません。
カテゴリのページも検索にヒットしますし、SEO的にもヒットしてほしいキーワードをカテゴリ名に使うことは必要かもしれません。
1. カテゴリ分けをする 2. Blog自体のジャンルと同じカテゴリは作らない 4. カテゴリだけを先に作らない 6. カテゴリ内のエントリが増えすぎたら分割を考える 7. 人気エントリをカテゴリとして独立させる これらは分類時の指針です。
手間を惜しまず記事が増えるたびにカテゴリの構成を考える必要性を説いてます。
記事の少ないうちはブログの方向性も定まってないですし、ある程度記事が増えてからカテゴリについて考えるのが良さそうです。
そして一つのカテゴリに記事が増えすぎると「似た記事が読みたい」という訪問者の目的が果たせなくなるので、上の2,6,7のようなルールが必要です。
過去の記事についても必要であれば登録カテゴリを見直し、極力細かく分類を行うことが重要なようです。
2.親子カテゴリの使い方 上で述べたように細かいカテゴリ分けを行うと、今度はカテゴリが雑多に増えすぎて見た目が悪くなります。
そんな時に使えるのが親子カテゴリ機能です。
ようは となっているのを というように、カテゴリの階層化行うものです。
これによりカテゴリをグループ化でき、そのカテゴリがどういうカテゴリなのかが親子2つのカテゴリ名を見ることで、さらに分かり易くなります。
それに上の例だと「みかんやりんごが服や電化製品と分類の大きさとして同位ってのは少し変かも」という考えの時にも使えます。
それではうちのブログで親子カテゴリを実際に使っていきながら、使い方を説明していきます。
「管理ページ」の「環境設定」にある「カテゴリの編集」のページを開きます。
 これが親子カテゴリを使う前の状態です。
分類名はどれも抽象的というか意味が広く、カテゴリ内の記事も多いです。
ここでアクセス解析QLOOKに関する記事を、一つのカテゴリとして独立させてみたいと思います。
 「QLOOK」の記事は「ネット関連」の記事なので、「ネット関連」を親カテゴリとして子カテゴリに「QLOOK」を作ります。
親カテゴリにしたいカテゴリの下に新たにカテゴリを作ります。
上の画像だと「ネット関連」が3番なので、「QLOOK」の挿入位置は4です。
既にあるカテゴリを子カテゴリにしたい場合も、親カテゴリの下にそのカテゴリを持ってきます。
 ↑このように親の下に子がくる状態にします。
では、実際にQLOOKを子カテゴリに変更します。
「子」というチェック欄にチェックを入れて「修正」を押します。
 リロードはされるものの「変更しました」とかは表示されないので、ちゃんとできたか確認していきましょう。
 今はまだ「QLOOK」カテゴリに何も記事がないので、記事数が0になっています。
「ネット関連」カテゴリは「ネット関連(18)」と記事が18個あることが分かります。
では、「ネット関連」に分類されていたQLOOKに関する記事を一つだけ、「QLOOK」カテゴリに変更してみます。
 「QLOOK(1)」となり「QLOOK」カテゴリに記事が入ったことが分かります。
さらに親カテゴリである「ネット関連」カテゴリは「ネット関連(18)」と、記事数の合計が減っていません。
子カテゴリの記事数も含めた合計数がカウントされて、ちゃんと親子関係が設定できていることが分かります。
このようにして親子カテゴリを利用することができます。
3.カテゴリ一覧の表記方法 上記の方法で親子カテゴリは機能的に使えるようになりました。
しかし、視覚的にはまだ親子関係が示されていません。
記事の上下にパンくずリストを置いたり、カテゴリ表記を工夫する必要があります。
ここでは簡単に親子カテゴリをインデント表示する方法を説明したいと思います。
「プラグインの編集」のページを開き、「カテゴリー」(なければ「公式プラグインの追加」から「カテゴリー」のプラグインを追加しておきます。)の「詳細」をクリック。
「プラグインの改造」で【HTMLの編集】を行います。
まず最も基本的なカテゴリの表記方法は
<ul> <!--category--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li> <!--/category--> </ul> カテゴリーに関する変数を使い、各カテゴリーへのリンクと名前を列挙しています。
変数については公式の「テンプレート変数一覧」の「サイドバーメニュー関連の変数」にあります。
「テンプレート変数一覧」によると条件分岐で使えるのは、
<!--category_parent--> ~ <!--/category_parent--> ・親カテゴリ(子カテゴリがある場合)に表示する <!--category_nosub--> ~ <!--/category_nosub--> ・子カテゴリを持たないカテゴリで表示する <!--category_sub_begin--> ~ <!--/category_sub_begin--> ・各親カテゴリ下にある、先頭の子カテゴリのみで表示する <!--category_sub_hasnext--> ~ <!--/category_sub_hasnext--> ・各親カテゴリ下にある、最後尾の子カテゴリ以外で表示する <!--category_sub_end--> ~ <!--/category_sub_end--> ・各親カテゴリ下にある、最後尾の子カテゴリのみで表示する
になります。
これらをうまく利用して、箇条書きに使う<UL>タグをもう1段仕込みます。
実際にはこんな感じ
<ul> <!--category--> <!--category_nosub--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li> <!--/category_nosub--> <!--category_parent--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a> <!--/category_parent--> <!--category_sub_begin--><ul><!--/category_sub_begin--> <!--category_sub_hasnext--><li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li><!--/category_sub_hasnext--> <!--category_sub_end--><li ><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li></ul></li><!--/category_sub_end--> <!--/category--> </ul> まず子のいないカテゴリは<!--category_nosub-->内でカテゴリへのリンクを表示。
親カテゴリも<!--category_parent-->内でカテゴリへのリンクを表示します。
そして子カテゴリの始まりに<!--category_sub_begin-->内で箇条書きの始まり<UL>を出力。
<!--category_sub_end-->内で終わりの</UL>を出力します。
色々と試してみたところ子カテゴリが一つしかない場合<!--category_sub_hasnext-->内は表示されないようなので、<!--category_sub_end-->内にカテゴリへのリンクを記入。
子カテゴリが複数個の時のために<!--category_sub_hasnext-->内にも同じように記入します。
このようにした結果が、
 ↑のようになります。
複数個にすると、
 こんな感じ。
子カテゴリだけがインデントされているのが分かります。
ただ、じっくりとみないとあまり見た目に違いはなく、正直まだまだ分かりにくいです。
これはデザイン的な問題なのでテンプレートとの兼ね合いもありますし、CSSの仕事になります。
インデントをさらに大きくしてもいいですが、今回はカテゴリ名の前にある画像を変えてみたいと思います。
うちのブログで使っている共有テンプレートではサイドバーには、
.side_txt ul{ margin : 0; padding : 0; list-style-image:url(http://templates.blog.fc2.com/template/pop-k17/050524_04_icon.gif); list-style-position : inside; } こんな形で画像( )が指定されています。
この画像( )をペイントでちょこっといじりまして、中抜きにしてみました( )。
これを「管理ページ」の「ファイルアップロード」でアップロードしておき、子カテゴリの前ではこちらを表示するようにCSSで指定します。
具体的には先ほどのカテゴリープラグインのソースの子カテゴリの<li>に、
<ul> <!--category--> <!--category_nosub--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li> <!--/category_nosub--> <!--category_parent--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a> <!--/category_parent--> <!--category_sub_begin--><ul><!--/category_sub_begin--> <!--category_sub_hasnext--><li class="sub_category"><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li><!--/category_sub_hasnext--> <!--category_sub_end--><li class="sub_category"><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li></ul></li><!--/category_sub_end--> <!--/category--> </ul> 「class="sub_category"」と新たなクラスを付与します。
そして、そのクラスの内容は、
.sub_category{ margin : 0; padding : 0; list-style-image:url(http://blog-imgs-27.fc2.com/r/u/n/run800m/sub_cate_icon.gif); list-style-position : inside; } 先ほどと同じですが、画像URLだけが変わりました。
この結果、現在のうちのカテゴリ分類および表記は以下のようになっています。

 4つの子カテゴリを追加することで、詳細に記事を分類することができました。
見た目に関しては共有テンプレートを簡単に改造しただけなので、正直なところまだまだですね。
将来的にはテンプレートそのものを自作したいと考えています。
【追記】
現在の公式プラグインのカテゴリーは以下のようになっているようです。
<div> <!--category--> <div &align> <!--category_sub_hasnext-->┣<!--/category_sub_hasnext--> <!--category_sub_end-->┗<!--/category_sub_end--> <a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a> </div> <!--/category--> </div>
デフォルトで親子カテゴリーの表記が可能です。
┗と┣で親と子の見た目の違いも分かります。
スポンサーサイト
最近の記事を見る
⇒ (2010/02/22) ⇒QLOOKの解析タグのカスタマイズに新機能 (2009/05/02) ⇒CREATIVE ZEN その11(ZEN MX発売) (2009/04/30) ⇒あらゆるコネクタの埃(ホコリ)対策 (2009/03/31) ⇒カテゴリごとにブログのデザインを替える方法 (2009/02/28) ⇒T-falのIH鍋を買いました (2009/01/31) ⇒ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15) ⇒CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12) ⇒Spybotの右クリックメニューを消す方法 (2008/12/11) ⇒ブログのカテゴリ分けを使いこなす (2008/11/21)
テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ カテゴリ:ネット関連
|