>> リニューアルや機能停止など 当サイトのお知らせはこちら →
PR

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

Cocoon・カスタマイズ
この記事は約4分で読めます。
     

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

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

 


 

カスタマイズサンプル

Before

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

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

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

 

After

  • ホバーアクション(背景色)追加
  • 横並び2列に表示

 

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

 

 

 

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

width:48%;

タグクラウドウィジェット:カスタマイズ

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

パターン1

タグクラウドウィジェット:カスタマイズ

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; /*ホバー文字色*/
}

 

パターン2

タグクラウドウィジェット:カスタマイズ

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; /*ホバー文字色*/
}

 

パターン3

タグクラウドウィジェット:カスタマイズ

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; /*ホバー文字色*/
}

 

パターン4

タグクラウドウィジェット:カスタマイズ

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; /*ホバー文字色*/
}

 

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

タイトルとURLをコピーしました