タグクラウドのリンクを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;
}

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

個々のタグを縦に表示

個々のタグを縦に表示

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

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
いろいろ質問できる対面サポートまたは作業代行を依頼できるメールサポートで対応します。ご都合に合わせて気軽にご相談ください。
現在までの対応件数:1806件
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク