人気記事ランキング
WordPressテーマ Cocoonの「人気記事ランキング」のカスタマイズについてまとめてみました。
テーマCocoonの人気記事ランキング
WordPressテーマ Cocoonで使われている「人気記事ランキング」は、次の様になっています。
非常にシンプルなものとなっています。
なお、WordPressテーマ Cocoonの新しいバージョンでは、人気記事ランキングの1～3位の背景色（1位：金色、2位：銀色、3位：銅色）が変わっています。
この「人気記事のランキング」に対して自分好みにカスタマイズしていきます。
人気記事ランキングのカスタマイズ
今回のカスタマイズの内容は、
- ランキング数字のデザインを変更する
- 順位の背景色を統一する
- タイトルを縦中央寄せにする
- タイトルフォントサイズ調整
- アイキャッチ画像にシャドー（影）を付ける
- アイキャッチ画像を角丸コーナーにする
となります。
カスタマイズ内容
「人気記事ランキング」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
background-color: #ffddee!important; /*ランキング数字の背景色を統一する*/
color:#f32469; /*ランキング数字のカラー*/
top: -4px;
left: -4px;
border-radius: 18px; /*角丸コーナー*/
border:solid 2px #f32469; /*ランキング数字の枠のカラー*/
width: 18px;
height: 16px;
line-height: 18px;
font-weight: bold;
font-style: oblique;
}
.popular-entry-card-title.widget-entry-card-title.card-title{ /*タイトル*/
/* height: 67px!important; /*メニュー縦幅設定*/
display: flex;
padding-top: 5px;
}
.popular-entry-card-title{ /*フォント*/
font-weight: bold; /*文字強調★*/
font-size: 14px;
}
@media screen and (max-width: 480px){ /*モバイル表示のフォント*/
.popular-entry-card-title{
font-size: 12px;
}
}
.popular-entry-card-link.a-wrap{ /*ランキング間の隔幅調整*/
padding-top: 2px;
padding-bottom: 2px;
margin-top: 2px;
margin-bottom: 2px;
}
.attachment-thumb120.size-thumb120.wp-post-image{ /*アイキャッチ画像*/
border-radius: 3px; /*角丸コーナー*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
カスタマイズ後の人気記事ランキング
今回のカスタマイズによって「人気記事ランキング」は、このようなブログのカラースタイルに沿ったデザインとなりました。
最後に
「人気記事ランキング」をカスタマイズしたことによって、「人気記事ランキング」が立体感となり、またタイトル文字を中央に位置したことでバランスが良くなり見やすくなりました。
また、人気記事ランキングの1～3位の背景色（1位：金色、2位：銀色、3位：銅色）を順位に関係無く統一することで、色の統一感を出すことが出来ます。
コメント