カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

最近の記事

月別アーカイブ

カテゴリー

ユーザータグ

最近のコメント

プロフィール

run800m

Author:run800m
元・陸上競技の800m選手。
好きな食べ物はねぎともやし。

専門は機械工学・ロボティクス
興味は経済・経営・生産・心理
・地理・プログラミング・性

QLOOKアクセス解析
フィードメーター - 他人の日記を見るのか? ver.BLOG

QRコード

QR

RSS

はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Technoratiに追加
newsgatorに追加
Powered by SEO対策 RSSプラス

ブログ内検索

リンク

このブログをリンクに追加する

気まぐれ広告

ブログ内容を反映するらしい。
ホントか!?

他人の日記を見るのか? ver.BLOG
デジモノ好きのたわいもない記録 デジタルライフ
スポンサーサイト
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


最近の記事を見る

(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)


カテゴリ:スポンサー広告

カテゴリごとにブログのデザインを替える方法
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
ブログのカテゴリ分けを使いこなす』の記事で、よりカテゴリに意味を持たせて細分化ができるようになりました。

こうなってくるとカテゴリごとに違ったメニューを表示したり、デザインも切り替えたりしてみたくなってきます。

そんな訳で、実際にFC2ブログで(他のブログでも活用できると思います)できるのかどうかをテストしてみました。


1.ページを見分ける


カテゴリごとに表示を切り替える訳ですが、複数の記事が同時に表示されている場合、それぞれカテゴリが異なってしまいます。

記事の部分に何かを表示したりデザインを装飾する場合はそれでもいいですが、サイドバーを追加したり、ブログのデザイン全てを切り替えるような場合は具合が悪いです。

そこで個別に記事が表示されている時にだけ、表示機能がONになるようにページを見分けます。

これにはテンプレート変数を使います。

QLOOKの高度な解析を使いこなす その1』の記事で書きましたが、FC2ブログには以下のような種類のページがあります。

  • 各記事
  • 例)http://run800m.blog23.fc2.com/blog-entry-48.html
  • 日付
  • 例)http://run800m.blog23.fc2.com/blog-date-200901.html
  • カテゴリ
  • 例)http://run800m.blog23.fc2.com/blog-category-6.html
  • タグ
  • 例)http://run800m.blog23.fc2.com/?tag=HTML
  • 検索
  • 例)http://run800m.blog23.fc2.com/?q=QLOOK
  • コメントを書く(携帯版)
  • 例)http://run800m.blog23.fc2.com/?m&m2=form&no=43
  • コメントを見る(携帯版)
  • 例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=res
  • トラックバック(携帯版)
  • 例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=tb
  • その他
  • 例)http://run800m.blog23.fc2.com/(トップページ)
    http://run800m.blog23.fc2.com/page-1.html(一覧)

トップページなどはテンプレート変数では見分けることができないので、その他としています。

ちなみに携帯版だとタグや検索も見分けることができません。

では、実際にどう見分けるのかというと、↓のようなエリアタグを使います。
<!--category_area--> ~ <!--/category_area-->

これは開始タグ<!--category_area-->と終了タグ<!--/category_area-->の間に挟まれた内容がカテゴリ表示のページの時だけ表示されるようになります。

こういったエリアタグが何種類もあります↓
<!--index_area-->
<!--not_index_area-->
<!--permanent_area-->
<!--date_area-->
<!--category_area-->
<!--comment_area-->
<!--trackback_area-->
<!--form_area-->
<!--search_area-->
<!--tag_area-->
<!--edit_area-->

これを組み合わせることで、上述したようにページを見分けます。

つまり
  • 各記事
  • <!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->
  • 日付
  • <!--not_index_area--><!--date_area--><!--/date_area--><!--/not_index_area-->
  • カテゴリ
  • <!--not_index_area--><!--category_area--><!--/category_area--><!--/not_index_area-->
  • タグ
  • <!--not_index_area--><!--tag_area--><!--/tag_area--><!--/not_index_area-->
  • 検索
  • <!--not_index_area--><!--search_area--><!--/search_area--><!--/not_index_area-->
  • コメントを書く(携帯版)
  • <!--not_index_area--><!--permanent_area--><!--form_area--><!--/form_area--><!--/permanent_area--><!--/not_index_area-->
  • コメントを見る(携帯版)
  • <!--not_index_area--><!--comment_area--><!--/comment_area--><!--/not_index_area-->
  • トラックバック(携帯版)
  • <!--not_index_area--><!--trackback_area--><!--/trackback_area--><!--/not_index_area-->

こういったようにして表示するページを判別できます。

分類の詳しい話は『QLOOKの高度な解析を使いこなす その1』をどうぞ。

今回はそのうちの各記事
<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->
を利用します。


2.カテゴリを見分ける


カテゴリの見分けにはJavaScriptを使います。

カテゴリの名前は<%topentry_category>、カテゴリ番号は<%topentry_category_no>で得ることができます。

この<%topentry...>で始まるテンプレート変数は<!--topentry-->~<!--/topentry-->というエリアタグの中でのみ有効になります。

これを使って、例えば「QLOOK」というカテゴリの場合だとこうなります↓
<!--not_index_area--><!--permanent_area--><!--topentry-->
<script language="JavaScript"><!--
if("<%topentry_category>"=="QLOOK")
document.write("QLOOK");
// -->
</script>
<!--/not_index_area--><!--/permanent_area--><!--/topentry-->
カテゴリ名が「QLOOK」に一致するかどうかを、JavaScriptのif文で調べて、正しい場合は「QLOOK」と表示しています。

この表示する部分に任意のHTMLソースを入れ込めば、任意のカテゴリの時だけサイドバーを表示したり、画像を表示したりできます。

(ちなみにHTMLソースを入れ込む場合は『ブログやサイトにソースコードを乗せる時に便利なツール』を使うと改行、タブの削除などが簡単にできて便利です。)

各記事の時だけ表示したいので、全体を<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->というエリアタグで囲っています。

今回はカテゴリ名をif文の条件に使いましたが、カテゴリ番号でも同じことが可能です。

ただ、カテゴリを追加・削除したりした場合に番号だと変更されてしまい、その度に確認をしなければならないのが面倒なので、カテゴリ名を条件に使ってみました。

もちろんカテゴリ名の変更をした場合には、条件文の方を修正しなければなりません。


3.その他の方法


カテゴリを見分けるのにJavaScriptを使いましたが、それならいっそのことページの判別もJavaScriptで行う方法もあります。

JavaScriptではlocation.hrefを用いて現在のURLを取得することができます。

上述したリストにありましたが、
  • 各記事
  • 例)http://run800m.blog23.fc2.com/blog-entry-48.html
  • 日付
  • 例)http://run800m.blog23.fc2.com/blog-date-200901.html
  • カテゴリ
  • 例)http://run800m.blog23.fc2.com/blog-category-6.html
  • タグ
  • 例)http://run800m.blog23.fc2.com/?tag=HTML
  • 検索
  • 例)http://run800m.blog23.fc2.com/?q=QLOOK
  • コメントを書く(携帯版)
  • 例)http://run800m.blog23.fc2.com/?m&m2=form&no=43
  • コメントを見る(携帯版)
  • 例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=res
  • トラックバック(携帯版)
  • 例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=tb
  • その他
  • 例)http://run800m.blog23.fc2.com/(トップページ)
    http://run800m.blog23.fc2.com/page-1.html(一覧)

このようにページの種類によってURLが変わりますので、現在のURLさえ取得できれば、それを元に処理の切り分けができる訳です。

テンプレート変数により切り分けよりも、より詳細に分けることも可能です。

こんな感じにテンプレートにJavaScriptを仕込みます。
<script language="JavaScript"><!--
blog_url="http://run800m.blog23.fc2.com/"; // トップページのURLを記入
offset_num=blog_url.length; // そのURL文字数を取得
url=location.href; // ブラウザの現在のURLを取得

