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

Seesaaブログのサイドバー「ラベルリスト」のラベル並び替えについて、記事を書いていたらあまりにも長くなったので、「1」と「2」に分けて掲載することにします。
この記事は、前回の記事＜■サイドバー「タグクラウド（ラベルリスト）」を記事数が多い順にソートして表示する（1）＞の続き記事なので、先に「1」の記事をご覧ください。






前回の記事では、サイドバーのタグクラウド（ラベルリスト）を記事数が多い順番で表示する方法を説明しました。（以降、サイドバーのタグクラウドのことを「ラベルリスト」、タグのことを「ラベル」と表記します）
現時点ではラベルが横並びで並んでいて、見た目がちょっとアレな感じです。


現時点のテンプレート




色々と調整をして、下記のような表示にしたいと思います。
私自身は「縦並びのリスト表示」が好きなんですが、「横並びのボタンのような表示」が好きな方もおられるでしょうから、どちらの調整方法も書いておこうと思います。


編集後のイメージ




この記事では、まず最初にラベル名の後ろに「件数」を表示させる方法を説明します。
ラベル名の文字の大きさを同じサイズにする方法や、単語の途中で改行しないように設定する方法も説明します。
その後に、CSS（スタイルシート）でラベルリストのスタイルを設定します。



編集する場所についてですが、基本的にはSeesaaブログ管理画面の「コンテンツ」画面の中のサイドバー「ラベルリスト」パーツの歯車マークから「コンテンツHTML編集」画面を開いて、そこに表示されている項目「HTML」部分を編集します。


‥‥もう既に「どこを指示してるの？」とわけがわからない状態ですね（笑）
いちいち説明するのが面倒なので、以降は上記箇所のことを【「ラベルリスト」パーツの中】と表記することにしますのでよろしくお願いします。

ラベルリストに記事件数を表示する

まずは「ラベルリスト」に記事の件数を表示させたいと思います。
現時点ではラベル名だけが表示されているので、ラベル名の後ろに「(21)」のように記事件数を表示させます。



「ラベルリスト」パーツの中の項目「HTML」の中から下記のコードを探します。
いったん、すべてのコード記述をパソコンの「メモ帳」や他のテキストエディタにコピーした方が簡単だと思います。





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


ラベル名にくっついて件数が表示されるのが嫌な場合は、追加するタグの前にスペースのタグ「&nbsp;」を入れます。
なので最終的には「&nbsp;(<% count %>)」を追加することになります。



追加する場所は、「aタグ」の終了タグ「</a>」の直前です。
タグを追加したら「保存」してください。


＜元コード＞


＜編集後＞

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

記事の件数を表示することができました。
でも、ラベルの文字サイズと同じサイズで件数が表示されているので、ラベルの文字サイズが大きいと件数表示まで大きくなってしまいますね。ちょっと邪魔なような気もします。
というか、小さすぎて見にくいよコレｗ

ラベルリストの文字サイズを同じサイズにする

各ラベルを横並びで表示する場合、どういう風に設定すべきなのか迷いましたが、とりあえず文字サイズ（フォントサイズ）を統一しておいた方が色々と遊べるかな？と思いました。
フォントサイズがそのまま、大きかったり小さかったりしてもかまわない場合は、この項目は飛ばしてください。



フォントサイズを統一するためには、「ラベルリスト」パーツの中のコードを編集をします。
私自身、なぜこういうことになるのか不明なのですが、コメントアウト「<!--」「-->」でJavascriptの記述を囲むと、フォントサイズが統一されます。
‥‥なぜでしょうね？（知らないｗ）
でもまあ、フォントサイズが統一されるんだから、深く考える必要は無いですね。
では、編集しましょう。



う〜ん‥‥ちょっと説明しにくいので、下記のように「<!--」と「-->」をコード内に記述してください。それだけでいいです。
記述後は「保存」してくださいね。

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

ラベルの文字サイズが全部、同じサイズになりました。
件数部分も同じサイズですね。

ラベル（タグ）を単語の途中で改行しないようにする

ラベルリストのラベルを、単語の途中で改行しないように設定します。
何の話をしているのかというと、コレのことです。




例えば「画像ありの記事」というラベルは、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行目に表示されています。単語の途中で改行しないように設定できました。

サイドバーのラベルリストのスタイルを調整する

とりあえず「ラベルリスト」の基本的な設定が終わりました。この後、「ラベルリスト」のパーツの中のコードを編集して「id」を設定します。
「id」を設定したら、いよいよCSS（スタイルシート）を編集します。スタイルを調整して「横並びのボタンのような表示」や「縦並びのリスト表示」にしたいと思います。



