WordPressCocoon

【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でアイコンを表示していましたが、今回はアイコンフォントではなくて「#」という普通の文字に変更しています。

変更前は以下のコードになりますので、Font Awesomeの他のアイコンを使いたい場合もこちらのコードを使ってください↓

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

タグの幅を広げない方法

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

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

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

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

comment

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