WordPress Popular PostsのデザインをCSSで自由にカスタマイズする – きにぶろぐ.com

初心者ブロガーのフリーマンです。未経験から始めたワードプレスやSTINGER8などの使い方からカスタマイズ方法、アフィリエイト関連の内容を中心に、雑記にわたって気になることを楽しく発信するブログです。



プラグイン

WordPress Popular PostsのデザインをCSSで自由にカスタマイズする

  2017/09/08  2017/11/21

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレス(WordPress)で人気記事をサイドバーに設置し、ランキング順に表示させることができる「WordPress Popular Posts」プラグイン。

 

非常に簡単かつ便利なプラグインですが、デフォルトデザインの表示のままでは見た目が今ひとつなので、なんとかカスタマイズして変更したいと思われている方も多いでしょう。

そんな時はワードプレスの「CSS」を編集すれば、自分好みのデザインにアレンジすることができます。

 

そこで今回は「WordPress Popular Posts」のデザインを、「CSS」を使って自由にカスタマイズする方法についてご紹介したいと思います。

スポンサーリンク

WordPress Popular Postsをカスタマイズ

「WordPress Popular Posts」を導入した時の人気記事一覧は、以下のようなデザインとなっています。

 

 

各記事の間隔が狭く余白もない為、アイキャッチ画像が上下の記事画像とくっついてしまっていますし、タイトルリンクも下線があって少し見づらくなっています。

この部分をCSSでもっと見やすくキレイなものに改善していきます。

 

子テーマ内の「style.css」を編集する

親テーマでは何かと不都合がありますので、CSSファイルを編集する場合は必ず子テーマを使用するようにして下さい。

 

ワードプレスの管理画面から「外観」⇒『テーマの編集』をクリックして、ファイルの編集画面に移動します。

 

 

子テーマの「スタイルシート (style.css)」ファイル内に、以下のコードをコピー&ペーストで追記して下さい。

 

 

上記コードをそのまま反映させると、以下のようにデザインが変わります。

 

 

各記事の間に区切り線を追加したことと、記事のタイトルリンクの下線をなくすことで見やすくなりました。

 

また、画像やタイトルの位置、カーソルが乗った時(ホバー時)のタイトル色の変化などを自由に変更できます。

 

ランキングカウンターを追加する

人気記事のランキング順位を表示させたい時は、カウンターを追加する必要があるのでstyle.cssに以下のコードを追加します。

 

 

ここでは記事の右下に表示させていますが、「right」と「bottom」の部分を「top」と「left」に変更すれば、画像の左上に表示させることも可能です。

 

ただ、このままではランキング順位が全て「0」の状態で表示されてしまうので、先程追記した「ul.wpp-list li」のコード内に以下のコードを追加して修正します。

 

 

「カウント数」の部分を追加すると、ランキング順位が表示されるようになります。

 

 

カウンターのサイズなども自由に変更して使用できますので、お好みのデザインに調整してお使い下さい。

 

各順位のカウンター色を変更

今の設定では人気記事の各順位のカウンター色が全て同色となっているので、順位別に配色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。

 

 

ここでは「1位・2位・3位」まで背景色を指定していますが、同じようにコードを追加していくことで4位以降も変更することができます。

 

 

デフォルト状態の人気記事一覧の時と比較すると、見違えるようにデザインが良くなったのではないでしょうか。

 

スポンサーリンク

統計タグのカスタマイズ

ワードプレスのウィジェットを使って、「閲覧数(ビュー)」や「カテゴリー」などの統計タグを人気記事一覧に表示させることができます。

この統計タグもCSSを編集すれば、文字色や背景色などを簡単にカスタマイズすることが可能です。

 

今回は詳細なカスタマイズは行いませんが、変更される方の為にテンプレートコードを記載しておきます。

 

 

上記コードの「{}」内にカスタマイズしたいコードを追加して使用できますので、必要な統計タグを自分流にアレンジして下さいね。

 

これで「WordPress Popular Posts」のCSSカスタマイズは以上となります。

 

まとめ

人気記事一覧はブログやサイトの回遊率やユーザビリティの向上に必要なものです。

そんな人気記事を簡単に設置できる「WordPress Popular Posts」プラグインは便利ではありますが、デザインが初期状態ではその効果を上手く発揮できないかもしれません。

 

プラグイン機能を最大限に生かす為にも、CSSカスタマイズを行って見栄えの良いデザインとなるよう変更することをオススメします。

 

合わせて読んでほしい

ワードプレス(WordPress)のプラグイン10選!導入必須の絶対必要な機能

スポンサーリンク







この記事が気に入ったら
いいね!して頂けると喜びます

気になる最新情報をお届けします

フォロー・シェアする
最新情報を受け取る

-プラグイン

Related article -関連記事-
この記事を書いた人
フリーマン
フリーマン
1988年生まれで現在は兵庫県に在住しています。このブログは2017年8月から本格的にスタート。ブログ運営に関する内容を中心に生活で役立つこと、お金の節約術など興味のある情報を書いています。
New article -新着記事-

スポンサーリンク


管理人のフリーマンです。
29歳で現在は兵庫県に在住しています。
ブログ運営に関する内容を中心に興味のある情報を書いています。
役立つ記事があれば参考にして下さい。