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;
}

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

個々のタグを縦に表示

個々のタグを縦に表示

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

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート