WordPressCocoon

【WordPress】人気記事ランキングをカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

人気記事ランキング

WordPressテーマ Cocoonの「人気記事ランキング」のカスタマイズについてまとめてみました。

テーマCocoonの人気記事ランキング

WordPressテーマ Cocoonで使われている「人気記事ランキング」は、次の様になっています。

【WordPress】人気記事ランキングをカスタマイズする

非常にシンプルなものとなっています。

なお、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: 6px; /*角丸コーナー*/
  border:solid 2px #f32469; /*ランキング数字の枠のカラー*/
  width: 15px;
  height: 12px;
  line-height: 12px;
  font-weight: bold;
  font-style: oblique;
}
/*タイトル縦中央*/
.popular-entry-card-title.widget-entry-card-title.card-title{
  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  align-items: center; /*縦中央寄せ*/
}
/*フォントサイズ*/
.popular-entry-card-title{
  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: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
}

カスタマイズ後の人気記事ランキング

今回のカスタマイズによって「人気記事ランキング」は、このようなブログのカラースタイルに沿ったデザインとなりました。

【WordPress】人気記事ランキングをカスタマイズする

最後に

「人気記事ランキング」をカスタマイズしたことによって、「人気記事ランキング」が立体感となり、またタイトル文字を中央に位置したことでバランスが良くなり見やすくなりました。

また、人気記事ランキングの1~3位の背景色(1位:金色、2位:銀色、3位:銅色)を順位に関係無く統一することで、色の統一感を出すことが出来ます。

コメント