(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

人気記事ランキング

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: 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); /*シャドー(影)*/
}

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

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

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

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】