Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】タグ一覧ページ「タグクラウド」に記…

【Seesaaブログ新デザインシステム】タグ一覧ページ「タグクラウド」に記事数を表示、単語の途中で改行しないようにする

Seesaaブログのタグ一覧ページ「タグクラウド」を編集
■Seesaaブログのタグ一覧ページの「タグクラウド」を編集
■「タグクラウド」と「タグクラウドのタグ」の説明
■タグに記事数(件数)を表示させる
■マウスを乗せた時の表示を変更する
■単語の途中で改行しないようにする  

以前の記事<■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする>では、サイドバーの「タグクラウド」の「タグ」表記を変更しました。


「タグクラウド」はサイドバーにだけ表示されるものではありません。
タグをクリックして開いたページ、つまり「タグ一覧ページ」にも「タグクラウド」が表示されます。
今回は「タグ一覧ページのタグクラウドのタグ(単語)」の表記を編集したいと思います。



ちょっと混乱するかもしれないので先に書いておきますが、今回はCSSを編集して「タグクラウド」のスタイルを変更するわけではありません。
「タグクラウドのタグ(単語)」のスタイルを変更するわけでもありません。
スタイル、つまり「タグを線で囲む」とか「タグに背景色を付ける」とか、そういったことを設定するつもりはないのです。ただ単純に、タグ(単語)部分に記事の件数を表示させたり、件数の文字サイズを変更したり、単語の途中で改行されないようにしたいのです。
なので「HTML」しか編集しません



まあ、「タグ一覧ページのタグクラウドのタグ」のスタイルを変更したい場合もあるかもしれないので軽く触れておきますが、この記事の主題はあくまでも「タグの表記の変更」ですので、混乱しないようにお願いします。





タグ一覧ページのタグクラウドの「タグ」のスタイルを変更する場合


もしも「タグ一覧ページのタグクラウドのタグ」のスタイルを変更したいならば、指定するclassに気を付けてください。



このブログでは以前の記事<■サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする>で、「タグ一覧ページのタグクラウド」について少しだけ触れました。
『タグ一覧ページの「タグクラウド」には、サイドバーの「タグクラウド」のタグ(単語)に対するclassと同じ「_tag」が使われているから、class「_tag」だけにスタイルを設定すると、タグ一覧ページの「タグクラウド」にも同じスタイルが使われることになる』と説明していたんですが、まあ、その通りです。



以前の記事では、class「_tag」だけにスタイルを記述すると、サイドバーの「タグクラウド」も「タグ一覧ページのタグクラウド」も、「タグ(単語)」のスタイルがどちらも同じになってしまうので、サイドバーの「タグクラウド」にだけ指示を出せるように、「.module--tag-cloud ._tag」というclass名でCSSに記述しました。



「タグ」のスタイルについて


ここまでの説明で混乱しちゃうかもしれないので、改めて書いておきます。
「タグクラウドのスタイル」と「タグクラウドのタグのスタイル」は全く別物です。


タグクラウドのスタイル」は、タグクラウドそのものに対するスタイルです。タグクラウドの枠線だとか、背景色だとか、そういうものを編集したい時に「タグクラウド」に対して指示を出します。


タグクラウドのタグのスタイル」は、「タグ」つまり「文字(単語)」に対するスタイルです。
太字で表記するとか、タグ1つ1つを枠線で囲んでボタンみたいに表示するとか、そういうスタイルを指示したい時に指定します。
class「_tag」は、「タグ」に対するclassです。
これが「サイドバーのタグクラウドのタグ」と「タグ一覧ページのタグクラウドのタグ」で共通のclass名なので、それぞれ「どこの」タグのことなのか、指定してあげなければいけないという話です。



タグ一覧ページのタグクラウドの「タグ」


「タグ一覧ページのタグクラウド」に指示を出すためには、class「tag-cloud」を使います。
このブログでは以前の記事<■タグ一覧ページのタグクラウドを編集する>で、「タグ一覧ページのタグクラウド」のスタイルを変更しました。
枠線を付けて、少し濃い目の背景色をつけました。


「タグ一覧ページのタグクラウドのタグ」のスタイルを変更する場合は、「どこのタグのことなのか」を指定しなければいけませんから、class「tag-cloud」を使わなければいけません。
CSSには「.tag-cloud ._tag」というclass名で指示を出します。


説明だけではわかりにくいでしょうから、「仮に」ということで、例示しておきます。


<CSSに記述(例)>
.tag-cloud ._tag {
font-weight: bold; ←太字
border: 1px solid #ff0000; ←赤色の枠線
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}


<実際のページ(例)>
タグクラウドのスタイルを変更した場合


タグクラウドの中の「タグ」が太字で表記され、1つずつ赤線で囲まれています。
「.tag-cloud ._tag」と指定してCSSに記述すると、このように「タグ(単語)」に対してスタイルを設定することができます。


でも、私はそれをやらないよ!と言いたいんですけど、なんでこんなに詳しく説明しちゃったんでしょうかね?(笑)
必要ない説明でしたねw



タグ一覧ページのタグクラウドのタグの表記を変更


では、そろそろ本題に入りたいと思います。
今回は「タグ一覧ページのタグクラウドのタグ(単語)」の表記を編集します。
まずは現時点での「タグ一覧ページのタグクラウド」です。
デモブログではタグの登録数が少ないためわかりにくいかもしれませんので、あくまでも「仮に」ということで準備した画像で説明します。


現時点のテンプレート
現時点のタグクラウド


サイドバーのタグクラウドを編集した時は、文字サイズ(フォントサイズ)をできるだけ同じように表示するようにパラメーターを設定したりしましたが、「タグ一覧ページのタグクラウド」ではフォントサイズは変更しません。
私は意外と、このデカイ文字が好きなのですw
好きなんだけど、サイドバーにあると邪魔だったので、サイズを変更しちゃっただけです。



画像を見ると、タグ(単語)が全体的にくっついているので、タグとタグの間をわかりやすく切りたいと思います。
あ、記事の件数も表示させましょう。
今回の作業は、以前の記事<■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする>とほぼ同じですので、簡単だと思います。



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


タグ一覧ページのタグクラウドに、記事の件数を表示させるためにHTMLを編集します。
管理画面の「HTML編集」画面で「tag-cloud」を検索すると1ヶ所がヒットしますので、この部分を編集します。



下記画像の797行目にあるコード記述が「タグ文字」の表示設定部分です。
タグクラウドのタグ(単語)を編集したい場合は、この部分をいじります。
(私はこれまでのカスタマイズで「タグクラウド」の位置を変更しています。この画像の行数をそのまま信じることはやめて、きちんと「tag-cloud」で検索してください)


現時点のタグクラウドのコード


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


【注意】
上記画像(デフォルトのHTML画像)の赤い矢印部分には、既に「<% count %>」タグが存在しますが、これはリンク部分にマウスを乗せた時に表示される言葉(タグ)に付いている記事件数であり、マウスをリンク部分に乗せなければ表示されないものです。私は、マウスをタグのリンク部分に乗せなくても記事件数を表示させたいので、下記のように編集するわけです。
もちろん、タグのリンク部分にマウスを乗せた時の表示も変更します。この記事の下部で説明しています。



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


<元コード>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%>/<% count -%>"><% tag.word -%></a> <% /loop -%>


<編集後>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%>/<% count -%>"><% tag.word -%>(<% count %>)</a> <% /loop -%>




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


編集後のタグクラウドのコード

編集後のタグクラウドの表示


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



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


タグクラウドはタグの登録記事数に応じて文字の大きさが変更されるので、記事の件数を表示させると、その数字部分のフォントサイズもタグと同じフォントサイズになります。(件数部分までリンク設定しているのでこのような表示になります)



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


【注意】
タグクラウドのタグ(単語)のフォントサイズはSeesaaの内部で計算して指定しているらしく、例えば最小フォントサイズ「11px」を変更するためには「JavaScript(ジャバスクリプト)」を編集しなければいけません。できないことは無いけれども非常に面倒です。私みたいな素人は触らない方が賢明だと判断しましたので、Seesaaブログが指定しているフォントサイズは変更しないことにします。どうしても変更したい場合は、ご自分でお調べください。
ちなみに、以前の記事<■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする>では、サイドバーのタグクラウドのタグのフォントサイズについて、パラメーターを追加して、できるだけ同じフォントサイズで表示するようにしました。
でも、この「タグ一覧ページのタグクラウド」ではパラメーターを追加する場所が私にはわかりません。サイドバーのコードと入れ替えたりして色々と試してみましたが、考えるのに疲れました。
なので、「タグ一覧ページのタグクラウド」のタグのフォントサイズは、Seesaaブログさんの指示に従うことにします。つーか、せっかく設定されているし嫌いじゃないので、大きな文字や小さな文字で表示させたいと思います。



