タグクラウドのカスタマイズ（フォントサイズ統一・枠線・背景色・縦表示）

WordPress個別サポート

タグクラウドのリンクをCSSでカスタマイズする例を紹介します。仕上がりイメージは次のようになります。

タグクラウドのスタイルを変更した例
タグクラウドのスタイルを変更した例

テーマによって異なりますが、タグクラウドではよく使われるタグのサイズが大きくなるのが定番です。次のようなイメージです。

よく使われるタグは大きくなる
よく使われるタグは大きくなる

タグのフォントサイズを統一して、枠線を付けて、背景色を設定するCSSの例を紹介していきます。

すべて同じフォントサイズにする

サイズを揃えたければタグクラウドのリンクに共通のフォントサイズを指定します。たとえば、次のようなCSSを使います。

/* タグクラウドのフォントサイズを統一 */
.tagcloud a {
    font-size: 16px !important;
}

タグクラウドは「tagcloud」というクラス名になっているので、そのリンクのフォントサイズを指定するものです。既存のフォント設定よりも優先度を上げるため「!important」を付けています。

表示結果は次のようになります。

すべて同じフォントサイズに
タグクラウドのフォントサイズを統一

枠線を付ける

個々のタグを枠線で囲むCSSの例は次のようになります。

/* タグクラウドに枠線を付ける（＋フォントサイズ統一） */
.tagcloud a {
    font-size: 16px !important;
    border: solid 1px #000080;
    border-radius: 5px;
    display: inline-block;
    padding: 5px;
    margin-bottom: 8px;
}

表示結果は次のようになります。

タグクラウドに枠線を付ける
タグクラウドに枠線を付ける

マウスオーバー時に背景色を付ける

タグクラウドにマウスオーバーしたときに背景色を付けるCSSの例は次のようになります。

/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
    background-color: #f6bfbc;
    text-decoration: none;
    color: #000;
}

表示結果は次のようになります。

マウスオーバー時に色を変える
マウスオーバー時に色を変える

個々のタグを縦に表示

初期設定では個々のタグは横並びに表示されるはずですが、「display: block;」を指定すれば縦に表示することができます。

/* タグクラウドを縦に表示 */
.tagcloud a {
    font-size: 16px !important;
    display: block;
}

表示結果は次のようになります。

個々のタグを縦に表示
個々のタグを縦に表示

自由にカスタマイズしてお使いください。

CSSの書き方