てんぽ: FC2ブログでタグクラウド

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

FC2ブログでタグクラウド

2006年09月17日(日)

FC2ブログに最近追加されたタグ機能。 そのタグリストにおいて、タグの設定回数に応じてタグ名の大きさ等を変えて表示する、いわゆる「タグクラウド」をCSSで実現するカスタマイズです。 (この記事では単に「タグ」といった場合、タグリストのタグを意味します。)


タグリストのHTMLはたとえば以下のようにします。 <!--rtag--><!--/rtag-->は最近追加された順にタグリストを表示する変数です。

<ul class="tag">
<!--rtag-->
<li><a href="<%rtag_url>" title="<%rtag_count>件"><%rtag_name></a></li>
<!--/rtag-->
</ul>

リストではなく単純にタグ名を空白区切りにしたp要素とかでもいいのですが、とりあえずこのようにしておきます。 リストでもCSSでインライン表示することができます(ただし、タグ名の多くが半角英数の場合、半角文字列改行問題が生じます。)

.tag li {
 display:inline;
 margin-right:0.5em;
}

.tag a{
 text-decoration:none;
}

つぎにタグの設定回数ごとにフォントサイズを変えます。 設定回数0~5までは○px, 6~10までは△px, … , 30~50までは□px, …とやっていてはきりがないので、 逆に大きいほうから小さいほうに向かって指定していきます。 つまり、とくに何も指定しない場合にフォントサイズ大とし、設定回数が少ないものに順に小さいフォントサイズを割り当てます。 ここでは設定回数の判別に属性セレクタを用いています。

.tag a[title] {
 font-size:130%;      /*  これが最大のフォントサイズになる */
 font-weight:bold;    /*  デフォルトで太字 */
}

.tag a[title="15件"],
.tag a[title="14件"],
.tag a[title="13件"],
.tag a[title="12件"],
.tag a[title="11件"] {
 font-size:120%;      /* 11~15件はfont-size:120%で太字 */
}

.tag a[title="10件"],
.tag a[title="9件"],
.tag a[title="8件"],
.tag a[title="7件"],
.tag a[title="6件"] {
 font-size:110%;      /* 6~10件はfont-size:110%で太字 */
}

.tag a[title="5件"],
.tag a[title="4件"],
.tag a[title="3件"],
.tag a[title="2件"],
.tag a[title="1件"] {
 font-size:100%;      /* 1~5件はfont-size:100% */
 font-weight:normal;  /* 1~5件は太字でない */
}

たとえば設定回数10のタグ(title属性が「10件」であるタグリスト)は、.tag a[title="10件"]にマッチするため、 フォントサイズが(130%よりも優先されて)110%になるとともに、.tag a[title]font-weight:bold指定により太字で表示されます。 設定回数が16以上のタグは.tag a[title]にしかマッチしないため、フォントサイズは130%で太字になります。

属性セレクタはIEが対応していないので、代わりにクラスセレクタを使うことになるでしょう。 そのさい、セレクタのクラス名では先頭に数字は使えないことに注意します。

フォントサイズはテキトーなのでフォントサイズ指定手法などを参考にきっちり指定してください。

#109
カテゴリ:FC2ブログ
タグ[ CSS カスタマイズ テンプレート変数 ]

(-0件)

コメントの投稿

トラックバック(-2件)

http://mb.blog7.fc2.com/tb.php/109-b969cf4d

タグクラウド:◇ちょっと、原稿量増えてきたので、実装してみたのだが・・・ 【FC2ブログカスタマイズ】

 今月、ちょっと気張り過ぎたようだ。  すでに、70投稿を超えている・・・  このまま維持できるわけないし、思い切り減るのも  情けない...

  • 2008年11月25日(火)21:59:03
  • from 創るmetaboy
タグクラウド

「ユーザータグ」を表示するようにしていたが、実は当初、使用頻度が高いものが、大きく表示されるようにしたかった。 結局放置してしまっていたが、訪れたブログで、その機能が搭載されていて、「タグクラウ...

  • 2011年01月18日(火)22:31:09
  • from 創作は力なり

<<リストマーカーをクリック(Fx) | 蟲師のDVDほしい>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

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