タグクラウドの簡単なCSSでの作り方

それではタグクラウドの作り方です。
まずは FC2ブログの公式プラグインから「ユーザータグ」を追加します。

追加しましたら「プラグインの管理」から設定の項目にある「詳細」をクリック。

ユーザータグの編集画面が開きましたら【HTMLの編集】を更にクリックすると短いソースが書かれた編集画面が出てきます。その短いソースの変わりに下のソースを使います。

<p class="plugin-tag">
<!--stag-->
<a href="<%stag_url>" title="<%stag_name> <%stag_count>回" class="h-tag<%stag_count>"><%stag_name></a>
&nbsp;<!--/stag-->
</p>

補足として上のソースの赤い部分の説明ですが「<%stag_count>回」はタグクラウドのタグにマウスオーバーした際に、タグが使用されている回数をタグ名の後ろに表示させる為に使っています。もし必要ないようでしたら削除してください。

次に「h-tag」は私が勝手に決めた class 名です。変更して頂いても結構ですが、その際は後述する CSS のクラスセレクタ名も変更してください。

また、タグの表示順は現在「ランダム順」の変数「stag」を使っています。

もしも「カウント順」に表示させたい時は「ctag」に
もしも「新着順」に表示させたい時は「rtag」に「stag」を置換してください。
※上のソース内には「stag」部分が複数ありますが全てを置換と言う意味です。

本当は名前順なんてのがあれば良かったのですが、FC2ブログの変数に見つかりませんでした。対応を一緒に祈りましょう。

話をタグクラウドの作り方に戻すと、上のソースを全てコピーし、編集画面の短いソースを全部削除してからペーストしてください。

ペーストが済みましたら、その編集画面の下にあるラジオボタン型の選択メニューから、１番下の「カスタマイズ（HTMLを編集する場合はこれを選択してください）」を選択し「変更」ボタンをクリックで「ユーザータグ」への変更は完了です。

続いて CSS ですが、下のソースをすべてコピーし、ご使用中のテンプレートのスタイルシートの編集画面の任意の場所にペーストしてください。

※ご使用中のブログテンプレートによってはタグクラウドとしての機能を出せない可能性も考えられます。そんな方はセレクタの個別性を高める事により解消されるのではないでしょうか。

p.plugin-tag {
	text-align : justify;/*テキストを両端揃え*/
	text-justify : inter-word;/*IE only*/
	line-height : 1.2em;/*行間*/
}

/*最大【Level 8 == Max】*/
p.plugin-tag a {
	font-size : 150%;/*文字サイズ*/
	font-weight : bold;/*太字*/
}

/*19〜21回【Level 7】*/
p.plugin-tag a.h-tag21,
p.plugin-tag a.h-tag20,
p.plugin-tag a.h-tag19 {
	font-size : 150%;
	font-weight : normal;/*ノーマル*/
}

/*16〜18回【Level 6】*/
p.plugin-tag a.h-tag18,
p.plugin-tag a.h-tag17,
p.plugin-tag a.h-tag16 {
	font-size : 120%;
	font-weight : bold;
}

/*13〜15回【Level 5】*/
p.plugin-tag a.h-tag15,
p.plugin-tag a.h-tag14,
p.plugin-tag a.h-tag13 {
	font-size : 120%;
	font-weight : normal;
}

/*10〜12回【Level 4】*/
p.plugin-tag a.h-tag12,
p.plugin-tag a.h-tag11,
p.plugin-tag a.h-tag10 {
	font-size : 100%;
	font-weight : bold;
}

/*7〜9回【Level 3】*/
p.plugin-tag a.h-tag9,
p.plugin-tag a.h-tag8,
p.plugin-tag a.h-tag7 {
	font-size : 100%;
	font-weight : normal;
}

/*4〜6回【Level 2】*/
p.plugin-tag a.h-tag6,
p.plugin-tag a.h-tag5,
p.plugin-tag a.h-tag4 {
	font-size : 88.8%;
	font-weight : bold;
}

/*1〜3回【Level 1】*/
p.plugin-tag a.h-tag3,
p.plugin-tag a.h-tag2,
p.plugin-tag a.h-tag1 {
	font-size : 88.8%;
	font-weight : normal;
}

上の CSS を簡単に説明すると、カウント回数により８段階にテキスト（タグ）が変化をするよう書かれています。重要なのは h-tag クラスセレクタの後ろの数字です。その数字がカウント回数です。現在21回までが７段階目で、それ以上のカウント回数だと全て８段階（最大の大きさ）になります。

気付きましたか？
そうです。記事数が多い方はご自身で調整が必要ですし、手間もかかり、CSS ソースが長くなります・・・
でもSEO 的にはメリットがあると思うので、そんな恐い顔はやめて笑ってください♪

ちなみに私は上のソースを外部スタイルシートにして使っていますし、これからもこのタグクラウド CSS を成長させる苦労を楽しみたいと思っています。
効率的なモノがもてはやされる世知辛いインターネットの世界に、こんなタグクラウドが１つくらいあっても良いと思いませんか？

さてと JavaScript 勉強しよ。