ブログカスタマイズの雑談BLOG

しばらくSeesaaブログを更新しておらず、久しぶりにログインしてみたら、なんだか色々と変更になっていてビックリしました。
管理画面も私が記事を書いていた時とは様変わりしていますね。なんだかスタイリッシュになっていて驚きました。
一番驚いたのは、「タグクラウド」が「ラベルリスト」と呼ばれていることですね。
「タグクラウド」って名前じゃなかったの！？
いつの間に「ラベルリスト」って呼ぶようになっちゃったの？
（まあ、私がずっとログインしてないのが悪いです、ハイ）


どうやらSeesaaブログでは、いわゆる「タグ」のことを「ラベル」と表記するようになっているようですね。
今更Seesaaブログ関連の記事を一つずつ変更するのは面倒なので、このブログでは「タグ」も「ラベル」も同じものを指している、とご理解くださいｗ



ということで、今回はSeesaaブログのサイドバーの「タグクラウド」つまり現在の呼び名では「ラベルリスト」を編集したいと思います。



ちなみに、私がこれまで書いてきたカスタマイズ内容では、Seesaaブログのサイドバーのタグクラウド（ラベルリスト）は、いわゆる「プルダウンメニュー」表示になっています。
こんな感じです。


現時点のテンプレート



私が知らない間に「タグクラウド」が「ラベルリスト」になってしまいましたが、コード記述内容やclass名などが変更になったわけではないようです。
なので一応、私がやってきた「タグクラウド（ラベルリスト）」に関するカスタマイズの記事を紹介しておきます。「プルダウンメニュー」で表示したい場合などご利用ください。







今回久しぶりにSeesaaブログに関する記事を書いている理由は、コメントにて質問を受けたからです。
サイドバーの「タグクラウド（ラベルリスト）」にはタグ（ラベル）が表示されますが、この表示順番を「記事件数が多い順」にソートして表示させたい、とのコメントでした。



私はタグクラウド（ラベルリスト）のタグ（ラベル）には記事件数を表示するように設定しています。上記画像内の「(3)」のような数字部分が該当タグの記事件数です。
タグの表示の順番は件数とは無関係です。タグの登録順なのか五十音順なのかは不明ですが、コメントをくださった方はこの並び順を「記事件数が多いタグ（ラベル）から表示したい」とのことでした。
ですので今回は、Seesaaブログのサイドバーの「タグクラウド（ラベルリスト）を記事件数が多いタグから順番に表示する（記事数が多い順にソートする）」方法を書きたいと思います。



記事件数が多い順番で表示させることは、けっこう意味があることだと思います。
Seesaaブログのタグクラウド（ラベルリスト）は表示件数を指定できるので、例えばタグ（ラベル）を「タグクラウド（ラベルリスト）」としてプルダウンメニューで全部表示するようにして、別に「注目のタグ（ラベル）」のようにして10件とか20件とか、自分が力を入れて書いた記事をアピールすることができるわけです。
「タグ（ラベル）の件数が多い＝ブログ管理者がそのタグ関連の記事をたくさん書いた」ということなので、ブログの方向性などを閲覧者に把握してもらえるきっかけになると思います。



できれば「プルダウンメニュー」形式で「記事件数が多い順」にタグ（ラベル）を表示させたかったのですが、私のような素人には無理なお話でした。スクリプトの意味がわからないしｗ
でもまあ、「横並びのボタンのような表示」や「縦並びのリスト表示」にはできたので、これで勘弁していただけると助かります。


編集後のイメージ




今回久しぶりに記事を書いたら長くなってしまったので、「1」と「2」に分けて掲載します。
「1」（この記事）では、サイドバーのタグクラウド（ラベルリスト）に並び替えのソースコードを追加するところまでを説明します。
「2」の記事では、件数表示やフォントサイズ、改行部分を調整してからCSSでスタイルを指定します。
「2」の記事はこちらです。→＜■サイドバー「タグクラウド（ラベルリスト）」を記事数が多い順にソートして表示する（2）＞

参考サイト様のご紹介・準備すること

今回のカスタマイズは、こちらのサイト様の記事を参考にしています。




私は以前から、この「菊池さんの工作室」様の記述を参考にさせていただいているんですが、今回コメントをくださった方が紹介されていたサイト様でも同じ記事が掲載されていました。おそらく同じ方が管理されているサイトだと思われます。


現在も更新が続いているのは下記の新しいサイトの方のようです。
今回のカスタマイズで必要なコードが記載されていますので、下記のサイト様の記事をご確認ください。





この記事では「ブログ工房」様のコード記述を利用し、少しだけ変更します。
「ブログ工房」様の上記記事の中の、項目「記事数の多い順に並べ替え（ソート）」に記述されているソースコードをコピーして、ご自分のパソコンの「メモ帳」やテキストエディタに貼り付けておいてください。タグ（ラベル）の並べ替えのために必要なJavascriptコードです。



あと、SeesaaブログのPC管理画面には「デザイン一覧」「CSS/HTML編集」「コンテンツ」の3つの画面がありますが、「コンテンツ」画面であらかじめご自分のブログに「ラベルリスト」パーツを追加しておいてください。
Seesaaブログの管理画面で「ラベルリスト」パーツを追加して保存していることを前提に話を進めます。
追加しただけで現時点では何も編集していない状態で大丈夫です。まっさらの状態を作っておいてください。


ちなみに面倒なので、以降は「タグクラウド（ラベルリスト）」と書かずに「ラベルリスト」で統一します。「タグ」も「ラベル」で表記します。ご了承くださいませ。

サイドバーのラベルリストを記事件数が多い順に表示する

サイドバーのラベルリストを、記事件数が多い順番で表示させます。
とりあえずわかりやすくするために、新しく追加したラベルリストのタイトルを「ラベルリスト【そのまま】」という名前にします。



私は「ラベルリスト」に対するカスタマイズを、最終的には「プルダウンメニュー形式」で設定していたので、今回新しく「ラベルリスト」パーツを追加するとプルダウンメニューで表示されます。（プルダウンメニュー形式にしていない場合は、ご自分の設定している形式で表示されます）





この「ラベルリスト【そのまま】」では、記事数が一番多いラベルは「全記事(21)」です。つまり、「全記事」というラベルを付けた記事が21件ある、ということです。
しかし、新しく「ラベルリスト」パーツを追加しただけでは、最初に表示されるラベルはこの画像のように「test(11)」です。件数は無視した順番で表示されます。
これを、件数が多い順番で表示させたいわけですね。
では、ラベルリストを編集しましょう。

「ラベルリスト」パーツにソースコードを追加する

Seesaaブログ管理画面の「コンテンツ」画面を開き、「ラベルリスト」の横の歯車マークをクリックします。





「ラベルリスト【そのまま】」のウインドウが開きます。
右上にある「コンテンツHTML編集」をクリックします。






HTML編集画面が開きます。
項目「HTML」の中のコードを全部コピーして、パソコンの「メモ帳」や他のテキストエディタに貼り付けてください。
直接この画面で編集するよりも、テキストエディタで編集した方が楽だと思います。
コピーしたコードに、上記で紹介していた「ブログ工房」様のソースコードを追加することになります。






HTMLコードを「メモ帳」などのテキストエディタに貼り付けたら、下記部分（青色に反転している部分）のコードを編集します。


＜元コード＞





この「</script>」の前で改行して、1行空けます。空白の行を作っておいた方がわかりやすいと思います。






この空白部分に、「ブログ工房」様のソースコードを追加してください。







さて、追加したコードの下の方に、このような表記があります。


＜追加後（抜き出した記述）＞


この「<% content.id %>」を「<% parts.id %>」に変更します。


＜編集後＞





以上でコード編集は一応、終わりです。
「メモ帳」やテキストエディタに作成したコード記述を全部をコピーして、「ラベルリスト【そのまま】」のウインドウの項目「HTML」に貼り付けます。（戻す、ということですね）
コードを貼り付けたら「保存」ボタンをクリックしてください。





「設定を完了しました」という表示が左上に出ますので、画面の「保存する」ボタンをクリックして、ウインドウを閉じてください。
ちなみに項目「表示件数」はデフォルトが10件になっていますが、300件まで変更可能です。好きなように設定してください。





Seesaaブログ「管理画面」の「コンテンツ」画面に戻るので、「保存」ボタンをクリックします。





これで、サイドバーの「ラベルリスト」を記事件数が多い順に表示することができます。



では、ここまでの状態を確認してみましょう。
こんな感じになっております。





‥‥まあ、うん。一応、記事件数順で表示されてるけど、なんだかねぇ（´・ω・｀）
ラベルの文字の大きさもバラバラですね。（Seesaaブログのデフォルト機能です）
ラベルとラベルの間の余白も半角しかないから、ちょっとくっつきすぎな感じです。


これじゃあんまりなので、スタイルを変更したいと思います。
あと、「ラベル名 (21)」のように、各ラベルの後ろに件数を表示させたいと思います。
やり方は、次の記事で説明します。




次の記事の紹介

次の記事では、サイドバーのラベルリストのスタイルを調整します。
「ラベルリスト」パーツの「コンテンツHTML編集」を少しだけ編集し、「CSS/HTML編集」でCSSにスタイルを追加します。