【Cocoon】タグクラウドのデザインをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーのタグクラウドのデザインを少しカスタマイズしました。

サイドバーの見出し部分のカスタマイズはこちらの記事で紹介しています。

【Cocoon】サイドバーの見出しデザインをカスタマイズ

...

web-ashibi.net

2018.04.22

タグクラウドのデザイン変更はけっこう簡単にサクッと終わります。

CSSでタグクラウドをカスタマイズ

タグクラウドはCSSのコードも短いので分かりやすいと思います。今回のコードはこうなりました↓

.tagcloud a {
    background: none; /*背景を消す*/
    border: 1px solid #ccc; 
    border-radius: 20px; /*角の丸み*/
    color: #555; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 13px;
    margin: 2px;
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
}
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #72c7e6;
    border: 1px solid #72c7e6;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}

マウスホバーすると背景と文字のカラーがアニメーションでフワッと変わるようになっています。色などはお好みでどうぞ。

アイコンを変えたい場合

デフォルトではFont Awesome 4でアイコンを表示していましたが、今回はアイコンフォントではなくて「#」という普通の文字に変更しています。

先ほど紹介したコードだと以下の部分です↓

.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}

Font Awesome 4で他のアイコンを使いたい場合はこちらのコードを使ってください。「content: “\f02b“;」の赤字の部分を変更する感じですね。

.tagcloud a .tag-caption::before {
    font-family: FontAwesome;
    content: "\f02b";
    padding-right: 3px;
}

※Cocoon バージョン2以上の場合

Cocoon 2.0.0からは親テーマのコードが少し変わったので、アイコンを変更する場合は一度デフォルトのアイコンをCSSで非表示にする必要があります。コードはこちら↓

.tag-caption .fa-tag {
    display: none;
}

またCocoonのバージョン2からはFont Awesome 5が使えるようになりました。「Cocoon設定 ＞ 全体」で4と5を切り替えられるようになっています。

Font Awesome 5をCSSで指定する場合のコードはこんな感じ↓

.tagcloud a .tag-caption::before {
    font-family: "Font Awesome 5 Free";
    content: "\f02b";
    padding-right: 3px;
}

Font Awesome 5では有料版もありますが、無料版でもバージョン4よりアイコンの種類が増えています。

今後は5が主流になると思うので、もしタグクラウド以外の場所にもアイコンを使っている場合は修正が必要になるかもしれませんが、使える場合は5を使っておいた方が良いと思います。

タグの幅を広げない方法

普通の状態だとタグが幅いっぱいに伸びて綺麗にスペースを埋めるようになっていますが、コードを少し変更するだけで横幅が伸びないようになります。こういう感じ↓

変更箇所は、「flex: 1 1 auto;」という部分を「flex: 0 1 auto;」とするだけ。赤字の部分を「1 → 0」に変えるだけですね。

アーカイブのタイトルのアイコンを変更する方法

タグを選択して一覧ページに飛んだ時に表示されるタイトルのアイコンもCSSで変更できます。

コードはこちらです↓

.archive-title .fa-tags::before { 
  content: "#";
  margin-right: -6px;
}

「margin-right: -6px;」で少し隙間を詰めていますので、お好みで調整してみてください。

タグクラウドのカスタマイズは以上です。サクッと変更できるわりには意外と雰囲気が変わったりするので、皆さんも試してみてくださいね。