if(url.length > offset_num){ // 現在のURLがトップページのURLよりも長いか?
word=url[1+offset_num]; // トップページのURL+2文字目の文字を取得
if(word=="t") // http://run800m.blog23.fc2.com/?『t』ag=...
document.write("タグページ");
else if(word=="q") // http://run800m.blog23.fc2.com/?『q』=...
document.write("検索ページ");
else if(word=="l"){ // http://run800m.blog23.fc2.com/b『l』og...
word=url[5+offset_num]; // トップページのURL+6文字目の文字を取得
if(word=="e") // http://run800m.blog23.fc2.com/blog-『e』ntry...
document.write("各記事ページ");
else if(word=="d") // http://run800m.blog23.fc2.com/blog-『d』ate...
document.write("日付ページ");
else if(word=="c") // http://run800m.blog23.fc2.com/blog-『c』ategory...
document.write("カテゴリページ");
}
}
// -->
</script>
URLのドメイン以降の2文字目と6文字目を取得して、条件分岐に使っています↓
http://run800m.blog23.fc2.com/?『t』ag=
http://run800m.blog23.fc2.com/?『q』=
http://run800m.blog23.fc2.com/b『l』og-『e』ntry-48.html
http://run800m.blog23.fc2.com/b『l』og-『d』ate-200901.html
http://run800m.blog23.fc2.com/b『l』og-『c』ategory-6.html

これだけで検索のページなのか、日付のページなのかということが分かります。

上の例では「各記事ページ」などと表示を行うだけですが、ここの部分に表示させたいHTMLソースを入れれば、任意のページでサイドバーを表示させたりできる訳です。



今回の記事でカテゴリごとに個別に表示を替えることができるようになりました。

と、いいながらまだうちのブログでは使っていません。

いずれテンプレートを自作しようと思っていますので、その時に導入してみたいと思います。

今回興味を持ったもの

さすが!と言わせる 続・FC2ブログ徹底攻略術さすが!と言わせる 続・FC2ブログ徹底攻略術
篠塚 充

シーアンドアール研究所 2007-11
売り上げランキング : 133029
おすすめ平均

Amazonで詳しく見る
by G-Tools

スポンサーサイト

関連した記事を見る(タグ検索)
HTML FC2ブログ JavaScript
最近の記事を見る

(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)


テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

カテゴリ:ネット関連

ブログのカテゴリ分けを使いこなす
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
ブログを始めた頃から各記事のカテゴリの分類の仕方に困っていました。

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>

デフォルトで親子カテゴリーの表記が可能です。

┗と┣で親と子の見た目の違いも分かります。

今回興味を持ったもの

すごい! 整理術 (PHPビジネス新書 50)すごい! 整理術 (PHPビジネス新書 50)
坂戸 健司

PHP研究所 2008-02-19
売り上げランキング : 37566
おすすめ平均

Amazonで詳しく見る
by G-Tools


関連した記事を見る(タグ検索)
FC2ブログ HTML CSS カテゴリー
最近の記事を見る

(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)


テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

カテゴリ:ネット関連

ブログでのnofollowの使い方 後編
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
『ブログでのnofollowの使い方 前編』の続編です。

今回はnofollow属性を使ったSEO対策について書いていきます。

nofollow属性の説明や、スパム対策については前編をご覧下さい。


2.内部リンク制御


検索結果を左右するのはリンクであるというのは前回も述べました。

リンクには自分のサイト以外から貰う外部リンクと、自分のサイト内の内部リンクというものがあります。

このうち内部リンクは自分のサイト内のページ同士のリンクなので、いくらでもいじることができます。

これをうまく活用して、サイト内の重要なページとそうでないページを指定することができます。


ページにはそれぞれリンクジュースと呼ばれる価値があります。

これは「たくさんのいいリンクを貰っているページはいいページ」という評価によってつけられた価値です。

