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

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

カスタマイズ内容

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

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

/************************************
** 人気ランキングウィジェット表示
************************************/
.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

opacity: 0.9;

さいごに