ウィジェットのタグクラウドを自分好みのデザインにカスタマイズ

はじめに

タグクラウドはWorsPressの標準ウィジェットです。

「外眼」→「ウィジェット」（またはテーマのカスタマイズメニューから）で表示したいエリアに追加して設定します。

タグクラウドの初期表示

テーマによっては、最初から綺麗にカスタマイズされているものも多いですが、デフォルトだとタグが文字列で表示されるだけで、更に記事数の多いタグが大きく、少ないのは小さくなりバラバラになってしまい、なんだか気持ち悪いです。

ちなみに当サイトは現在、「Luxeritas(ルクセリタス)」で、デザインは「rosea-et-rubrum」を使っています。

デフォルトでは上図のような感じに、既にカスタマイズされている筈ですが、他のCSSを触っているせいか、うちではこのように表示されず、以下のようになりました。

それを少し見栄えよくカスタマイズしてみました。

ついでにサイドバーのタイトルもちょっと変えました。

サイドバータイトルのカスタマイズについては以下をご覧ください。

サイドバータイトルを好みのデザインにカスタマイズする

はじめに サイドバーでのタイトルは、テーマにより様々です。 これを自分好みのデザインに変更するには、スタイルシート（style.css）を編集（追記）する事で可能です。 注意点は、テーマにより設定箇所、設定名が異なるので、それを調べる必要が...

ayaito.net

タグの表示方法を変える

タグの表示方法を変えるには、スタイルシートに追記します。

子テーマの「style.css」テーマファイル編集で行って下さい。

「widget_tag_cloud .tagcloud a」で指定します。

パターンA

以下は、当サイトで利用の付箋風デザインでのサンプルです。

/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
/*件数によって文字サイズ変わるのを固定*/
font-size: 14px !important;
background: #e0d3cb;  /*背景色*/
margin: 3px;
padding:6px;
text-decoration: none;
border-left:solid 4px #2e221b; /*左端のライン色*/
color:#000;  /*文字色*/
line-height: 40px;
}

パターンB

/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
font-size: 14px !important; /*件数によって文字サイズ変わるのを固定*/
margin: 3px;
padding:6px;
text-decoration: none;
border:solid 1px #4a372b;
border-bottom-left-radius:20px;
border-left:solid 5px #4a372b;
border-top-right-radius:20px;
border-right:solid 5px #4a372b;
color:#4a372b;
line-height: 40px;
white-space: nowrap; }　/*タグ名称の途中改行しない*/

パターンC

タグの文字数の長さに関わらず、２列表示のパターンです。

.widget_tag_cloud .tagcloud a{
font-size: 12px !important; /*件数によって文字サイズ変わるのを固定*/
padding:6px;
text-decoration:none;
color:#fff;
display:inline-block;
width:49%;
text-align:center;
background:#9d9d9d;
border-radius:5px;
margin-bottom:5px;
}
/*ホバー色*/
.widget_tag_cloud .tagcloud a:hover{
background:#fb8a8a;
}

タグのアイコンフォントを追加する

.tagcloud a:before{
font-family:"Font Awesome 5 Free";
content:"f02b";
font-weight:900;
color:#fff;
float:left;
padding-right:4px;
}

アイコンフォントの利用方法は以下をご覧ください。

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法

当サイトでは　Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。 Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。 Font Awesome Ver.6　について 2...

ayaito.net

デザインや色は、お好みに合うように変更して下さい。
以下のカラーコードもご利用下さい。

SNS等地下鉄JRセーフ色名 赤桃青紫黄橙緑茶黒

タグが途中改行されるのを修正

タグの名称がサイドバーの横幅で途中改行されて見にくい状態になるのを修正します。

＜BEFORE>

以下を追記して解消しました。

white-space: nowrap;　/*タグ名称の途中改行しない*/