なので、いいページほどジュースをたくさん持っています。

このジュースは自分で飲むのではなく、リンク先へと分け与えられます。

例えば「10」のリンクジュースを持っているページ内に5つのリンクがあれば、一つ一つのリンク先には「2」のジュースが注がれます。

もしリンク先が一つなら「10」のジュースを一人占めできます。

この「ジュースをたくさん貰ったページ」というのが、「たくさんのいいリンクを貰っているページはいいページ」というものに繋がります。

「いいリンク」とは「たくさんのジュースをくれるリンク」ということです。

このジュースの流れを制御するのが内部リンクの制御です。

なおこのジュースの量、つまりページの価値を表す一つの指標として、かの有名なGoogleのPageRankというものがあります。


サイト内には見てもらいたいページと、そんなに見てもらわなくてもいいページがあるはずです。

言い換えれば検索結果の上位に来て欲しいページと、来る必要のないページです。

特にブログではたくさんのリンクが自動生成されますが、その全てが重要なリンクでしょうか?

必要かもしれないけれど、重要ではないリンクがあるはずです。

そういった所にまでリンクジュースを分け与えるのはもったいない訳です。

そこで登場するのが「nofollow属性」です。

nofollowを使えば本来存在するリンクも、検索ロボットから見れば存在しないことにできるので、リンクジュースの浪費を防ぐことができます。


と、偉そうに書いてきましたがほとんど『海外SEO情報ブログ』というブログの受け売りです。

もっと詳しい話は以下のページなんかを参照して下さい。
『「nofollow」でGoogle PageRankをコントロール』
『nofollowの正しい使い方(1)』
『nofollowの正しい使い方(2)』
『ホームページより高いページランクの内部ページ』

しかも自サイト内のリンクの制御の話をしておきながら、実際にはうちから他サイトへのリンクの制御ばっかりしていることに今気付きました。

内部のリンクジュースの話があんまり関係ない……

まあとにかく参考までに、このブログ内のどこにnofollowを追加したのか列挙していきたいと思います。

テンプレート内の<a>タグを全部検索して、一つ一つ考えながら付加するかしないかを決めました。

nofollowを付加したもの

・最近のコメント
・最近のトラックバック
・最新コメントのRSS
・最新トラックバックのRSS

これらは検索にヒットする必要がない、重要でないページなので付加しました。

今では「そもそも必要ないか」という考えになって、最新のコメント以外はサイドバーからリンクそのものが無くなりました。

・RSSを登録
・管理者ページ
・このブログをリンクに追加する
・トラックバックを見る
・コメントを見る
・トップへ

これは機能的な物であり、リンクとしての価値はないのでnofollowを付加しました。

「このブログをリンクに追加する」はFC2ブログユーザー専用の機能で、一度も使ったことないけど使う人いるんだろうか?

・広告欄

Amazonの商品のページにリンクジュースを与えても得しないですしね。

・テーマ、ジャンル

これはFC2の同じテーマやジャンルの記事のリストへと飛ぶリンクです。

普段私はそのリストを利用していないですし、検索にヒットしてもあまり影響ないのでカットしました。

・SBM(ソーシャルブックマーク)

SBMの登録アイコンです。

登録フォームへと飛ぶリンクにリンクジュースを与えてしまうのは勿体ないのでカットです。

それにSBMをやたらと登録すると「大量の相互リンク」と見なされて、ペナルティにもなります。

nofollowを入れておけば相互リンクではなく、SBMからの片方向リンクになります。


nofollowを付加しなかったもの

・タグクラウド
・カレンダー
・月別アーカイブ
・カテゴリー
・トップページへ
・他の記事へ(最新記事、前後の記事)
・携帯用アドレス

これらは全てブログ内の記事やカテゴリへの誘導です。

どの記事も等価値で検索に載って貰いたいので、リンクジュースを特定の部分に絞るということをしていません。

カテゴリーやタグのページ、月別のページにリンクジュースを渡す必要はあまりないかとも考えましたが、nofollowで絞りすぎて完全にGoogleにインデックスされない可能性も考えて残しました。

・QLOOKアイコン

これは単純にタグが改造不可のためです。

ブログパーツなんか改造不可の場合は注意が必要です。

・最新記事のRSS

RSSが検索にヒットするのかはちょっと疑問ですが、もしそういうサービスがあったらと思って残しました。

・記事内言及URL

これはマナー的なものですね。

記事の中で使わせていただいているページに対して、感謝の気持ちのリンクジュースです。



と、まあこんな感じでリンクジュースを与えたいページと与えたくないページを制御しています。

ちなみにここまでnofollowを使った内部リンク制御の話をしておいてなんなんですが……

うちのブログはどのページもPageRankは0か未評価です!!

PageRankは小数点以下も数値があり、またGoogleが実際に評価に使っているものと公表されているものは違うとも言われていますが……

nofollowで制御しようがしまいが、リンクジュースを分けるほどの影響力も無いのが実情ですね。

【追記】
と思ったら、今月のPageRank改定でいくつかのページについにPageRankがついてました!

3とか4とかついてましたが、これは「普通」という評価みたいです。

今回興味を持ったもの

繁盛ブログになれるSEO入門―初心者でもできる!繁盛ブログになれるSEO入門―初心者でもできる!
石崎 秀穂

秀和システム 2007-07
売り上げランキング : 49873
おすすめ平均

Amazonで詳しく見る
by G-Tools


関連した記事を見る(タグ検索)
SEO HTML FC2ブログ 設定
最近の記事を見る

(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)


テーマ:SEO対策 - ジャンル:コンピュータ

カテゴリ:ネット関連

ブログでのnofollowの使い方 前編
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
『Googleでの検索順位が一気に上昇・復活』という記事で少し触れましたが、nofollow属性を当ブログでも導入してみました。

nofollow属性はリンクを貼るための<a>タグにおいて、「<a rel="nofollow"....」といった感じで指定します。

これがどういう意味を持つのかというとnofollow属性を指定したリンクはGoogleなどの検索ロボットから見て、「繋がっていない」と認識されます。

もちろんブラウザから人間が普通に閲覧する分には「繋がっている」リンクとして、当たり前に機能します。

ではなぜ「繋がっていない」と検索ロボットに教えるのかというと、本来はスパム対策です。

Googleでは「たくさんのページからリンクされているページはいいページだろう」という考えで、検索結果の順位を決めています。

この為スパマー達は他人のブログのコメントやトラックバックで、見境無く自分のサイトへのリンクを貼りました。

そうすることで被リンクを大量に確保するためです。

そんなことをされては検索結果がスパマーのサイトだらけになってしまうため、対策として産み出されたのがnofollow属性による「繋がっていない」リンクです。

これをコメントやトラックバックのリンクにセットすることで、スパマー達がURLを貼っても意味がないようにしたのです。

そんなnofollow属性ですが、今ではスパム対策だけでなくSEOにも使えます。

これをうまく利用することで、サイト内のページの重要度を操作することができます。

今回、私が実際にこのブログに施したnofollow属性について説明していきたいと思います。



1.スパム対策


まずnofollow属性の本来の使い方であるスパム対策から。

最近のブログサービスはもとからnofollowが設定されていることもあるようですが、私の使っているテンプレートでは設定がされていませんでした。

スパムに悩まされるほどコメントもトラックバックもありませんが、対策を施しておいて損はないのでやってみました。


・コメント

まずはコメントから。

テンプレート中の「<!--comment--> ~ <!--/comment-->」というコメントで挟まれた所を探します。

そこが投稿されたコメントの表示に関する部分です。

