2022/04/23 本日のPodcastはお休みします。
TCDテーマのウィジェットに表示されるタグクラウドをシンプルなスタイルにカスタマイズしてみた
こんにちは。安慶名勇子（アゲナユウコ）です。
ウィジェットでタグクラウドを設定してみたものの、TCDテーマの標準スタイルがイマイチ好きじゃないのです。使用頻度によって文字サイズが大きくなる方がいいという人もいるとは思うのですが、私はスッキリ表示したい派。というわけで、タグクラウド表示をカスタマイズしました。ビフォーアフターはこんな感じ。
CSSカスタマイズコード
カスタマイズ方法は簡単。カスタマイズ → CSS追加 にて下記のコードを記述するだけでOK。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* タグクラウドのデザイン */ .tagcloud a { font-size: 12px !important; /* 文字のサイズ */ line-height: 1em; /* 行の高さ */ background: #fff; /* 背景色 */ color: #2A2A2A; /* 文字色 */ display: inline-block; /* 並べ方 */ border:1px solid #ddd; /* 枠線色 */ white-space: nowrap; /* スペースと改行の扱い */ padding: 8px 8px; /* 文字周りの余白 */ margin-top: 4px; /* タグ同士の余白 */ text-decoration: none; /* 文字装飾 */ } /* タグクラウドホバー時設定 */ .tagcloud a:hover { background: #ddd; /* マウスホバー時の背景色 */ color: #fff; /* マウスホバー時の文字色*/ } /* タグマーク設定 */ .tagcloud a:before { font-family: 'design_plus'; /* デザインプラスのフォント */ content: '\e935'; /* 絵文字のコード */ padding-right: 8px; /* 絵文字右の余白 */ } |
記載後、公開ボタンを押すとこのような表示になっているはずです。
すっきりして見やすくなりました。ご自身のテーマに合わせてタグの形や背景色を変えると統一感が出るのではないでしょうか。ぜひ参考にしてください。
