【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事<■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする>で、Seesaaブログのサイドバー「タグクラウド」のタグ(単語)部分を細かく編集しました。記事件数を表示させたり、マウスを乗せた時の表示を変更したり、タグ文字サイズや件数のサイズを変更したり、単語の途中で改行されないようにしたり、なんかもう、本当に細かく編集しちゃいましたね。今回は、タグクラウドの表示そのものを変更します。ただの文字ではなくて、ボタン風にしてみたいと思います。現時点のテンプレート編集後のイメージ前回の記事<■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする>では、「scriptタグ」にパラメーターを追加しました。この時、タグのフォントサイズ(レベル)を「1」に設定したのは、タグ部分をボタンのように表示させたかったからです。タグ文字の最大サイズが大きいと、ボタンのサイズも大きくなってしまいますからね。最大サイズをできるだけ小さくするために「1」にしておきました。いうことですので、タグクラウドのタグ(単語)を線で囲んでボタンにしたい場合は、前回の記事の通りにパラメーターを設定しておいてください。(これは前提条件です)タグクラウドのタグの文字を線で囲むタグクラウドのタグ(単語)のスタイルを編集することになるので、今回はCSS(スタイルシート)を編集します。CSSの編集をするためには、編集するclass名を特定しなければいけません。「コンテンツHTML」の記述のうち、サイドバーのタグクラウドのコードを確認してみます。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には「サイドバー関連」の設定をまとめて記述しているので、サイドバー「カレンダー」関連の下に記述します。(記述する場所は私が指定する場所でなくてかまいません。3px;}●タグ(単語)を線で囲みます。2px;」で設定しています。2px;」で枠線と文字との余白を設定しています。実際の表示を確認しながら、この数値を変更してください。左」という意味です)●あくまでも「ボタン風」であって「ボタン」そのものではありません。背景色を指定していないので、タグにマウスを乗せても通常のボタンのように背景色は変わりません。文字部分ギリギリに枠線を配置しているし、タグの上にマウスを乗せるとリンク文字の色が変更されるので、まるでボタンのように見えるだけです。コード編集後のCSSと実際のページ次の記事の紹介この記事では、サイドバーの「タグクラウド」の表示をボタン風に編集しました。文字だけのリンク表示にするのかボタンのように表示させるのか、好きなように設定すればいいんですが、登録タグ数が多くなると、どちらもちょっと邪魔になってきますよね。邪魔な時は「プルダウンメニュー」にしてしまえばいいのではないでしょうか。いうことで、次の記事ではサイドバーの「タグクラウド」をプルダウンメニューにします。■【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」をプルダウンメニューにするタグが増えれば増えるほど、サイドバーのタグクラウドが邪魔になる気がするので折りたたんでしまいたい。なると「プルダウンメニュー化」してしまう方が、色々と考えなくていいからラクです。[必須入力]※画像の中の文字を半角で入力してください。