「WordPress Popular Posts」のランキングをCSSで綺麗な見た目にカスタマイズする方法

悩む人

「WordPress Popular Posts」の人気記事ランキングがデフォルトだと見た目がシンプルなので，デザインを変えたいです。

けど，どうやってカスタマイズしたらいいんですか？

こんな質問にお答えします。

答える人

人気記事のランキングを作成して表示してくれるプラグイン「WordPress Popular Posts」をデフォルトの状態で設置すると，見た目がシンプルで目立ちません。

そこで今回は，「WordPress Popular Posts」の人気記事のランキング表示を綺麗な見た目にカスタマイズする方法を紹介します。

人気記事のランキングの設置をしようと思っていてまだ作成していない人は，まずは「WordPress Popular Posts」で人気記事を作成しましょう。

「WordPress Popular Posts」については，

プラグイン「WordPress Popular Posts」の設定手順【保存できない人必見】

で詳しく解説していますので，参考にしてください。

今回は，「WordPress Popular Posts」の人気記事のランキング表示を追加CSS機能を使ってカスタマイズする方法と，プラグインエディターで編集する方法を解説していきます。

それではやってみましょう！

追加CSSでスタイルを編集する

まずは管理画面から①「外観」を選択して→②「カスタマイズ」をクリックします。

「追加CSS」をクリックします。

①スタイルシートを編集するテキストエリアで，お好みのスタイルに編集します。

②「公開」をクリックします。

これでスタイルシートが反映されます。

また，もしCSS に慣れていなくて使えないという人は，現在の当ブログでの人気記事ランキングのスタイルを例を下に載せておきますので参考にしてください。

下記のコードをコピペすると上のランキングの画像と同じようになります。

ul.wpp-list li {
border-bottom: 1px solid #039BE5;
position: relative;
list-style: none;
}

ul.wpp-list li a.wpp-post-title {
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: #333;
margin: 10px 10px 10px 0px;
}

ul.wpp-list li a.wpp-post-title:hover {
color: #039BE5;
}

ul.wpp-list li img {
margin: 10px;
border: 2px solid #039BE5;
}

ul.wpp-list li img:hover {
border: 2px solid #ffd21c;
}

ul.wpp-list li:before {
content: counter(wpp-count);
display: block;
position: absolute;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #555;
color: #fff;
background-color: #039BE5;
padding: 3px 10px;
border-radius:50%;
z-index: 1;
margin-top: 5px;
}

ul.wpp-list li {
counter-increment: wpp-count;
}

ul.wpp-list li:nth-child(1):before{
background-color: #ffc800;
}

ul.wpp-list li:nth-child(2):before{
background-color: #bfbfbf
}

ul.wpp-list li:nth-child(3):before{
background-color: #e67e00;
}

「公開」や「下書き保存」ができない場合

「追加CSS」を編集して「公開」や「下書き保存」のボタンを押して保存しようとすると失敗するケースがあります。

その場合は，

• 追加CSSのテキストエリア内でコメントアウト/**/を使っている場合はコメントアウトを削除する
• レンタルサーバーのWAF機能を無効にしてから再度追加CSSを編集して保存する（保存できたら再度WAF機能を有効にする）

上記の方法で大体は解決できます。

「追加CSS」以外での編集方法

「WordPress Popular Posts」のデフォルトのスタイルは，プラグインエディターのページで確認できます。

①プラグインを選択します。→②プラグインエディターをクリックします。

「WordPress Popular Posts」の

wordpress-popular-posts/assets/css/wpp.css

で確認することができて，ここでCSSを編集することができます。

まとめ

悩んでいた人

「WordPress Popular Posts」のカスタマイズ方法がわかりました。

これから見た目のいいデザインにしていきたいです。

はい。

「WordPress Popular Posts」は今回紹介した方法以外にもカスタマイズができますので，色々と試してお気に入りの見た目にしてください。

答える人

また，WordPressでおすすめのプラグインの一覧については，

WordPressおすすめのプラグインまとめ【最適なものを厳選】

で紹介していますので，参考にしてください。

今回は以上になります。

それではまた！