法人・個人事業主向けの新サービスAmazonビジネス→【詳細はこちら】

【WordPress】タグクラウドのCSSデザイン9選

タグクラウドデザイン

この記事ではタグクラウドのCSSデザインを9つ作成しました。

どれもコピペで使えるので、よかったら参考にしてください。

「タグクラウド」について、SEOの観点からもしっかり理解しておきたい方はこちらを先に読んでください。

タグクラウドSEO対策 【WordPress】タグクラウドの正しいSEO対策とカスタマイズ解説

なお、今回紹介するカスタマイズコードは「子テーマ」のスタイルシート (style.css)にコピペしてください。

スタイルシート (style.css)編集

子テーマがわからない方はこちらの記事を先にどうぞ。

WordPress子テーマ Cyberduckの使い方WordPressの子テーマを分かりやすく解説

タグクラウドのカスタマイズ9選

ここから「タグクラウド」のCSSを載せていきます。

タグクラウドタグ数表示設定

タグの横に「投稿数」を表示するかどうかは、ウィジェット内で設定できます。

なおアイコンは「Font Awesome 5」を使用しています。

1.ベタ塗りバージョン

シンプルなので、カラーを変更すればどんなサイトにも合いますね。

タグクラウドデザインサンプル1
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
 background:#eee;
 border:none;	
 color: #666;
 padding: 6px;
 margin:3px;
 border-radius: 3px;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover {
 background: #ffc489; 
 color: #fff; 
}

2.枠線バージョン

「背景ベタ塗りパターン」とどちらにするか好みが分かれそうです。

タグクラウドデザインサンプル2
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:#fff;
 border:1px solid #bbb;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:1px;
 text-decoration:none;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 background:#ff870f; 
 color:#fff; 
 border:1px solid #bbb;
}

3.角丸アイコンバージョン

可愛らしいデザインで、女性サイトと相性が良さそうです。

タグクラウドデザインサンプル3
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:#ffe0ef;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:20px;
 text-decoration:none;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 color:#333; 
 background:#ddd;
}
/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 font-family:"Font Awesome 5 Brands";
 content:"\f19a"; 
 font-weight:400;
 color:#008db7;
 padding-right:6px;
}

4.角を尖らせたバージョン

個性を出したい人にオススメ。

コードがやや複雑です。

タグクラウドデザインサンプル4
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 position:relative;
 background:#93c9ff;
 display:inline-block;
 height:36px;
 color:#fff;
 line-height:35px;
 margin:5px 10px;
 padding:0 5px;
 text-decoration:none;
 font-size:12px;
}
/*タグクラウド角を尖らせる*/
.tagcloud a:before {
 border-top: 18px solid transparent;
 border-bottom: 18px solid transparent;
 border-right: 15px solid #93c9ff;
 content: '';
 display: block;
 margin-left: -15px;
 position: absolute;
 left: 0;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
color:#000; 
background:#ddd;
}
.tagcloud a:hover:before{
 border-right:0;
}

5.付箋風バージョン

カラーを変更すれば、どんなサイトにもマッチします。

タグクラウドデザインサンプル5
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
 background: #bbb;
 margin: 3px;
 padding:6px;
 text-decoration: none;
 border-left:solid 4px #555;
 color:#fff;
 font-size:12px;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 color: #000; 
 background:#ddd;
}

6.グラデーションバージョン

グラデーションをかけたタグはほとんど見かけないので、個性を存分にアピールできますね。赤字部分を変更すれば、お好きなカラーに変更できます。

タグクラウドデザインサンプル6
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 120, color-stop(0.81, #2576b6), 
 color-stop(0.00, #b0eafc));
 margin:3px;
 padding:6px;
 text-decoration:none;
 color:#fff;
 font-size:12px;
 font-weight:bold;
 border-radius:5px;
}

7.リスト風バージョン

タグ数が少なければ、かなりキレイに見えます。

マウスを載せると、右側に少しずれるようにしました。

タグクラウドデザインサンプル7
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 background:none;
 margin:3px;
 padding:6px;
 text-decoration:none;
 color:#333;
 display:block;
 font-size:12px;
 border-bottom:dotted 1px #ddd;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 margin-left:2%;
 color:#7fbfff;
}
/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 font-family:"Font Awesome 5 Free";
 content:"\f0da";
font-weight:900;
 color:#333;
 padding-right:6px;	
}

8.ベタ塗り横並びバージョン

こちらも美しいデザインですが、「タグ数」を表示させるとデザインが崩れるので「非表示」に設定にしてください。

あと、タグの総数を2の倍数で揃えないとサンプルのように最後の1つがバランスが悪くなります。

タグクラウドデザインサンプル8
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a{
 padding:9px;
 text-decoration:none;
 color:#fff;
 display:inline-block;
 width:48.5%;
 font-size:12px;
 text-align:center;
 margin-bottom:6px;
 background:#7fbfff;
 border-radius:3px;
 box-shadow:0 1px 3px #ccc;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 color:#333;
 background:#ddd;
}

9.横並び下線バージョン

マウスを載せると、背景と文字カラーの変更と太字になるようにしました。

タグクラウドデザインサンプル9
style.css
/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
 padding:10px 0;
 color:#666;
 display:inline-block;
 width:48.5%;
 background:none;
 font-size:12px;
 text-decoration:none;
 border-bottom:dotted 1px #ddd;
}
/*タグクラウドマウスオーバー時*/
.widget_tag_cloud .tagcloud a:hover{
 color:#7fbfff;
 background:#fafafa;
 font-weight:bold;
}
/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 text-shadow:none;
 font-family:"Font Awesome 5 Free";
 content:"\f02c";
 font-weight:900;
 color:#eedcb3;
 padding-right:6px;
}

タグクラウドのCSSデザイン【まとめ】

最近の有料テーマでも「タグデザイン」までこだわってるテーマはないなぁと感じたので、今回作ってみました。

タグを表示させている方の参考になれば〜。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です