ということで、Seesaaブログさんの「JavaScript」の記述によれば、最小フォントは「11px」です。
同じように記事件数のフォントサイズも「11px」にしたいと思います。
「(<% count %>)」を「<span style="font-size:11px;">」「</span>」で挟みます。


<元コード(上記で既に編集済みのコード)>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%>/<% count -%>"><% tag.word -%>(<% count %>)</a> <% /loop -%>


<編集後>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%>/<% count -%>"><% tag.word -%><span style="font-size:11px;">(<% count %>)</span></a> <% /loop -%>




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


編集後のタグクラウド部分のコード

編集後のタグクラウドの表示


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



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


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


タグにマウスを乗せた時の表示


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



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


<元コード(上記で既に編集済みのコード)>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%>/<% count -%>"><% tag.word -%><span style="font-size:11px;">(<% count %>)</span></a> <% /loop -%>


このコード記述の「title="<% tag.word -%>/<% count -%>"」部分が、タグ文字にマウスを乗せた時の表示になります。
「記事タイトル (10件)」と表示させたいので、「title="<% tag.word -%> (<% count -%>件)"」と記述します。


<編集後>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%> (<% count -%>件)"><% tag.word -%><span style="font-size:11px;">(<% count %>)</span></a> <% /loop -%>




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


編集後のタグクラウド部分のコード

実際のタグクラウド部分の表示


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



タグクラウドのタグを、単語の途中で改行しないようにする


タグクラウドのタグを、単語の途中で改行しないように設定します。


現時点のタグクラウド


この画像では、例えばタグ「佐里温泉」は入りきらなかったので改行されています。
このように単語の途中で改行されないようにするためには、コード記述に「word-break:keep-all;」を追加します。



「word-break」プロパティは、文の改行のやり方について指定するプロパティです。
「word-break:keep-all;」は、言語に関係なく単語の途中では改行せず、単語の切れ目で改行させるコードです。
デフォルトのテンプレートには何も記述されていないので、追加します。



今まで見てきたコード記述の1行上に、「<div id="tag_cloud">」というタグがあります。


コードを追加する位置


このタグに「word-break:keep-all;」を追加します。
style="word-break:keep-all;"」という記述にして、「id="tag_cloud"」の後ろに「半角スペース」を入れてから追加します。


<編集後>
<div id="tag_cloud" style="word-break:keep-all;">




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


コード追加後のHTML

実際のタグ一覧ページのタグクラウド


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



タグクラウドのタグとタグの間に「/」を入れる


タグとタグの間の余白が狭いような気がします。
というか、いくら余白をプラスしても、なんだかくっついて見えてしまうんですよね。
この際「/」を記述して、タグとタグをハッキリと区別させたいと思います。
ちなみに、下記の方法を使うと、一番最後のタグの後ろにも「/」が付いてしまいますので、それがイヤな場合はこのカスタマイズはやらないでください。



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


<元コード(上記で既に編集済みのコード)>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%> (<% count -%>件)"><% tag.word -%><span style="font-size:11px;">(<% count %>)</span></a> <% /loop -%>



このコード記述の「</a>」と「<% /loop -%>」の間に「/」を追加します。
「/」の前後に「半角スペース」を入れた方が、見栄えがいいかもしれません。


<編集後>
<% loop:list_tags -%><a href="<% blog.tag_url(tag) -%>" class="_tag" title="<% tag.word -%> (<% count -%>件)"><% tag.word -%><span style="font-size:11px;">(<% count %>)</span>;</a> / <% /loop -%>




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


編集後のタグクラウド部分のコード

編集後のタグ一覧ページ下部のタグクラウド


うん、こんな感じで大丈夫でしょうね。




次の記事の紹介

次の記事では、タグ一覧ページの記事を最初からたくさん(12件)表示する方法を説明します。


【Seesaaブログ新デザインシステム】タグ一覧ページの記事数を初めから最大件数(12件)表示する
Seesaaブログでは「タグ」を登録することができます。「タグ」は記事作成画面で「タグの追加」をすることで登録します。記事に登録した「タグ」は、記事ページの記事タイトルの下部分に文字リンクで表示されます。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。