はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

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

タグクラウドの簡単な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>
&nbsp;<!--/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 勉強しよ。

Prev
美しい明朝体に恋をしました。
Top
はじめてのブログデザイン
Next
タグクラウドの行間が狭い人

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

FC2ブログでタグクラウドの作り方

ぱぱすです。どーも。 タグクラウドを導入したいと思いいろいろ探してみました。 タグクラウドの簡単なCSSでの作り方 ここを参考にすると...

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

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