タグクラウドを優しくカスタマイズ【Cocoon】

サイドバーなどで利用するタグクラウドというウィジェットをカスタマイズしました。

大きな変化はなく、フォントの種類と枠線の色などを変えただけです。そのちょっと変えただけにも関わらず、ここ最近カスタマイズした中でもかなりお気に入りの一品です。

スポンサーリンク

Before – After

本当に些細な変化ですが。。線の色を変えたのと、枠に丸みを持たせて優しい感じにしました。

CSSコード

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

上記のフォントは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 にしました。最近の私のお気に入りです。

オシャレなフォントが無料で使える

サイト内のフォントを変えてみたいけどやり方が分からない方、Google Fonts がおすすめです。無料にも関わらずオシャレなフォントがたくさん使えます。

Comment

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