タグクラウドのカスタマイズふたたび

素材サイトの方にもConfigurable Tag Cloud(CTC)を入れたんですが、TwentyTwelveの仕様で行間が詰まったままなので、CSSで行間を空けてみました。
このBlogでCTC実装後も色々と調べて、プラグインなしでもカスタマイズ出来そうだなーと思ったんですが、相変わらずコイツ→(”); ?>がムカツクのでとりあえずCTCのお世話になります。
CTCのインストールだの何だのは今回も割愛します。設定は前回とは少し変えて最小9pt最大19ptにしました。
このBlogで使っているテーマでは十分な行間が空けられているので、特にCSSを弄らなくても読みにくいことはありませんが、TwentyTwelveだとご覧の通り。
CTC

これが気に入らないのでソースを開いてタグのクラスを確認したところ、ctc-tagが各タグに付けられていました。
そこで以下のように指定して行間を開け、ついでに心持ちタグとタグの間も空けました。({}が大文字です
.ctc-tag {
line-height: 1.4; /* 行の高さを1.4倍に指定 */
margin: 0 1px; /* 上下のマージンを0、左右のマージンを1pxに指定 */

指定後はこのようになりました。
CTC
line-heightはremでの指定も出来ますので、好きな単位でカスタマイズしてください。私はブラウザによって表示が大きく変わらない(らしい)単位なしで指定しました。

自分が記述したとおりに表示されると楽しくなるタイプなので、背景色をつけて遊んでみました(一時的な遊びなので、現在は背景色はつけていません)。
CTC
マウスオーバーで色を変化させることも可能になので、これで色々カスタマイズ出来そうです。
が、一応表示確認のためSleipnir4のIE7互換表示にしてみたら別のところも含めて何だか色々すごかったので、IE7も滅んでくれと思いました。

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク