WordPress Cocoon

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

当サイトはアフィリエイト広告を利用しています。

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

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

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

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

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;」で少し隙間を詰めていますので、お好みで調整してみてください。

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

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. みずよ より:

    こんばんは。
    こちらの記事を参考にタグクラウドのデザインをカスタマイズして使わせていただいています。ありがとうございます。
    一ヶ所どうしてもダメなところがありまして、教えて頂けると嬉しいのですが。
    どうしてなのかアイコンが既存のものとFont Awesomeで変更したものが2つになって表示されてしまいます。
    宜しくお願いします。

    • DICEDICE より:

      コメントありがとうございます!
      Cocoonのバージョンが上がって少し仕様が変更になったせいですね。記事に「Cocoon バージョン2以上の場合」という部分を追加しましたので見てみてください。

  2. みずよ より:

    こちらそこありがとうございました、DICEさん。

    2つが表示されて気持ち悪かったのですが、バージョンアップが原因だったんですね。そう言えば、何も考えずアップデートのボタン押した気がします。

    合わせてFont Awesome 5での変更方法も教えて下さってありがとうございました。
    これを機に変えようかと思い5の方に切り替えてみましたが、
    Cocoonの管理画面自体がFont Awesome 5にはまだ対応していないのか、アイコンが全て□として表示されているのでどうしようかと躊躇してしまい4のままで変更しました。ってよりDICEさんのおかげで無事変更できました。

    CSSなど分かっていない初心者には本当にありがたい説明と解説だと思いました。しかも返事まで素早く下さって本当に助かりました。ありがとうございました。
    これからもよろしくお願いします。

  3. takaya より:

    はじめまして。
    こんばんは。
    こちらの記事を参考に、タグを変更し使わせていただいております。
    タグを選択し記事へページ移動した際の、上に表示されているタグも♯に変更したいのですが、お教えいただけますでしょうか。
    ちなみに、記事周りのカスタムもDICEさんの記事を参考にさせていただいております。
    ブログをはじめたばかりで勉強中ではありますが、まだ右も左も分からない初心者ですが宜しくお願い致します。

    • DICEDICE より:

      コメントありがとうございます!
      記事の最後のほうに追加しましたので見てみてください^^

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