タグクラウドの簡単なCSSでの作り方
2007/12/11 Tue [Edit]
CSS でタグクラウド作りました。
既に FC2ブログにはユーザータグを簡単にタグクラウドに変身させるプラグインがあったのですが、ソースを表示させた時に JavaScript が HTML 内にガーーーっと書かれているのが、なんとなく気になったので CSS だけで作れないかな?なんて思いから生まれたタグクラウドです。
CSS だけで作ったので機能はシンプル(お粗末)ですが、HTML には最低限しかソースを増やさずにタグクラウドを設置できますよ。
つまり SEO 的に多少メリットがある・・・のかな?
FC2ブログを使用中の方、もし宜しかったら「タグクラウドの簡単な 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> <!--/stag--> </p>
補足として上のソースの赤い部分の説明ですが「<%stag_count>回」はタグクラウドのタグにマウスオーバーした際に、タグが使用されている回数をタグ名の後ろに表示させる為に使っています。もし必要ないようでしたら削除してください。
次に「h-tag」は私が勝手に決めた class 名です。変更して頂いても結構ですが、その際は後述する CSS のクラスセレクタ名も変更してください。
また、タグの表示順は現在「ランダム順」の変数「stag」を使っています。
もしも「カウント順」に表示させたい時は「ctag」に
もしも「新着順」に表示させたい時は「rtag」に「stag」を置換してください。
※上のソース内には「stag」部分が複数ありますが全てを置換と言う意味です。
本当は名前順なんてのがあれば良かったのですが、FC2ブログの変数に見つかりませんでした。対応を一緒に祈りましょう。
話をタグクラウドの作り方に戻すと、上のソースを全てコピーし、編集画面の短いソースを全部削除してからペーストしてください。
ペーストが済みましたら、その編集画面の下にあるラジオボタン型の選択メニューから、1番下の「カスタマイズ(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 を簡単に説明すると、カウント回数により8段階にテキスト(タグ)が変化をするよう書かれています。重要なのは h-tag クラスセレクタの後ろの数字です。その数字がカウント回数です。現在21回までが7段階目で、それ以上のカウント回数だと全て8段階(最大の大きさ)になります。
気付きましたか?
そうです。記事数が多い方はご自身で調整が必要ですし、手間もかかり、CSS ソースが長くなります・・・
でもSEO 的にはメリットがあると思うので、そんな恐い顔はやめて笑ってください♪
ちなみに私は上のソースを外部スタイルシートにして使っていますし、これからもこのタグクラウド CSS を成長させる苦労を楽しみたいと思っています。
効率的なモノがもてはやされる世知辛いインターネットの世界に、こんなタグクラウドが1つくらいあっても良いと思いませんか?
さてと JavaScript 勉強しよ。
Comments
Track Backs
TB URL
ぱぱすです。どーも。 タグクラウドを導入したいと思いいろいろ探してみました。 タグクラウドの簡単なCSSでの作り方 ここを参考にすると...