うちだとこんな感じ↓
<!--comment-->
<div class="td"><b><%comment_title></b><br><%comment_body></div>
<div class="state">
【<%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>】
<%comment_url+str> | <%comment_mail+name> <span class="T-<%comment_trip>">#<%comment_trip></span>
[ <a href="<%comment_edit_link>">編集</a>]
</div>
<hr>
<!--/comment-->
他のブログサービスでも似たようなところがあるはずです。

<%comment_xxx>というのがたくさんありますが、意味は名前の通り。

コメント投稿者が投稿した内容、タイトル、日時などです。

この中でnofollow属性が必要なのはURLの部分。

<%comment_url+str>という変数です。

これは↓のように、「URL」という文字列に記入されたリンクが貼られたタグに置き換わります。
<a href="http://run800m.blog23.fc2.com/">URL</a>
このままではnofollow属性をつけられないので、代わりに記入したURLだけに置き換わる<%comment_url>という変数を使います。

それを使うことで<%comment_url+str>の部分を以下のように置き換えます↓
<a href="<%comment_url>" rel="nofollow">URL</a>
全体としてはこんな感じ↓
<!--comment-->
<div class="td"><b><%comment_title></b><br><%comment_body></div>
<div class="state">
【<%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>】
<a href="<%comment_url>" rel="nofollow">URL</a> | <%comment_mail+name> <span class="T-<%comment_trip>">#<%comment_trip></span>
[ <a href="<%comment_edit_link>" rel="nofollow">編集</a>]
</div>
<hr>
<!--/comment-->
さらにリンクすら表示したくないような場合は、元から入力フォームを設置せず、上記のリンク部分のコードを根こそぎ削除しましょう。

ちなみにコメント本文の中にURLが書かれていた場合、FC2ブログではコメント本文ではHTMLタグを使うことができないので、リンクにするかどうかは管理人が設定できます。

管理ページの「各種設定」⇒「ブログの設定」⇒「コメント設定」⇒「オートリンク」の部分で、「文中のURL・メアドをそのまま表示」とすればリンクにはなりません。

なお上のソースで「[ <a href="<%comment_edit_link>" rel="nofollow">編集</a>] 」の部分にもnofollowがありますが、それについては後編のnofollowを使ったSEOに関する部分で述べます。


・トラックバック

トラックバックについてもコメントとやることは同じです。

まずは「<!--trackback--> ~ <!--/trackback-->」で囲まれた部分を探してください。

コメントと同じくそこがトラックバックの表示に関する部分になります。

今度は<%tb_xxx>という変数が並んでおり、その中で<%tb_url>がトラックバックされた記事のURLになります。

この<%tb_url>のリンクに関してnofollowをつければいいのです↓
<!--trackback-->
<hr><h3><a href="<%tb_url>" rel="nofollow" name="trackback<%tb_no>"><%tb_title></a></h3>
<%tb_excerpt>
<%tb_blog_name>【<%tb_year>/<%tb_month>/<%tb_day> <%tb_hour>:<%tb_minute>】
<!--/trackback-->
なお宣伝目的の無関係なトラックバックを避けるため、相手の記事の中にこちらの記事へのリンクがあるかどうかを条件にする方法があります。

「言及リンク」と呼ばれるもので、管理ページの「各種設定」⇒「ブログの設定」⇒「トラックバック設定」⇒「言及リンク」の部分で設定できます。

自分がトラックバックをする場合にも、この言及リンクが条件になっていないか注意しましょう。

また言及リンクがあってもスパムの可能性もあります。

受信したトラックバックをすぐに表示するのではなく、管理人が承認後に表示するように設定することも可能です。

管理ページの「各種設定」⇒「ブログの設定」⇒「トラックバック設定」⇒「承認設定」で行って下さい。





記事が長くなったので、後半のnofollow属性を使ったSEOに関する記事は次回に回したいと思います。

ところで当たり前のように「nofollow属性」と書いてきましたが、正確にはrelが属性です。

気になっていくつかのサイトを見てみたところ、「rel="nofollow"属性」と書いていたり、「rel="nofollow"(以下、nofollow属性)」と書いていたりして、どうやら「nofollow属性」というのが既に一つの言葉になっているようです。

