【ワードプレス】タグクラウドをCSSでカスタマイズ【STORK】

【上のCSSコードをコピー▼追加CSSにペースト】さらに自分好みの外観にしたい場合は、以下のコード説明を参考にしながらカスタマイズしてください。

コード説明

【.widget.widget_tag_cloud a】タグクラウドの場所を指定

【font-size】文字の大きさを指定

【display: inline-block;】性質を指定

コンテンツの表示方式には大きく【inline】【block】【inline-block】という物があります。【inline】は横のライン上に並ぶ・【block】は縦にブロックが積まれるように並ぶ・【inline-block】両方の特性を併せ持つ、みたいな感じです。

【margin】コンテンツ境界の外側の空間を調節します

【padding】コンテンツ境界の内側の空間を調節します

【text-decoration:none;】リンク設定した場合に自動で付くアンダーラインを非表示にする命令

【color: black;】文字の色を指定

【border-radius: 5px;】四隅を丸みを指定

【border: 2px solid black;】コンテンツの境界にボーダーラインを引く命令

【background-color】背景色を指定

【font-weight:bold;】文字を太文字に

【transition】はマウスオン時から通常時に戻るまでの時間を指定。ここでは０になっていますのでマウスが離れた瞬間、通常時に戻ります。１にすれば戻るまでに１秒のグラデーションを挟みます。

【.widget.widget_tag_cloud a:hover】場所と同じ場所に【hover】を追加することでマウスオン時を指定する事ができます。

【opacity】マウスオン時の透明度を指定。値をゼロにすれば完全な透明になり、１にすれば完全な不透明になります。半透明にしたければ『0.5』を与えてください。

【color】マウスオン時の文字色を指定

【transition】さきほども使用されていましたが、ここでは通常時からマウスオン時に変わるまでの時間を指定しています。さっきと逆ですね。

【font-weight:bold;】マウスオン時に太文字

【background】マウスオン時の背景色を指定

タグクラウドの最大表示数を増やす

もっと簡単な方法が『STORK公式』から発表されてました！そちらの方法ですと『ワードプレスが更新された時などに上書きされない』という事なので、散々書き散らした直後に発見して泣きそうですが、安全性などを踏まえてもSTORK公式のやり方を推奨します。

【ウィジェットのタグクラウドの最大表示数を変更する方法】