スクリプト不要！コピペするだけ！簡単にFC2ブログのサイドバーにタグクラウドを設置する方法 | FC2ブログカスタマイズ

FC2ブログのサイドバーにスクリプトを使用せずにコピー&ペーストするだけで簡単にタグクラウドを設置できる方法について覚書。

タグ文字列が途中で折り返されないようにする対策済み。

デフォルトは5段階ですが、CSSを変更すれば任意に設定が可能です。

記事で紹介するタグクラウドの概要

元々はBlack Vicunaさんと畳紙さんに記載されいたタグクラウドのHTMLとCSSを使用しています。

使用することについてコメント欄を使用して許可を取ろうと思ったのですが...何故か書き込めなかったので、もし作者さんが見てこの記事の削除等希望される場合はコメント欄等でご連絡をいただけると助かります。

このタグクラウドの仕様ですが、スクリプトを使用せずにHTMLとCSSだけで作成されており、タグの数を6段階(20以上、19～15、14～10、9～5、4～3、2～1)でフォントの色やサイズを設定できるようになっています。

また、タグの並びもランダムになっています。

CSSを変更すれば6段階の設定ももっと細かくすることもできます。

この手のタグクラウドはたいていはスクリプトを使用した共有プラグインを使用して設置する場合が多いかと思いますが、こういったシンプルな作りのものを使った方がトラブルも少なく、カスタマイズもしやすいです。

私も最初はスクリプトを使用した共有プラグインを使っていたのですが、ある時からきちんと表示されなくなり原因もよくわからなかったのでこっちに変更しました。

紹介するタグクラウドのイメージはこのブログのサイドバーを見ていただければ一目瞭然ですが、参考に画面ショットを貼り付けておきます。

※以下の画像は、このブログをFC2で運用していたときのものです。

使用するHTML、CSS

使用するHTMLとCSSを以下に記載します。

手順に従って以下のコードを全てコピー&ペースとしてください。

<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>
<style>
ul.tagcloud{
        margin: 0;
        padding: 0.5em 10px;
        line-height: 1;
        font-family: "メイリオ", Meiryo, sans-serif, Verdana;
        font-size: 13px;
        line-height: 1.4;
        white-space: nowrap;
}
ul.tagcloud li{
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 100%;
}
ul.tagcloud li a{
        text-decoration: none;
        white-space: nowrap; 
}
li.tcmax a{
        /* カウント20以上のとき（最大） */
        font-size: 24px;
        font-weight: bold;
        color: #424242;
}
li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
        /* カウント19～15のとき */
        font-size: 22px;
        color: #5e5e5e;
}
li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
        /* カウント14～10のとき */
        font-size: 20px;
        color: #7a7a7a;
}
li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
        /* カウント9～5のとき */
        font-size: 18px;
        font-weight: normal;
        color: #979797;
}
li.tc4 a, li.tc3 a{
        /* カウント4・3のとき */
        font-size: 16px;
        font-weight: normal;
        color: #b3b3b3;
}
li.tc2 a, li.tc1 a{
        /* カウント2・1のとき（最小） */
        font-size: 14px;
        font-weight: normal;
        color: #cfcfcf;
}
ul.tagcloud li a:hover{
        color: #000;
}

タグクラウドの設置手順

以下にタグクラウドの設置手順を記載します。

まず最初にFC2ブログの管理画面にログインします。

ログインしたら画面左の[設定]メニューの[プラグインの設定]をクリックします。

画面上の[プラグインの設定]からPC用の[公式プラグイン追加]をクリックします。

公式プラグインの一覧の[拡張プラグイン]から[フリーエリア]をクリックします。

[フリーエリアの編集]画面が表示されるので、[フリーエリア内容の変更]ボックスに"使用するHTML、CSS"に記載したコードをそのまま貼り付けます。

その他の設定は以下を参考に自分のブログに合わせた内容に変更してください。

変更が完了したら[設定]ボタンをクリックして適用します。

ブログを確認してタグクラウドがきちんと表示されているか確認してください。

以上でタグクラウドの設置手順は終了です。

変更点、カスタマイズポイントなど

上記のタグクラウドを設置する際に元のHTML、CSSから変更してあるところやその他ポイントなどについて以下に記載します。

変更点

基のコードから変更した点を以下に記載します。

タグの文字列の途中での折り返しを修正

タグクラウドに表示されたタグ文字列がサイドバーの幅の都合でタグ文字列の途中で折り返されないように"white-space: nowrap;"をCSSに追加しました。

追加したのは以下の30行目です。

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

タグの文字列のフォントサイズ

タグの数によってフォントサイズを変えていますが、その際のフォントサイズの指定を%からpxに変更しています。

基になっているコードではフォントサイズは%指定となっています。

本来は%指定の方がいいとは思いますが、%で指定するかpxで指定するかは自分のブログに合わせて任意で決めてください。

タグの文字列のフォントの種類指定

使用するフォントの種類指定を自分のブログのフォントの種類に合わせて変更しています。

変更したい場合は、15行目の"font-family"の指定を変更してください。

ul.tagcloud{  
        margin: 0;  
        padding: 0.5em 10px;  
        line-height: 1;  
        font-family: "メイリオ", Meiryo, sans-serif, Verdana;  
        font-size: 13px;  
        line-height: 1.4;  
        white-space: nowrap;  
}  

カスタマイズポイント

自分のブログに合わせてカスタマイズするときのポイントについて以下に記載します。

タグ数のレベル分け

デフォルトではタグ数によって6段階になっていますが、CSSを変更すればレベル分けをもっと細かくしたり、大雑把にしたりすることができます。

変更する場合は、CSSの"li.tcタグ数 a"となっている部分を変更します。

例えば、タグ数を1～5までで指定したスタイルにしたい場合は以下のようになります。

li.tc5 a,li.tc4 a,li.tc3 a,li.tc2 a, li.tc1 a{  
        /* カウント5～1のとき（最小） */  
        font-size: 14px;  
        font-weight: normal;  
        color: #cfcfcf !important;  
}  

タグ数の各レベルごとの文字色

文字色については、CSSの"color"に指定されているカラーコードを変更すれば良いです。

もしカラーコードを指定しても反映されない場合は、ブログテンプレートのCSSでサイドバー部分のCSSが適用されていることが原因と思われますので、カラーコードの後ろに"!important"を付けてください。

例.70行名に!importantを付加する。

li.tc2 a, li.tc1 a{  
        /* カウント2・1のとき（最小） */  
        font-size: 14px;  
        font-weight: normal;  
        color: #cfcfcf !important;  
}  

スクリプトを使用しないタグクラウドの設置まとめ

スクリプトが使用されているタグクラウドの共有プラグインの使用は簡単で便利ですが、トラブルが起きた場合原因等を調べるのが一苦労です。

特にスクリプトに対する知識がなければなおさらです。

その点このプラグインは、HTMLとCSSだけで構成されているのでカスタマイズも非常に簡単な上、タグの順序がランダムだったりデフォルトで6段階でスタイルを変更できる点などそこそこオシャレなタグクラウドです。

共有プラグインでうまくいかない人やとりあえずタグクラウドを設置できればいいやくらいの方にはとてもおすすめです。