【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」デフォルトままなので、ボタンのようなリボンのようなリンクへのカスタマイズ方法をお伝えします!

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

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

スポンサーリンク

シェアする

あらくま

鉄道オタク&バスオタクで、ポケモンGOやら写真にもハマりだした中年オヤジ。この広い世間の片隅でひっそり生きてる中年オヤジが「ブログを始めたら何かが変わるかも?」なんていう安易な気持ちで書いています。お役に立てる記事をなかなか書くことはできないですが、ブログ道?を極めるべく奮闘努力しています。

フォロー


ページトップへもどる
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status