MENU

運営中のサブブログ

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

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

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

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

目次

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

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

タグクラウド基本設定

ウィジェット設定

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

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

CSSをコピペする場所

WordPressのstyle.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;
}

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

角を丸くする

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

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

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

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

付箋風にする

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

ハッシュタグを付ける

Contact Form7 (5) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

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

アイコンを付ける

Contact Form7 (5) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

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を使用できます。

枠線デザイン

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

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

左側を尖らせたデザイン

/* タグクラウドの指定 */
.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) CSS (3) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

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

左側を尖らせるコード
6行目をrightleft
7行目をleftright
に変更しています。

左右を尖らせる

Contact Form7 (5) HTML/CSS (6) WordPress Popular Posts (3) コメント欄 (3)

/*右側の尖り指定*/
.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;
}

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

タグ名が長いと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にはまったく関係ありませんので、サイトのデザインと合わせるためだけのものになります。

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

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

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

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

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

コメントフォーム

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

目次