Seesaaブログでは、タグクラウドが使えます。
このブログの左側にあるサイズの違う文字の羅列がそれです。
でも、この文字のサイズは、ユーザーは指定できません。なにやら、Seesaaが独自のスクリプトで勝手にサイズ変えてるみたいです。
タグが増えてくると、サイドバーがごちゃごちゃしてくる。
うちのタグクラウドは、英単語が改行して回り込まないように設定してるので、サイドバーのサイズが小さいのか、やたら左側がガラガラにあいてたりして、見栄えがよくない。
改善前の状態。
右側の空白が気になる(´-ω-`)
サイズの指定はできないとはいっても、コンテンツごとにHTMLを変えたり、スタイルシートはいじれるので、cssでタグクラウド全体の文字サイズを変えてみました。
Seesaaの管理画面から
デザイン＞コンテンツ＞タグクラウドのコンテンツをクリック
右上の「コンテンツHTML編集」をクリック。
タグクラウドの表示を行うスクリプトがごっちゃりかかれてるページがでます。
ここの、
<div class="sidetitle"><% content.title %></div>の下に、新しいスタイルを定義します。
<div class="side-tag-size">
とか、名前は適当に。
同じ画面の下にある
<% content.footer -%>の下に
</div>
と、閉じタグも追加しておきます。
この画面は、保存させて閉じる。
次に、スタイルシートの編集。
Seesaaの管理画面から、デザイン＞デザイン一覧
自分が現在使っているデザイン名をクリック。
スタイルシートのどこでもいいんですが、わかりやすく一番下に、以下のスタイルを追加します。
.side-tag-size {
line-height: 190%;
font-size: 60%;
}
保存する前に、「プレビュー」でタグクラウドの見栄えを確認。
line-height は 行間を表します。
font-size は 文字のサイズ。ピクセル値ではなく、％で指定すると、全体のバランスはそのままに、サイズが変わります。
自分でしっくりくるサイズに変更したら、「スタイルシートを変更する」ボタンをおして終わり。
これで変更させて、ブラウザでみたのが以下の画像です。
Firefox3で見た場合
Opera9で見た場合
IE7で見た場合
IEが一番見栄え悪い＼(^o^)／
けれどIEの見栄えにあわすと、Firefoxで見栄えが悪くなる。
自分はFirefoxを使っているので、コレデイイノダ。
ブログの閲覧者は、1位が自分らしいですよ。一番見る人に合わせるのだ。
