タグクラウドを優しく、そしてシンプルにカスタマイズ【Cocoon】

サイドバーなどで利用するCocoonのタグクラウドをカスタマイズしました。

フォントの種類と枠線の色などを変えただけです。ちょっと変えただけなんですが、ここ最近カスタマイズした中でもかなりお気に入りの一品です。

完成イメージ

本当に些細な変化なんですが、結構イメージは変わると思います。

カスタマイズコード①

/*タグクラウド*/
.widget_tag_cloud .tagcloud a {
  border: 0.5px #5f5f5f solid;
  border-radius :20px;
  font-family:'Baloo Thambi 2','Cursive';
}

Baloo Thambi2というフォントはGoogle Fontsを導入すれば利用可能です。

Google Fontsはオシャレなフォントが無料で使えますので、導入方法などはこちらの記事を参考にしてください。

線の色と太さ

border: 0.5px #5f5f5f solid;

サイト内の他のデザインと一体感を出すために、枠線の色と太さを変えました。このフォントの色も最近のお気に入りカラーです。たくさんの色を使うとごちゃごちゃした感じになるので、そろそろサイトで使う色も3〜5くらいに絞りたいところです。

ブラウザによっては線が掠れてしまう可能性があるので、その際は太さを0.6～0.7pxくらいにしてみてください。

枠線に丸みをつける

border-radius :20px;

柔らかな感じを持たせる為に、枠線の角に丸みをつけました。少し変えるだけで印象もだいぶ変わりますね。

フォントを変える

font-family:'Baloo Thambi 2','Cursive';

サイト内の他の項目でも使っているフォント Baloo Thambi 2 にしました。最近の私のお気に入りです。

一覧表示にするカスタマイズ

お気に入りだとか言っておきながら、またカスタマイズしてしまいました。

デフォルトのデザインも遊び心があって面白いのですが、恐らくタグクラウドをじっくり見るユーザーは少ないかと思います。興味の薄い人をその一瞬のスクロール中に振り向かせるには分かりやすさを優先すべきかと思って1行ずつのレイアウトにしてみました。

/*タグクラウド*/
.widget_tag_cloud .tagcloud a {
  border-bottom: 0.5px #FFC9D2 solid;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius:0;
  width:98%;
  font-family:'Noto Sans JP';
}