コピペで！Cocoonのタグクラウドデザインをカスタマイズ

タグクラウドのデザインをカスタマイズする方法です。

タグクラウドウィジェットはWordPressの標準ウィジェットなので、Cocoonに限らず汎用的に利用できるかと思います。

カスタマイズサンプル
- Before
- After
カスタマイズ方法
カラーの変更

カスタマイズサンプル

Before

Cocoonの場合は、タグアイコンが付与されます。

デザイン的にはシンプルで、ホバーアクションもありません。

After

ホバーアクション（背景色）追加
横並び２列に表示

サンプル画像でカラーの違う部分がホバー色になります。

横２列にしない場合は、サンプルCSSから以下を削除して下さい。すべてのパターンで同様です。

width:48%;

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

パターン１

CSS

.widget_tag_cloud .tagcloud a{
border: solid 1px #0099cc; /*枠線色*/
width:48%;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background:#0099cc; /*ホバー背景色*/
color:#fff; /*ホバー文字色*/
}

パターン２

CSS

/************************/
/*タグクラウドのデザイン*/
/************************/
.widget_tag_cloud .tagcloud a{
background: #95ccff; /*背景色*/
box-shadow: 0px 0px 0px 2px #95ccff;
border: dashed 2px #fff; /*破線*/
margin-bottom:5px;
width:48%;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background:#0099cc; /*ホバー背景色*/
color:#fff; /*ホバー文字色*/
}

パターン３

CSS

/************************/
/*タグクラウドのデザイン*/
/************************/
.widget_tag_cloud .tagcloud a{
background: #999900; /*背景色*/
box-shadow: 0px 0px 0px 2px #999900;
border: dashed 2px #fff; /*破線*/
color:#fff; /*文字色*/
margin-bottom:5px;
width:48%;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background:rgba(153,153,0,0.2); /*ホバー背景色*/
color:#666600; /*ホバー文字色*/
}

パターン４

CSS

/************************/
/*タグクラウドのデザイン*/
/************************/
.widget_tag_cloud .tagcloud a{
border: solid 1px #eb8686; /*枠線色*/
color:#eb8686; /*文字色*/
margin-bottom:5px;
width:48%;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background: radial-gradient(#edcccc, #eb8686); /*ホバー背景色*/
color:#fff; /*ホバー文字色*/
}