WordPressCocoon

【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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ナナリズムダッシュ
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント