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

Cocoon 人気記事ウィジェット（のランキング表示）のデザインを色々作ったので、紹介します。
コピペOKです。

人気記事ウィジェットのカスタマイズについてはこちらの記事↓も参考にしてください。

１．三角形

.widget-entry-cards.ranking-visible .card-thumb::before {
background-color: transparent !important;
color:#333;
font-family: 'ZCOOL XiaoWei';
font-size: 15px;
font-style: italic;
z-index:3
}
.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: 3px;
position: absolute;
z-index:1
}

このブログや私のメインブログでも利用しているデザインです。
もちろん自由に使ってもらって構いません。

２．数字のみ

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: transparent !important;
 color: #333;
 font-size: 15px;
 font-style: italic;
}

一切の装飾を削ぎ落とし、数字のみを表示しています。
シンプルで良いのですが、アイキャッチ（サムネイル）画像によってはかなり見にくいデザインなので、なかなか使いにくいなという感じです。

３．丸

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #f1efef !important;
 border-radius: 15px;
 color: #333;
 font-style: italic;
}

数字の背景を丸型にしました。
こんな感じのデザインは色々なサイトでよく見る気がします。

４．右下だけカーブ、下だけ線あり

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #f1f0f0 !important;
 border-bottom-right-radius: 15px;
 color: #333;
 border-bottom: 1px solid #333;
 font-style: italic;
 left: -8px;
 top: -8px;
}

位置をすこしずらして、右下を丸めて、下だけ線の色をつけました。

５．葉っぱ（ラグビーボール？）型

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #e0d6d6 !important;
 border-bottom-right-radius: 20px;
 border-top-left-radius: 20px;
 color: #333;
 font-style: italic;
 left: -8px;
 top: -8px;
}

左上と右下を丸めて楕円形にしました。
葉っぱのような、ラグビーボールのような形です。黄色にすればレモンぽい？

６．はみ出しカーブ

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #fff !important;
 border-bottom-right-radius: 30px;
 color: #333;
 border-bottom: 1px solid #333;
 border-right: 1px solid #333;
 padding-right: 8px;
 padding-bottom: 8px;
 font-style: italic;
 left: -3px;
 top: -3px;
}

スタイリッシュでけっこう使いやすいデザインかな、と思います。
あえて線がはみ出しているところがポイント笑

７．丸ドット

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #fff !important;
 color: #333;
 border-radius: 15px;
 border: 1px dotted #ccc;
 font-style: italic;
 left: -8px;
 top: -8px;
}

線の色を変えれば、どんなデザインにも合わせやすそう。

線の種類はドット（dotted）にしていますが、細かい部分なので実線（solid）にしてもあまり変わりません。

８．二重丸

.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #fff !important;
 color: #333;
 border-radius: 15px;
 border: 2px double #ccc;
 font-style: italic;
 left: -8px;
 top: -8px;
}

地味だけどアクセントになる二重線。
線の色を濃くするとすこしうるさい感じになります。

９．風

.widget-entry-cards.ranking-visible .card-thumb::before {
　background-color: transparent !important;
　border-bottom-right-radius: 18px;
　color: #333;
　border-bottom: 5px double #dbd5b2;
　padding-right: 8px;
　font-style: italic;
}

風っぽい感じのデザイン。
これも数字だけのものと同じで見にくくなる可能性があるので注意。

１０．ボックス

.widget-entry-cards.ranking-visible .card-thumb::before { 
   background-color: #e8728c !important;
   left: -8px;
   top: -8px;
   opacity: 1;
   color: #333;
   font-style: italic;
}

Cocoonのデフォルトとほとんど同じですが、数字の位置を変えるだけでも印象が違って見えます。