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

前回の記事＜■タグ一覧ページのパーツ（タグクラウド・タグサーチ）の順番を変更する＞で、タグクラウドとタグサーチをタグ一覧ページの記事の下に移動しました。
HTMLで掲載順番を入れ替えたんですが、結果的には「もっと見る」ボタンとの隙間がなくなってしまいました。


現時点のタグ一覧ページ



タグクラウド自体もあまり目立たない配色、というかやけにシンプルですので、余白と合わせて調整したいと思います。
まずはタグクラウドのスタイルを編集します。
その後で、余白を付けたいと思います。



余白を付ける時に考えておきたいのは、タグクラウドにタイトルを付けるかどうかです。
私自身は「タグクラウド」というタイトルを付けたいのですが、必要ない方もいらっしゃると思いますので、まずはタイトルなしのパターンを説明します。


そして、次の記事＜■【Seesaaブログ新デザインシステム】タグ一覧ページのタグクラウドにタイトルを作る＞で、タイトルを付ける方法を説明します。

タグクラウドの背景色や枠線を変更する

まずはタグクラウドのスタイルを決めます。
CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「tag-cloud」というclassを探します。



下記に「元コード」と「編集後」のコードを掲載しますので参考にしてください。
CSSの該当部分に「編集後」のコードをコピペまたは該当箇所を直接変更し、「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード「.tag-cloud」＞


＜編集後＞


●コメントアウトで見出しを付けています。
●背景色や枠線など、好きなように編集してください。
●今回、「"○○"でSeesaa全体を検索する」という案内リンク（タグサーチ）は何も編集していませんが、もしも何かしらの調整をしたい場合は、CSSで「.tag-search」部分を編集してください。

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

タグクラウドの上部に余白を入れる（タイトルを付けない場合）

上記ではタグクラウドの背景色を変更し、枠線を付けて目立つようにしただけであり、タグクラウドは「もっと見る」ボタンとくっついたままです。
隙間がありません。


今から「もっと見る」ボタンとタグクラウドの間に空間を作りたいと思いますが、タイトルをどうしますか？
個人的には「タグクラウド」というタイトルを付けておいた方が、枠内に表示されている言葉が何を示しているのかがわかりやすいと思うんですけどね。



まあ、私自身はタグクラウドにタイトルを付けるつもりですが、もしも「タグクラウド」というタイトルが不必要ならば、「もっと見る」ボタンとの間の余白を付けるために、上記コード「.tag-cloud」に「margin-top: ○px;」を追加してください。



例えば「margin-top: 100px;」を追加してみると、こうなります。


＜編集後（タイトル上部に余白）＞

上余白を入れた実際のページ

この画像ではなんだか物足りない感じかもしれませんが、タグの数が増えればそれなりに見られるようになると思います。

私がやりたいカスタマイズ

タグクラウドに直接上余白を入れると、上記のように問題なく「もっと見る」ボタンとの間に空間を作ることができます。
でも私は、タグクラウドに「タグクラウド」というタイトルを付けたいのです。
例えば、下の画像（編集後のイメージ）は、実際に稼働させていたブログのタグ一覧ページです。


編集後のイメージ


（タイトルは真ん中配置になっていますが、この画像をキャプチャした後で左寄せに変更したので、あまり気にしないでください。タグクラウドにタイトルを付けた場合はこのような表示になる、ということをイメージしてほしくて、そのまま使ってしまいましたｗ）



タイトルがあった方が、何に対するリンク案内なのか、わかりやすいと思いませんか？
ということで、次の記事で、タグクラウドにタイトルを表示する方法を説明します。
「タグクラウド」というタイトルが不必要ならば、次の記事は飛ばして、どうぞ。





ちなみに、タグクラウドにタイトルを表示させる場合（次の記事で説明する内容）は、上記で説明したよう方法は使いません。つまり、「.tag-cloud」の中に「margin-top: ○px;」は記述しません。
この記述はあくまでもタイトルを表示させない場合の記述です。

タイトルを表示させる場合は、タイトル自体に上余白を付けてしまうため不必要な記述になります。削除しておいてください。