一応、念のために書いておきますが、これから説明する「横並びのボタンのような表示」や「縦並びのリスト表示」は、ラベルリストに対してどちらか1つの表示方法しか選択できません。まあ、当然なんですけどね。
あくまでも「こういう表示方法があるよ」という説明をするだけですから、どちらかのコードをCSSに記述してください。両方は無理です。
両方を記述してしまうと、めちゃくちゃな表示になってしまいます。

ラベルに「id名」を付ける

CSSを編集する前に、HTMLの方にスタイルの指示を出すための名前を作っておく必要があります。通常は「class」を使うものなので色々と試してみましたが、どうやっても「class」で指示を出すことができませんでした。
仕方がないので思い切って「aタグ」に「id名」を付けたら、あっさりと指示を出すことができました。最初から「id」で指示を出すようにしておけば良かったですｗ


ということで、「aタグ」にidを設定します。
「ラベルリスト」パーツの中に、ラベルのリンク部分「aタグ」があるので、この中にidを追加します。


追加するid名は、私は「slabel-list」にしました。
「s」はサイドバーということで、あとは「label-list（ラベルのリスト）」という意味です。
私と同じ名前で設定する必要はありませんので好きなように決めてください。



では、こちらの画像のように、「id="slabel-list"」を追加してください。
「a」の後ろには必ず「半角スペース」を入れてください。もちろん「id="slabel-list"」の後ろにも「半角スペース」が必要です。





idを追加したら、「保存」してください。
ちなみに現時点では、実際のブログの表示は変化しません。ただidを追加しただけですから。

CSSを編集して、ラベルを横並びのボタンのように表示する

CSS（スタイルシート）を編集します。
管理画面の「CSS/HTML編集」ボタンを選択し、「スタイルシート編集」画面で、空いている場所に下記「追加するコード」をコピペするか直接記述し、変更内容を「保存」します。
記述するのはCSSの一番下で大丈夫です。


＜追加するコード＞


●ラベル（単語）を線で囲みます。線は角丸にしました。
●余白が気になる場合は「padding」や「margin」の値を変更してください。
●あくまでも「ボタン風」であって「ボタン」そのものではありません。背景色を指定していないので、ラベルにマウスを乗せても通常のボタンのように背景色は変わりません。文字部分ギリギリに枠線を配置しているし、ラベルの上にマウスを乗せるとリンク文字の色が変更されるようになっているので、まるでボタンのように見えるだけです。

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

CSSを編集して、ラベルを縦並びのリスト表示にする

CSS（スタイルシート）を編集します。
もしも上記のように、既にCSSに「横並びのボタンのような表示」の記述をしている場合は、記述を削除するか、またはコメントアウトしておいてください。ダブって記述すると、表示がめちゃくちゃになります。



管理画面の「CSS/HTML編集」ボタンを選択し、「スタイルシート編集」画面で、空いている場所に下記「追加するコード」をコピペするか直接記述し、変更内容を「保存」してください。
記述するのはCSSの一番下で大丈夫です。


＜追加するコード＞


●ラベル（単語）を縦に表示します。リンクの下線は削除しているので、必要な場合は上記記述から「text-decoration: none;」を削除してください。
●ラベル名の前に「●」を表示させるようにしました。不必要なら削除してください。

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

縦並びリスト表示のおまけ

私はSeesaaブログのサイドバーには枠線を付けています。
「side-waku」という名前のclassを設定していて、「カテゴリ」や「過去ログ」などのコンテンツにも枠線を付けて表示しています。
「ラベルリスト」だけ枠線が無いのもおかしい気がしますので、一応、枠線を付ける場合はどのようにするのかを説明しておきます。
まあ、こんな感じになるわけですよ。





「side-waku」というclassについては、以前の記事＜■サイドバーのコンテンツを線で囲む（過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事）＞をご覧ください。こちらに色々と書いています。（説明はしょりすぎｗｗｗ）



このブログでのSesaaブログカスタマイズ内容をそのまま使用されている場合は、「ラベルリスト」パーツの中のコードを編集してください。
「<div class="side-waku">」と「</div>」で「<div class="module__body">」一連の記述を囲み、「<h3 class="module__heading">」を「<h3 class="module__heading2">」に変更します。できれば「h3」を「pタグ」に変更したいですね。（そうやってこのブログでは編集してきましたので）


まあ、ただのおまけですから、このように設定しなくても別にかまわないと思います。

コード編集後のHTML