FC2ブログのタグクラウドをアルファベット順に変更する

今回は、ブログのサイドバーに設置している公式プラグインのタグクラウドを改良します。

タグとは、その記事や画像に貼り付けるキーワードのようなものです。記事に設定したカテゴリーに関係なくキーワードに関連付けることができます。このタグの集まりがタグクラウドです。
このタグクラウドのタグは、使用される頻度によってフォントサイズや色が変化し、使用される頻度が多ければ多いほどタグの大きさが大きくなり、少なければ小さい状態で表示されます。

このタグクラウドのタグをサブカテゴリ的な意味合いでくらげは使用しています。なので、使用頻度によるタグの大きさを変える必要はありません。
順番も使用順にすると見にくいため、アルファベット順にして見た目をわかりやすく整理することにしました。

では、順を追って説明していきます。

公式プラグインでタグクラウドを設置

まずは、公式プラグインで”フリーエリア”を、タグクラウドを設置したい場所に設置します。
Plugin.png

アルファベット・あいうえお順に変更

FC2のタグクラウドは、使用順、ランダム、最近使用した順にはそれぞれ変更できますが、あいうえお順、アルファベット順に変えることができません。

そこでグーグル先生にお伺いを立てたところ、この記事を見つけました。
参照:アルファベット順・アイウエオ順タグクラウド(FC2ブログ) | スタンダード・デザインラボ

ということで、この教え通りに設定を加えていきます。

以下のコードをコピーして、フリーエリアの”フリーエリア内容の変更”の部分に貼り付けます。

<script type="text/javascript">
<!--
var TagAry=0;
var TagWrite="";
TagSort=new Array();
//-->
</script>
<div id="tagsort" class="plugin-tag">
	<!--ctag-->
<script type="text/javascript">
<!--
TagSort[TagAry]=new Array("<%ctag_name>","<a href='<%ctag_url>'><%ctag_name>   ");
TagAry=TagAry+1;
//-->
</script>
<noscript>
<a href='<%ctag_url>'><%ctag_name></a>   
</noscript>
	<!--/ctag-->
</div>
<script type="text/javascript">
<!--
TagSort=TagSort.sort();
for (itag=0;itag</script>

ただのリストではなく、タグクラウドとして表示順に大きさを変えたい場合は、上記のブログのように変更してください。
アルファベット順だけはできたのですが、あいうえお順にはなりませんでした。ですが、これだけでもだいぶスッキリしています。

左:Before 右:After

Tag_Before.png
Tug_After.png


CSSを変更する

デザインは、下記のブログを参照しました。
参照:タグクラウドをちょっとおとなしめでシンプルに変更してみた。 | 極楽ひだまり保育園

#tagsort.plugin-tag {
padding:2px 0;
margin:2px 0;
text-align : justify;
font-size: 87%;
line-height : 1.5em;
}
#tagsort.plugin-tag a:hover{
text-decoration:none;
background:#d5e7ed;
font-size:150% !important;
border-radius:5px;
color:#00afec;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

カーソルを合わせると色が変わり、ふわっと大きくなるようにしています。
これで完成ー!

3 Comments

cinema-days 映画な日々

ユーザータグ一覧 (2)

これまでにもユーザータグ一覧を設けていましたが、
更新が面倒なので、2012/04/23以降、更新していませんでした。
今回新たにユーザータグ一覧を追加しました。
 [特徴]
  字種別順(数字-アルファベット-ひらがな-カタカナ-漢字)
  表示件数1000件
  □ 従来のユーザータグ一覧(上位50件表示) ⇒ こちら
    ユーザータグの一覧を1つの記事として表…

返信する
Hiro

SECRET: 0
PASS: 2952e1846b4ea765dfd0fdfcb7e21097
こちらの記事を参考にユーザータグ一覧を作成してみました。

返信する
そらいろくらげ

SECRET: 0
PASS: 74be16979710d4c4e7c6647856088456
Hiroさん
いらっしゃいませー。弊ブログの記事を参照していただき、ありがとうございます。お役に立てて嬉しいです。

返信する

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください