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

2024年9月16日

当ページのリンクには広告が含まれています。

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

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

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

サイトをみてみる

タグクラウド基本設定

ウィジェット設定

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

CSSをコピペする場所

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

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

塗り潰しデザイン

/* タグクラウドの指定 */
.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;
}

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

角を丸くする

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

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

塗りつぶしデザインの
background: #66b2ff;を
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
に変更してください。
グラデーションカラーは、ジェネレーションから選ぶと便利です。

付箋風にする

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

ハッシュタグを付ける

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

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

アイコンを付ける

.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に読み込ませると、すべてのページに適用されます。

枠線デザイン

/* タグクラウドの指定 */
.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選

左側を尖らせたデザイン

/* タグクラウドの指定 */
.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要素で指定しています。
使用する場合は、先ほどのコードを追記してください。

右側を尖らせる

.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
に変更しています。

左右を尖らせる

/*右側の尖り指定*/
.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;あたりに変更すると良いでしょう。

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

リストデザイン

/* タグクラウドのサイドバー・フッター用 */
.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に変更してください。
ハッシュタグやアイコンはイメージです。
使用する場合は、先ほどのコードを追記してください。

横並びデザイン

/* タグクラウドのサイドバー・フッター用 */
.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;
}

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

横並びの下線にする

/* タグクラウドのサイドバー・フッター用 */
.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にはまったく関係ありませんので、サイトのデザインと合わせるためだけのものになります。

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

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

Follow @kagenodesk

シェアしていただけると励みになります

URLをコピーしました！

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

タグクラウド基本設定

ウィジェット設定

CSSをコピペする場所

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

塗り潰しデザイン

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

角を丸くする

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

付箋風にする

ハッシュタグを付ける

アイコンを付ける

枠線デザイン

左側を尖らせたデザイン

右側を尖らせる

左右を尖らせる

リストデザイン

横並びデザイン

横並びの下線にする

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

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

コメントフォームコメントをキャンセル

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

タグクラウド基本設定

ウィジェット設定

CSSをコピペする場所

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

塗り潰しデザイン

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

角を丸くする

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

付箋風にする

ハッシュタグを付ける

アイコンを付ける

枠線デザイン

左側を尖らせたデザイン

右側を尖らせる

左右を尖らせる

リストデザイン

横並びデザイン

横並びの下線にする

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

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

コメントフォーム コメントをキャンセル

コメントフォームコメントをキャンセル