タグクラウドをカスタマイズしよう

改造

色々と手を出していくと、泥沼のカスタマイズ地獄に填まることはわりとある。

本来は、記事で勝負すべきなんだけど、デザインを触りたくなるんだよねぇ、それも始めた段階では。

スポンサーリンク

まずはサイドバーにタグクラウドを追加

サイドバーのデザインを触るのは基本……だと思う。

まずは、サイドバーにタグを表示させてみよう。

「外観」>「ウィジェット」と進んで、ここ!

この「タグクラウド」を「追加」してやると、こんな感じに。

下の方に「ウィジェットを保存」を押してやると、サイドバーウィジェットがサイドバーに追加される。

で、どうなるかというと、こうなる。

……まあ、デザイン性は微妙ではある。

カスタマイズする

でまあ、ちょっとCSSを弄るのだが。

/*タグクラウドのデザイン*/
.tagcloud a {
 font-size: 14px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #2098a8; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}
.tagcloud a:hover {
 background: #f9d635; /* マウスホバー時の背景色 */
 color: #2098a8; /* マウスホバー時の文字色*/
}

.tagcloud a:before {
 font-family: "FontAwesome";
 content: "\f02b"; /* 絵文字のコード */
 padding-right: 4px;
}

こんなのをStyle.cssにぺたりと貼る。

そうすると、こうなる。

このデザインが気に入るかどうかは人それぞれだが、ありかな、と思う。あとは、色とか文字の大きさは、適宜触っていって欲しい。

コメント

タイトルとURLをコピーしました