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

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」のサイドバーの「タグクラウド」を編集します。



Seesaaブログのサイドバーのタグクラウドは、タグの登録記事数に応じて文字の大きさが変更されるように設定されています。これがちょっとデカすぎるような気がしますので、どうにかしたいと思いました。
あとはタグの後ろに記事の件数を表示させたり、単語の途中で改行しないようにしたり、細かい部分を編集したいと思います。



現時点のサイドバー「タグクラウド」



この画像は現時点のサイドバーの「タグクラウド」ですが、タグ登録件数が少ないので文字の大きさの違いについてはよくわからないかもしれません。
まあ、最後にどんな風に変わったのか画像を掲載したいと思いますので、とりあえずはこの状態から編集していきます。
順番にカスタマイズしていこうと思います。



ちなみに今回のカスタマイズでは、こちらのサイト様の記事を参考にしました。




参考にしたというか、ほとんどそのまま使わせていただきました。ありがとうございました。
わけのわからない私の記事を読むよりは、参考サイト様のページをご覧になった方がわかりやすいと思います。



あと、この記事で編集した内容は、「タグ一覧ページのタグクラウドのタグ」に対する設定とほとんど同じ内容になります。
サイドバーだけではなくタグ一覧ページのタグクラウドも同じように設定したい場合は、こちらの記事をお読みください。

タグクラウドに記事件数を表示する

サイドバーのタグクラウドに、記事の件数を表示させます。
タグが登録された記事が何件ぐらいあるのか閲覧者にわかった方がいいかな？と思ったので、まあ、簡単に編集できるし、やってみたいと思います。

ちなみにこのやり方は、「タグ一覧ページ」のタグクラウド部分にも使えます。→＜■タグ一覧ページ「タグクラウド」に記事数を表示、単語の途中で改行しないようにする＞



コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面で「<% if:parts_name == 'tag_cloud' # START parts -%>」を探します。たぶん、360行目にあります。


367行目にあるコード記述が、タグ（単語）の表示設定部分です。
タグクラウドのタグ（単語）を編集したい場合は、この部分をいじります。





記事の件数を表示させるためのタグは「<% count %>」です。
「<% count %>」のままでは、ただ数字が表示されるだけなので、このタグを「( )」で挟んであげて「(10)」のように件数を表示させたいと思います。
なので、追加するタグは「(<% count %>)」にします。






タグ（単語）のすぐ後ろに記事の件数を表示させたいので、コンテンツHTMLのタグ（単語）部分の後ろに「(<% count %>)」を追加します。
細かく言うと、追加する場所は「<% tag.word | html -%>」と「</a>」の間、です。


＜元コード＞


＜編集後＞

コード編集後のコンテンツHTMLと実際のページ

記事の件数を表示することができました。
でも、タグの文字サイズと同じサイズで件数が表示されているので、タグの文字サイズが大きいと件数まで大きくなってしまいますね。
ちょっと邪魔なような気もします。

タグクラウドの件数のフォントサイズを変更する

タグクラウドはタグの登録記事数に応じて文字サイズ（フォントサイズ）が変更されます。
記事数が多いとタグの文字サイズも大きくなり、記事数が少ないとタグのサイズも小さくなるわけです。（というか、記事件数部分までリンク設定しているからこういうことになるんですけどね）


タグ（単語）と記事数（件数）が同じように大きくなると邪魔なので、件数部分のフォントサイズを一定のサイズに指定して、少し小さく表示したいと思います。



先ほど「(<% count %>)」を追加して件数を表示するようにしたので、この「(<% count %>)」に文字サイズを設定します。
Seesaaブログの設定により、タグクラウドのタグ（単語）の最小フォントは「11px」です。
このサイズは変更することができません。






最小フォントは「11px」なので、件数のフォントサイズも「11px」にしたいと思います。
「(<% count %>)」を「<span style="font-size:11px;">」と「</span>」で挟みます。


＜元コード（上記で既に編集済みのコード）＞


＜編集後＞

コード編集後のコンテンツHTMLと実際のページ

記事件数のフォントサイズが一定になりました。
タグのサイズがどんなに大きくなっても、件数のフォントサイズは「11px」で表示されます。

タグにマウスを乗せた時の表示を変更する

タグにマウスを乗せた時の表示とは、コレです。




こんなもの、別にどんな表記でもかまわないかもしれません。
でも、もしもタグに件数を表示させなかった場合、そのタグに何件の記事が登録されているのか誰にもわかりません。マウスをタグに乗せた時に件数が表示されるようにデフォルトで設定されているのですから、もう少しわかりやすい表示にした方がいいと思います。（単純に、私がデフォルトの表記を気に入っていないというだけの話でもありますｗ）



