Cocoonの人気記事ウィジェットのカスタマイズ方法

WordPressテーマCocoonの人気記事ウィジェットのカスタマイズ方法です。
ランキング順位の表示スタイルを変更します。

デザインサンプルはこちら
→Cocoon 人気記事ウィジェットのデザインサンプル9

カスタマイズ内容

Cocoonであらかじめ用意されている機能の一つに、「人気記事」ウィジェットがあります。
↓デフォルト表示だとこんな感じです。

このランキング順位のスタイルを以下↓のようにカスタマイズしました。

順位（数字）を囲っている四角形を三角形に変更し、色も薄いグレーに統一して少し透過させています。
フォントはウェブフォント（Google Fonts）を利用しています。

CSSのコードを下に載せるので、コピペして色を変えたりして使ってください。

https://simplicity-hacks.tokyo/?p=524

人気記事ランキング順位のスタイルカスタマイズ方法

CSS（スタイルシート /style.css）にコードを貼り付ける

子テーマ（Cocoon child）のスタイルシート (style.css）を開き、以下のコードを貼り付けて下さい。

スタイルシートはwordpress管理画面左側にある「外観」→「テーマエディター」、またはFTPソフトでサーバからダウンロードして編集することができます。

僕はこれくらいの軽い編集なら、「外観」→「テーマエディター」でやってしまいます。

/************************************
** 人気ランキングウィジェット表示
************************************/
.widget-entry-cards.ranking-visible .card-thumb::before {
    background-color: transparent !important;
    color:#333;
    font-size: 15px;
    font-family: 'ZCOOL XiaoWei';
    font-style: italic;
}
.popular-entry-card::before{
    content: "";
    border-bottom: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 24px solid #EFECE9;
    border-left: 24px solid #EFECE9;
    opacity: 0.9;
    top: 0;
    position: absolute;
}

ウェブフォントについて

上に載せたコードのこの部分

font-family: 'ZCOOL XiaoWei';
font-style: italic;

はウェブフォントの指定です。
GoogleFontsを利用しています。

デフォルトのフォントのままで良ければこの部分は消してください。
ウェブフォントを使うと数字だけでも意外と印象が変わるので、おすすめです。

色と不透明度

上に載せたコードのこの部分

 border-top: 24px solid #EFECE9;
 border-left: 24px solid #EFECE9;
 opacity: 0.9;

では数字の背景の三角形の色と不透明度を指定しています。

#EFECE9の部分を変更すれば色を変えることができます。
また、border-topとborder-leftの色を違う色にすることで、ツートーンカラーのデザインにすることもできます。

opacity: 0.9;

の数字を変更することで、不透明度を設定することができます。
透過させない場合は、この1行を削除すればOKです。

さいごに

Cocoonは無料テーマとは思えないほど高機能なテーマですが、利用者が多いためデザインのカブりも多いです。
今回のカスタマイズはCSSのコピペだけで簡単に実装できるので、是非アレンジして使ってみてください。

人気記事ウィジェットのデザインサンプルはこちら

https://simplicity-hacks.tokyo/?p=1623