「SEO対策」みたいな言葉と同じ感じですね。

あと「nofollow」のスペルミスで「noffolow」や「nofolow」というのも散見されたので、コーディングの際には注意が必要です。

また、スパム対策で始まったnofollowですが、「no nofollow」というnofollowをやめようという動きもあるようです↓

『コメントからnofollowを外しました » 海外SEO情報ブログ・メルマガ』
http://www.suzukikenichi.com/blog/no-nofollow-you-commnet-i-follow/

コメントやトラックバックをしてくれた人に対する感謝の気持ちとして被リンクを提供するという考えのようです。

確かにスパム対策などの管理がしっかりとされてさえいれば、そういった目的でのnofollowは不必要ですし、今後広がっていくものかもしれません。

SEOのことばかり最優先に考えていると、サイトが窮屈になってしまいますしね。

今回興味を持ったもの

無料ブログSEOバイブル (アクセスアップ)無料ブログSEOバイブル (アクセスアップ)
鈴木 将司

翔泳社 2008-05-16
売り上げランキング : 3281
おすすめ平均

Amazonで詳しく見る
by G-Tools


関連した記事を見る(タグ検索)
SEO HTML FC2ブログ 設定
最近の記事を見る

(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)


テーマ:SEO対策 - ジャンル:コンピュータ

カテゴリ:ネット関連

Buzzurlを導入してみた
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
SBMシリーズ第5弾!

今回はBuzzurl(バザール)です。

名前からしても今までと違う印象を受けますが、果たして!

【SBMシリーズ】
はてなブックマークを導入してみた
FC2ブックマークを導入してみた
livedoorクリップを導入してみた
Yahoo!ブックマークを導入してみた

1.登録
さてさて、まずはサービスに登録するところから始まります。

ここから今までのSBMとは一味違います。

もともとBuzzurlの運営はECナビという価格情報サイトが母体のようです。

ECナビの口コミ機能からBuzzurlというサービスに繋がったのでしょうかね。

とにかくこのECナビの会員となって、Buzzurlが使えるようになる訳です。

そして他のSBMと違うところは、Yahoo! JapanのIDでもBuzzurlを利用することができます。

という訳で『Yahoo!ブックマークを導入してみた』の時に作成したr_run800mというIDで登録してみましたが、IDはYahoo! Japanのものと違う名前でも設定できます。

違いがわかりにくいですが、Yahoo! JapanのIDである「r_run800m」ではなく「run800m」で登録しました。

なお、Yahoo! JapanのIDで利用しているユーザーのBuzzurlでのユーザー名は「yj/【ユーザー名】」となります。

私の場合は「yj/run800m」となっています。


2.ブログパーツ
恒例の「ブックマークする」アイコンとブックマーク数の表示方法です。

ログイン後、右上の「ヘルプ(FAQ)」→最下段の「【ブックマークアイコンの取り付け 】」→「自分のブログやサイトにも取り付けたい」の中に説明があります。

説明の中で「取り付け方法はこちら」とあり、以下のアイコンジェネレーターなるものが使えます。
http://buzzurl.jp/icongenerator/

14種類の画像と、6種類のブログサービスまたはURLを選択・入力することで、ブログパーツが生成されます。