編集するのは、先ほど編集したコンテンツHTMLの記述と同じ箇所です。


＜元コード（上記で既に編集済みのコード）＞


このコード記述の「title="<% tag.word | html -%>/<% count -%>"」部分が、タグにマウスを乗せた時の表示になります。（「title」部分なので正確には「マウスを乗せた時の動き」の話ではありませんが、面倒なので詳しい説明は割愛します）



「記事タイトル (10件)」みたいな感じで表示させたいので、「title="<% tag.word | html -%> (<% count -%>件)"」と記述します。


＜編集後＞

コード編集後のコンテンツHTMLと実際のページ

タグ部分にマウスを乗せると、このように案内が表示されます。

タグを単語の途中で改行しないようにする

タグクラウドのタグを、単語の途中で改行しないように設定します。
何について言っているのかというと、コレです。




例えば「画像にタグ」というタグは、1行に入りきれなかったので改行されています。これをやめたいのです。
タグ文字が横幅に入りきらない場合は改行することなく、タグ文字そのものを次の行に表示させるようにします。
今まで見てきたコード記述の1行上に、下記のコードがあると思います。


＜元コード＞





このコード記述のうち後半部分「style="word-break:break-all;"」を変更します。



「word-break」プロパティは、改行のやり方について指定するプロパティで、元々のテンプレートに記述されている「word-break:break-all;」は、言語に関係なく表示範囲に合わせて改行するという指示になります。なので、単語の途中で改行されてしまうわけです。
この「word-break」プロパティを「word-break:keep-all;」に変更することで、単語の途中で改行しなくなります。「word-break:keep-all;」は、言語に関係なく単語の途中では改行せず、単語の切れ目で改行させます。



該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


＜編集後＞

コード編集後のコンテンツHTMLと実際のページ

元々1行目にあった「画像にタグ」というタグ（単語）が、途中で改行されることなく2行目に表示されています。単語の途中で改行しないように設定できました。

タグのフォントサイズを変更する

上記でちらっと書いていますが、Seesaaブログのタグクラウドのタグ（単語）の文字サイズ（フォントサイズ）は変更することができません。
記事件数が多ければ多いほど、タグの文字サイズは大きくなります。


タグクラウド部分は「JavaScript」で設定されているので、本気で変更したければ、自分で「JavaScript」の記述を作ってリンク先を入れ替えなければいけません。
そんな面倒なことはやりたくありませんので、ここでは「できるだけ同じような大きさの文字を表示する」ことを目標に編集します。


タグクラウドのフォントサイズについては、上記で紹介している参考サイト様のページをお読みいただければわかりやすいと思います。
フォントサイズ計算に係るパラメーターを指定できるそうです。
（もうこの時点で、私には何を言っているのか意味がわかりませんｗ）



コンテンツHTMLのタグクラウド部分に、下記のコード記述があります。


＜元コード＞





この部分に、パラメーターを追加するそうです。
参考サイト様は「,5,10」を追加しておられますが、私は「,1,12」にしました。


＜編集後＞


●1つ目の数字（レベル）は、文字サイズを計算する際のリミッターのようなものらしく、値が小さいほど最大文字が小さくなるそうです。（数字を指定しないと「15」が設定される）

●2つ目の数字（最小文字サイズ）は、最小の文字サイズ（px）を指定する部分です。この文字サイズ以下にはならないそうで、指定しないと「11px」になるそうです。

●私自身は「レベル」を「1」に、「最小文字サイズ」を「12」にしました。

●上記で件数のフォントサイズを「11px」にしていますので、タグ文字が12pxで件数が11pxになって、丁度いいのではないかと思いました。

●「レベル」を「1」にしたのは、あまり大きい文字サイズにしたくなかったからです。
次の記事＜■サイドバー「タグクラウド」のタグ（単語）を線で囲んでボタンにする＞でこのタグクラウドのタグを線で囲みますので、このような数値にしました。

コード編集後のコンテンツHTMLと実際のページ

この画像ではタグのフォントサイズがどのように変更されたのかよくわからないので、「仮」という意味で、比較画像を掲載しておきます。


画像のキャプチャに失敗したので別の画像をキャプチャしたら、リンク部分に下線入りのタグクラウドをキャプチャしてしまいました。（ここまでのカスタマイズで、私はサイドバーのリンク部分の下線をはずしています）
まあ、私が言いたいことは表現できているので、そのまま使いますね。
こんな感じで、編集前と編集後に違いが出てきます。イメージ、わかるでしょう？


編集前のイメージ



編集後のイメージ





次の記事の紹介

このままの表示でも何の問題もありませんが、タグクラウドが少し寂しい気もしますので、次の記事ではタグを1つずつ線で囲んで、ボタンのように表示させたいと思います。