MENU
カゲオ
管理人
陰ながらサイト運営を応援するブログ「カゲサイ」の管理人です。
WordPressやブログについてかゆいところに手が届く解説を心がけています。
→運営者情報をみる

WordPress

カスタマイズ
プラグイン
初期設定
エラー対処法
便利ツール
有料記事

その他

姉妹サイト
新着記事

新着記事をみる
もっと見る
人気記事をみる
もっと見る

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

サイトをみてみる
サブブログ｜デスク環境構築サイト運営中⇒見てみる

WordPressのタグクラウドをカスタマイズ｜CSSデザイン13選

カスタマイズ
HTML/CSS タグクラウド
当ページのリンクには広告が含まれています。
WordPressのタグクラウドCSSデザイン

当記事では、タグクラウドのCSSデザインを13パターン作成しました。
どれもコピペで使えます。

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる
目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

タグクラウド基本設定

ウィジェット設定

タグクラウドウィジェット設定

タイトル：指定した文言がサイドバーの上部に表示されます。
※.空欄だと「タグ」と表示
タクソノミー：タグを選択
タグの数を表示：チェックをすると、タグの右側にそのタグを使っている数が表示されます。

CSSをコピペする場所

WordPressのstyle.css設定

今回紹介ているコードは、子テーマのstyle.cssにコピペしてください。
管理画面の“外観”→”テーマファイルエディター“
style.cssのデフォルトコードの下にコピペ。

あわせて読みたい
Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説

タグクラウドのCSSデザイン13選

塗り潰しデザイン

403エラー (2) Blog Floating Button (1) Contact Form7 (5) CSS (3) Google Search Console (1) HTML/CSS (6) mixhost (2) SEO対策 (2) WordPress Popular Posts (3) WP初期設定 (6) このサイトにアクセスできません (1) カラムブロック (1) ギャラリーブロック (1) コメント欄 (3) サイトURL変更エラー (1) サポート系プラグイン (6) 人気記事ランキング (3) 検索フォーム (1) 目次 (2) 自作トップページ (1)

/* タグクラウドの指定 */
.tag-cloud-link{
  background: #66b2ff;
  color:#fff!important;
  padding:6px 8px;
  margin: 4px;
  border-radius: 0;
  line-height: 1;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  border:none;
  box-sizing: border-box;
}

 /* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  background: #aaa!important;
}

SWELLタグクラウドのフォントサイズ変更方法

.tag-cloud-link.tag-cloud-link.tag-cloud-link{
font-size:15px!important;
}

当サイトテーマでは、テーマ側で変な指定がされていますので、フォントサイズを変更する場合は、上記コードを追記してください。

角を丸くする

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

塗りつぶしデザインの
border-radius: 0;をborder-radius: 20px;
に変更してください。

背景をグラデーションにする

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

塗りつぶしデザインの
background: #66b2ff;を
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);

に変更してください。
グラデーションカラーは、ジェネレーションから選ぶと便利です。

付箋風にする

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

塗りつぶしデザインの/* タグクラウドの指定 */に以下を追記してください。
border-left: solid 5px #007fff;

ハッシュタグを付ける

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

.tag-cloud-link::before{
  content:"#";
  padding-right:2px;  
}

上記を追記してください。

アイコンを付ける

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) サポート系プラグイン (6)

.tag-cloud-link::before{
  font-family: "FontAwesome";
  content:"\f02b";
  font-weight:900;
  padding-right:4px;  
}

上記を追記してください。
アイコンは、Font Awesomeの最新バージョンを使用しています。
content:""のコードを変更すれば、お好きなアイコンを指定できます。
サイト内で使えるようにするには、以下のコードを読み込んでください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

バージョン6.5.1は2024年3月時点で最新のものです。
アップデートがあった際は、この数値を変更すれば新しいアイコンを使えます。

headタグから読み込む方法

SWELLカスタマイザー

当サイトテーマのように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.php」ファイルを子テーマへコピーする必要があります。

headに読み込ませると、すべてのページに適用されます。

あわせて読みたい
Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説

functions.phpから読み込む方法

functions.php編集
function enqueue_scripts(){
	wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

ハッシュタグ・アイコンを付ける方法は、この先のデザインでも同じです。

ちなみに、当サイトテーマでは、最初からFont Awesomeを使用できます。

→詳細はこちら

枠線デザイン

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

/* タグクラウドの指定 */
.tag-cloud-link{
  background:transparent;
  color:#666!important;
  border:solid 1px #666;
  padding:6px 8px;
  margin: 4px;
  line-height: 1;
  border-radius: 2px;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  box-sizing: border-box;
}

 /* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  background:  #66b2ff;!important;
  color:#fff!important;
  border:solid 1px;
}

“枠線カラー“と”フォントカラー“は合わせましょう。
ハッシュタグやアイコンはイメージです。
使用する場合は、先ほどのコードを追記してください。

border線の解説はこちら
border線の種類別｜HTML&CSSサンプル21選

左側を尖らせたデザイン

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

/* タグクラウドの指定 */
.tag-cloud-link{
  position:relative;
  background:#66b2ff;
  color:#fff!important;
  margin: 5px 10px;
  height:22px;
  line-height: 22px;
  padding:0 5px!important;
  border-radius: 0;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  box-sizing: border-box;
}

/* 左側の尖り指定 */
.tag-cloud-link::after {
  position: absolute;
  content: '';
  top:calc(50% - 11px);
  border: 11px solid transparent;
  border-right: 10px solid #66b2ff;
  left: -1.4em;
}

/* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  opacity: 0.8;
}

ハッシュタグやアイコンを入れることも考慮して、尖り部分はafter要素で指定しています。
使用する場合は、先ほどのコードを追記してください。

右側を尖らせる

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

.tag-cloud-link::after {
  position: absolute;
  content: '';
  top:calc(50% - 11px);
  border: 11px solid transparent;
  border-left: 10px solid #66b2ff;
  right:-1.4em;
}

左側を尖らせるコードの
6行目をright→left
7行目をleft→right
に変更しています。

左右を尖らせる

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) サポート系プラグイン (6)

/*右側の尖り指定*/
.tag-cloud-link::before {
  position: absolute;
  content: '';
  top:calc(50% - 11px);
  border: 11px solid transparent;
  border-left: 10px solid #66b2ff;
  right:-1.4em;
}

左側を尖らせるコードに
上記を追記してください。
余白もmargin:5px 10px;→5px 15px;あたりに変更すると良いでしょう。

疑似要素を両方使っているため、”ハッシュタグ“や”アイコン“は指定できません。

リストデザイン

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

Contact Form7 (5) HTML/CSS (6) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6)

/* タグクラウドのサイドバー・フッター用 */
.tagcloud{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin:auto;
}

/* タグクラウドの指定 */
.tag-cloud-link{
  background:transparent;
  color:#333!important;
  margin: 4px;
  padding:8px !important;
  border-radius: 0;
  line-height: 1;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  box-sizing: border-box;
  border-bottom:dashed 1px #333;
  flex: 0 0 100%;
}

/* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  background: #66b2ff;!important;
  color:#fff!important;
  border-bottom:solid 1px; 
}

当サイトのように記事内でタグブロックを使用する際は、一番上の.tagcloudを
.wp-block-tag-cloudに変更してください。
ハッシュタグやアイコンはイメージです。
使用する場合は、先ほどのコードを追記してください。

横並びデザイン

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

/* タグクラウドのサイドバー・フッター用 */
.tagcloud{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin:auto;
}

/* タグクラウドの指定 */
.tag-cloud-link{
  background: #66b2ff;
  color:#fff!important;
  padding:6px !important;
  margin-bottom:6px;
  border-radius: 0;
  line-height: 1;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  text-align:center;
  box-sizing: border-box;
  flex: 0 0 48%;
}

/* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  background: #aaa!important;
}

当サイトのように記事内でタグブロックを使用する際は、一番上の.tagcloudを
.wp-block-tag-cloudに変更してください。
ハッシュタグやアイコンはイメージです。
使用する場合は、先ほどのコードを追記してください。

タグ名が長いと2段にズレてしまいます。
またタグ数もズレる可能性があるため、横並びにするなら、ない方が良いかもしれません。

横並びの下線にする

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) WP初期設定 (6) コメント欄 (3) サポート系プラグイン (6) 人気記事ランキング (3)

/* タグクラウドのサイドバー・フッター用 */
.tagcloud{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin:auto;
}

/* タグクラウドの指定 */
.tag-cloud-link{
  background:transparent;
  color:#333!important;
  padding:10px 0!important;
  line-height: 1;
  font-weight: normal;
  font-size:15px!important;
  text-decoration:none;
  box-sizing: border-box;
  border-bottom:dashed 1px #333;
  flex: 0 0 48%;
}

/* タグ数をタグクラウドに合わせる */
.tag-link-count{
  color: inherit!important;
  font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
  background:  #66b2ff;!important;
  color:#fff!important;
  border-bottom:solid 1px;
}

結論：タグクラウドのデザインは趣味の域

以上、タグクラウドのCSSデザインを解説しました。

タグクラウドはSEOにはまったく関係ありませんので、サイトのデザインと合わせるためだけのものになります。

細部までこだわりたい方の参考になれば幸いです。

カスタマイズ
HTML/CSS タグクラウド
WordPressのタグクラウドCSSデザイン

この記事が気に入ったら
フォローしてね！

シェアしていただけると励みになります
  • URLをコピーしました！

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

  1. HOME
  2. WordPress
  3. カスタマイズ
  4. WordPressのタグクラウドをカスタマイズ｜CSSデザイン13選
目次