WordPressカスタマイズまとめ←クリック

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

タグクラウド デザイン

この記事では「ウィジェットタイトル部分」のカスタマイズ方法と「タグクラウド」のCSSデザインを9つ作成しました。

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

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

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

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

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

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

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

1:ウィジェットタイトルをカスタマイズ

「ウィジェットタイトル部分」は、widget-titleに指定します。

これで、他のタイトル部分(オリジナルプロフィールやアーカイブなど)も全て統一できます。

.widget-title{
ここにCSSを指定していく
}

タグクラウド

ボーダー線で囲みたいなら

border:solid 2px #f2d58a;

タグクラウド

背景ベタ塗りにするなら

background:#f2d58a;

タグクラウド

テキストカラーを変えるなら

color:#fff;

タグクラウド

テキストを太字にしたいなら

font-weight:bold;

タグクラウド

テキスト周りに余白が欲しいなら

padding:10px;

タグクラウド

テキストを真ん中に寄せたいなら

text-align:center;

タグクラウド

角を丸めたいなら

border-radius:8px;

タグクラウド

フォントサイズを変更したいなら

font-size:20px;

テキストの前にアイコン(FontAwesome)を表示させたい場合は、もう少しコードを足す必要があります。

「FontAwesome」の導入方法はこちらの記事へ書きました。

ストークFont-Awesomeアップデート STORKでFont Awesome 5アップデート後に修正したところ
タグクラウド
.widget_tag_cloud .widgettitle :before{
content: "\f02c";
 font-family:"FontAwesome";
font-weight:normal;
padding-right:6px; 
}
補足

.widget_tag_cloud.widgettitle:beforeはそれぞれ半角スペースを空けないとアイコンが左側にならないので注意してください。

Font-Awesome5CSSコード

content:""のコードを変更すれば好きなアイコンを挿入できます。

font-weight:normal;は、テキストを太字指定した場合でも、アイコンだけは細く指定するためのものです。

padding-right:6px;で、アイコンとテキストのスペースを調整します。

ウィジェットタイトル部分は、装飾しすぎるとゴチャゴチャした印象になるので、なるべくシンプルにするのがオススメです。

上記コードのまとめ

タグクラウド
style.css
/*ウィジェットタイトル*/
.widget-title{
background:#f2d58a;
text-align:center;
padding:10px;
color:#fff;
border-radius:8px;
font-weight:bold;
}
/*タグクラウドタイトル前アイコン*/
.widget_tag_cloud .widgettitle :before{
content: "\f02c";
font-family:"FontAwesome";
font-weight:normal;
padding-right:6px; 
}

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

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

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

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

タグクラウドCSSデザイン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; 
}

タグクラウドCSSデザイン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;
}

タグクラウドCSSデザイン3【角丸アイコン】

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

アイコンはウィジェットタイトル部分で紹介した「Font Awesome」を使用しています。

タグクラウドデザインサンプル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:"FontAwesome";
 content:"\f19a"; 
 font-weight:normal;
 color:#008db7;
 padding-right:6px;
}

タグクラウドCSSデザイン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;
}

タグクラウドCSSデザイン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;
}

タグクラウドCSSデザイン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;
}

タグクラウドCSSデザイン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:"FontAwesome";
 content:"\f0da";
 color:#333;
 padding-right:6px;	
}

タグクラウドCSSデザイン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;
}

タグクラウドCSSデザイン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:"FontAwesome";
 content:"\f02c";
 font-weight:normal;
 color:#eedcb3;
 padding-right:6px;
}

まとめ

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

タグを表示させている方は参考にして下さい。

配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。