【WordPress Popular Posts】人気エントリー順位の表示をカスタマイズ!

WordPress Popular Postsで表示される順位をカスタマイズする方法 ブログ運営

「これをブログに書いてみようかな?」なんて思って溜めたネタだけはけっこうあるのに、なかなかブログを更新できないでいる、あらくま(@sa_arakuma)です。

今回は「WordPress Popular Posts」で表示している人気エントリーの順位表示のカスタマイズ方法をお伝えします。

ちょっとしたカスタマイズですけども、同じように「WordPress Popular Posts」で人気エントリーを表示しているブログとひと味ちがうランキングになりますよ!

スポンサーリンク

カスタマイズ前後の人気エントリーの表示

まずは、人気エントリーで表示される順位のカスタマイズ前後での違いをみていただきましょう。

カスタマイズ前
カスタマイズ前
カスタマイズ後
カスタマイズ後

見ていただいたらどこをカスタマイズしたかおわかりいただけると思いますが、簡単にカスタマイズしたことをお伝えしておきます。

カスタマイズしたこと
  • 背景色
  • 順位のテキストサイズ

背景色の変更

順位が表示されている場所の背景色を以下のように変更しました!

  • 1位:金
  • 2位:銀
  • 3位:銅
  • 4位以降:サイトの背景色と同じに

1・2・3位はメダルの色とあわせたかったんですよ(*ノω・*)テヘ

順位のテキストサイズ

順位のテキストサイズを以下のように変更しました!

  • 1位:22px
  • 2位:20px
  • 3位:18px
  • 4位以降:「WordPress Popular Posts」デフォルト仕様

1位から順にテキストの大きさが小さくなるようにしています。「なんかそうしたほうがカッコイイ!」って思ったもんで。

カスタマイズ方法

それでは実際に「style.css」に記述したコードをご紹介しましょう。

/************************************
人気記事順位
************************************/
/*1位*/
.ranking_list ul li:nth-child(1):before {
 background-color: #ffd700;
 font-size: 22px;
 font-weight: 700;
 opacity: 1;
}
/*2位*/
.ranking_list ul li:nth-child(2):before {
 background-color: #a5a5a5;
 font-size: 20px;
 font-weight: 700;
 opacity: 1;
}
/*3位*/
.ranking_list ul li:nth-child(3):before {
 background-color: #88672d;
 font-size: 18px;
 font-weight: 700;
 opacity: 1;
}
/*4位以降*/
.ranking_list ul li:nth-child(n+4):before {
 background-color: #bed2c3;
 opacity: 1;
}

このコードをそのままコピーして「style.css」へ貼り付ければ、当ブログと同じ人気エントリーの順位表示になるはずです。

背景色や文字色、文字の太さなどはお好みに変えて使ってください。

おわりに

「WordPress Popular Posts」デフォルト仕様じゃ物足りない! なんて場合の参考になれば幸いです。

また、テーマ「Simplicity2」をお使いで『エントリーカード全体をリンク化』されていて、人気記事ランキングも同じように全体をリンク化したい場合は、以下のエントリーを参考になさってみてください。

【Simplicity2×WordPress Popular Posts】新着記事と人気記事のリンクをボタン化する方法!
Simplicity2で「エントリーカード全体をリンク化」をしても、新着記事と人気記事のリンクは「WordPress Popular Posts」デフォルトままなので、ボタンのようなリボンのようなリンクへのカスタマイズ方法をお伝えします!

今回も最後までお付き合いくださって、ホントにありがとうございました! また次回お会いできるのを楽しみにしています!!

それでは次回までごきげんよう!

あらくま
列車やバスに乗って全国各地を訪れるのが趣味な中年オヤジ。現在は2周目となるJR全線完乗、私鉄と公営鉄道と第三セクター線の初完乗を目指して全国各地を乗り鉄旅をしています。
あらくまをフォローする
ブログ運営
スポンサーリンク
あらくまをフォローする
青春18きっぷ&お得なきっぷで乗り鉄の旅ブログ
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus