FC2ブログにCSSを使ったタグクラウドを設置してみた - MS-14D  

Home > スポンサー広告 > FC2ブログにCSSを使ったタグクラウドを設置してみた

スポンサーサイト

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

[タグ未指定]

Facebookでコメント

関連商品

ZenBack

最近閲覧数が多い記事

ブログパーツ

Comments:-

Comment Form
サイト管理者にのみ通知する

Home > スポンサー広告 > FC2ブログにCSSを使ったタグクラウドを設置してみた

Home > FC2ブログカスタマイズ > FC2ブログにCSSを使ったタグクラウドを設置してみた

FC2ブログにCSSを使ったタグクラウドを設置してみた

tag.png

今更すぎるけど、タグクラウドを導入してみた。タグはSEOで毎回入力していたけれど、クラウドはなんか共有プラグインのものがしっくりこなくて、導入していなかったのだけど、SEOを考えたら明らかに表示させたほうが良い。

プラグインは使わずにCSSでタグクラウドを実現する方法をスクリプト不使用のFC2ブログ用タグクラウド - 畳紙という記事で紹介されていたので、それを自分なりに少しだけカスタマイズしてみた。

興味がある人は続きから。
まずブログのサイドバーでもプラグインでも良いので、好きなところに下記のタグを挿入。

<ul class="tagcloud">
<!--stag-->
<li class="tcmax tc<%stag_count>">
<a href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>
</li>
<!--/stag-->
</ul>


上のタグをCSSでコントロールする。

ul.tagcloud{
margin: 5;
padding: 10px 0px;
line-height: 1.1;
font-size: 14px;
}

ul.tagcloud li{
margin: 0;
padding: 0;
display: inline;
font-size: 100%;
}

ul.tagcloud li a{
text-decoration: none;
}

li.tcmax a{
/* カウント20以上のとき(最大) */
font-size: 167%;
font-weight: bold;
color: #4169E1;
}

li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
/* カウント19~15のとき */
font-size: 136%;
font-weight: bold;
color: #4169E1;
}

li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
/* カウント14~10のとき */
font-size: 122%;
font-weight: bold;
color: #4169E1;
}

li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
/* カウント9~5のとき */
font-size: 114%;
font-weight: normal;
color: #4169E1;
}

li.tc4 a, li.tc3 a{
/* カウント4・3のとき */
font-size: 92%;
font-weight: normal;
color: #979797;
}

li.tc2 a, li.tc1 a{
/* カウント2・1のとき(最小) */
font-size: 77%;
font-weight: normal;
color: #b3b3b3;
}

ul.tagcloud li a:hover{
color: #ff0000;
}

リンクはやっぱり青だよね。
関連記事

[タグ] カスタマイズ ブログを簡単に SEO

Facebookでコメント

関連商品

ZenBack

最近閲覧数が多い記事

ブログパーツ

Comments:0

Comment Form
サイト管理者にのみ通知する

Home > FC2ブログカスタマイズ > FC2ブログにCSSを使ったタグクラウドを設置してみた

Page Top