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

前回の記事＜■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする＞で、Seesaaブログのサイドバー「タグクラウド」のタグ（単語）部分を細かく編集しました。


記事件数を表示させたり、マウスを乗せた時の表示を変更したり、タグ文字サイズや件数のサイズを変更したり、単語の途中で改行されないようにしたり、なんかもう、本当に細かく編集しちゃいましたね。



今回は、タグクラウドの表示そのものを変更します。
ただの文字ではなくて、ボタン風にしてみたいと思います。


現時点のテンプレート



編集後のイメージ



前回の記事＜■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする＞では、「scriptタグ」にパラメーターを追加しました。
この時、タグのフォントサイズ（レベル）を「1」に設定したのは、タグ部分をボタンのように表示させたかったからです。タグ文字の最大サイズが大きいと、ボタンのサイズも大きくなってしまいますからね。最大サイズをできるだけ小さくするために「1」にしておきました。



ということですので、タグクラウドのタグ（単語）を線で囲んでボタンにしたい場合は、前回の記事の通りにパラメーターを設定しておいてください。（これは前提条件です）

タグクラウドのタグの文字を線で囲む

タグクラウドのタグ（単語）のスタイルを編集することになるので、今回はCSS（スタイルシート）を編集します。
CSSの編集をするためには、編集するclass名を特定しなければいけません。
まずは「コンテンツHTML」の記述のうち、サイドバーのタグクラウドのコードを確認してみます。





タグクラウドには「module module--tag-cloud」や「side-waku」、「module__body」など複数のclassが設定されているのがわかります。
今回は、これらのうちclass「module--tag-cloud」と「_tag」を使います。



そもそも、タグ（単語）部分のclassは「_tag」です。
スタイルを設定したいならば、CSSで「_tag」に対してスタイルを記述すればいいのですが、実はclass「_tag」は別の場所にも使われています。
それは、タグ一覧ページの下部に表示される「タグクラウド」です。





タグ一覧ページの「タグクラウド」には、サイドバーの「タグクラウド」のタグ（単語）に対するclassと同じ「_tag」が使われています。
ということは、class「_tag」だけにスタイルを設定すると、タグ一覧ページの「タグクラウド」にも同じスタイルが使われることになるわけです。
もちろん、同じスタイルで表示させたいのであれば何も気にする必要はありませんが、私は「サイドバーのタグクラウド」のタグ（単語）だけを線で囲みたいのです。タグ一覧ページの「タグクラウド」は何も編集したくないわけですよ。



「サイドバーのタグクラウドの中のタグ」に指示を出すためには、「_tag」だけではなく、「サイドバーのタグクラウド」を指すclass、つまり「module--tag-cloud」も一緒に設定しなければいけません。

CSSを編集して、タグをボタンのように表示する

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



ちなみに私は、CSSには「サイドバー関連」の設定をまとめて記述しているので、サイドバー「カレンダー」関連の下に記述します。（記述する場所は私が指定する場所でなくてかまいません。好きな場所で大丈夫です）


＜追加するコード＞


●タグ（単語）を線で囲みます。線は角丸にしました。
●タグとタグの間隔は「margin: 2px;」で設定しています。
●「padding: 3px 2px 2px 2px;」で枠線と文字との余白を設定しています。実際の表示を確認しながら、この数値を変更してください。（「padding（余白）: 上 右 下 左」という意味です）
●あくまでも「ボタン風」であって「ボタン」そのものではありません。背景色を指定していないので、タグにマウスを乗せても通常のボタンのように背景色は変わりません。文字部分ギリギリに枠線を配置しているし、タグの上にマウスを乗せるとリンク文字の色が変更されるので、まるでボタンのように見えるだけです。

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

次の記事の紹介

この記事では、サイドバーの「タグクラウド」の表示をボタン風に編集しました。
文字だけのリンク表示にするのかボタンのように表示させるのか、好きなように設定すればいいんですが、登録タグ数が多くなると、どちらもちょっと邪魔になってきますよね。
邪魔な時は「プルダウンメニュー」にしてしまえばいいのではないでしょうか。
ということで、次の記事ではサイドバーの「タグクラウド」をプルダウンメニューにします。