FC2だとこんな感じ。(BuzzurlにブックマークBuzzurlにブックマーク
<a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_big_01.gif" alt="Buzzurlにブックマーク" style="border:0"></a><a href="http://buzzurl.jp/entry/<%topentry_link>" title="Buzzurlにブックマーク" target="_blank"><img src="http://api.buzzurl.jp/api/counter/<%topentry_link>" alt="Buzzurlにブックマーク" style="border:0"></a>

ブログサービスごとなので、FC2のテンプレート専用変数でローカライズがしっかりされています。

ブックマーク数の表示もセットでコードが生成されています。


3.使い勝手
まずサイトの見た目ですが、かなりごちゃごちゃとしています。

まさにバザールといった感じ。

情報量が多いことの裏返しですが、少し見難さも感じます。

ニュースに特化しているようで、大手や人気のあるニュースサイトへのリンクがあったりします。

ブックマークに対するコメントや評価など、ソーシャル部分にも力を入れているようです。

このコメント、返信、グーされたといった機能があるため、ログイン後のページも多機能で理解するのに時間がかかります。

トップページと同じく、ごちゃごちゃとしています。

ヘルプなども、もう少し見た目に配慮してくれると使いやすいかなと思いました。

ただ、多機能ということで「ブックマーク整理ツール」なるものがあります。

登録した全てのブックマークに対して、キーワードの追加・置換・除去や公開レベルの設定が一括でできます。

あまり使うことはないでしょうが、そういった必要にかられた場合にいちいち一つずつ変更しなくて済むのは便利ですね。

あとは他のSBMとの違いとして、登録の仕方が少し面倒です。

普通はブックマークアイコンを押すと登録フォームに飛ぶのですが、Buzzurlの場合はBuzzurlの紹介のようなページが表示され、そこで「ブックマークする」という画像をクリックして、初めて登録フォームに飛びます。

【追記】 ↑これに関しては直接フォームへ飛ぶように改善されました。この記事がECナビの社長にBuzzurlでブクマされて「こういう声ってありがたいです。」って言われたからかもしれません。驚きです。)


登録項目はタイトル、コメント(半角1000文字以内)、キーワード(タグ)があり、おすすめキーワードと今までに使ったキーワードの入力補助もついています。

しかし、タグが8個までと他のSBMの10個と比べると少なく、また最大の違いが入力するテキストボックスが個々のキーワードごとなので入力が面倒です。

普通はタグ(キーワード)の入力に使うテキストボックスは一つで、一つのタグごとにスペース区切りだったり、はてなだったら角括弧で囲んだりして入力しますが、Buzzurlはタグごとに個別に入力します。

これだと複数のSBMを使っている場合には、タグをコピペして一発で入力できないので面倒です。

そういう人の方が少数派なんで、あまり問題はないのでしょうが。

あとデータのインポート、エクスポートですがログイン後ページの左のサイドバーにある「基本情報の設定変更」→「インポート」「エクスポート」からできます。

インポート形式はRSS形式とNETSCAPE-Bookmark-file-1形式。

エクスポート形式はRSS1.0とブックマーク形式だそうです。


あと使っていて気付いたこととして、Buzzurlのブックマークがみんなの知恵蔵に連動しています。

みんなの知恵蔵では検索した語句に関するニュースをasahi.comから、ブックマークされたサイトをBuzzurlから入手しているので、Buzzurlに登録されたサイトが表示されます。

例えばIEEE1394で調べると、Buzzurlにブックマークしてある『IEEE1394 Firewire i.LINK DV [他人の日記を見るのか? ver.BLOG]』が表示されます。

これはBuzzurlのヘルプなどには載っていないですし使って初めて気がつきましたが、ちょっとしたアクセスアップに繋がるかもしれないですね。



そんなこんなでBuzzurlはちょっと他とは違ったSBMでした。

今までのYahoo!、live door、はてな、FC2といった元々多くのユーザーを抱えて手広く事業を展開している大手ネットサービスではないので、SBMを盛り上げるためには独自性を出す必要があったのかもしれません。


さて、次回はどのSBMを使ってみようかな。


今回興味を持ったもの

バザールでござーる はがきイラスト2004 プリント機能付きバザールでござーる はがきイラスト2004 プリント機能付き

インターチャネル・ホロン 2003-10-17
売り上げランキング : 18230

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
HTML CSS 設定 FC2ブログ ブックマーク Buzzurl
最近の記事を見る

(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)


テーマ:SEO対策 - ジャンル:コンピュータ

メインカテゴリ:ネット関連  カテゴリ:SBM



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