どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス(WordPress)で人気記事をサイドバーに設置し、ランキング順に表示させることができる「WordPress Popular Posts」プラグイン。
非常に簡単かつ便利なプラグインですが、デフォルトデザインの表示のままでは見た目が今ひとつなので、なんとかカスタマイズして変更したいと思われている方も多いでしょう。
そんな時はワードプレスの「CSS」を編集すれば、自分好みのデザインにアレンジすることができます。
そこで今回は「WordPress Popular Posts」のデザインを、「CSS」を使って自由にカスタマイズする方法についてご紹介したいと思います。
WordPress Popular Postsをカスタマイズ
「WordPress Popular Posts」を導入した時の人気記事一覧は、以下のようなデザインとなっています。
各記事の間隔が狭く余白もない為、アイキャッチ画像が上下の記事画像とくっついてしまっていますし、タイトルリンクも下線があって少し見づらくなっています。
この部分をCSSでもっと見やすくキレイなものに改善していきます。
子テーマ内の「style.css」を編集する
親テーマでは何かと不都合がありますので、CSSファイルを編集する場合は必ず子テーマを使用するようにして下さい。
ワードプレスの管理画面から「外観」⇒『テーマの編集』をクリックして、ファイルの編集画面に移動します。
子テーマの「スタイルシート (style.css)」ファイル内に、以下のコードをコピー＆ペーストで追記して下さい。
/*-- 人気記事デザイン --*/
ul.wpp-list li {
border-bottom: 1px dashed #79c06e;/*記事間の点線と色*/
position: relative;/*相対位置*/
}
ul.wpp-list li img {/*アイキャッチ画像*/
margin: 10px 10px 10px 0px;/*画像の余白*/
padding: 3px;/*画像の位置*/
}
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
display: block;/*ブロック形式で表示*/
font-size: 15px;/*文字サイズ*/
color: #333;/*文字色*/
padding: 12px;/*タイトル位置*/
text-decoration: none;/*タイトルの下線なし*/
}
ul.wpp-list li a.wpp-post-title:hover {
color: #4169e1;/*ホバー時のタイトル色*/
}
上記コードをそのまま反映させると、以下のようにデザインが変わります。
各記事の間に区切り線を追加したことと、記事のタイトルリンクの下線をなくすことで見やすくなりました。
また、画像やタイトルの位置、カーソルが乗った時(ホバー時)のタイトル色の変化などを自由に変更できます。
ランキングカウンターを追加する
人気記事のランキング順位を表示させたい時は、カウンターを追加する必要があるのでstyle.cssに以下のコードを追加します。
ul.wpp-list li:before {/*ランキングカウンター全体*/
content: counter(wpp-count);/*カウンターを表示*/
display: block;/*ブロック形式で表示*/
position: absolute;/*絶対位置*/
font-size: 16px;/*数字サイズ*/
font-weight: bold;/*数字を太字に*/
color: #fff;/*数字の色*/
background-color: #333;/*背景色*/
padding: 5px 15px;/*縦と横の幅*/
border-radius: 6px;/*角の丸み*/
right: 0;/*右からの位置*/
bottom: 0;/*下からの位置*/
opacity: 1;/*透明度*/
z-index: 5000;/*重なりの順序*/
}
ここでは記事の右下に表示させていますが、「right」と「bottom」の部分を「top」と「left」に変更すれば、画像の左上に表示させることも可能です。
ただ、このままではランキング順位が全て「0」の状態で表示されてしまうので、先程追記した「ul.wpp-list li」のコード内に以下のコードを追加して修正します。
ul.wpp-list li {
counter-increment: wpp-count;/*カウント数*/
}
「カウント数」の部分を追加すると、ランキング順位が表示されるようになります。
カウンターのサイズなども自由に変更して使用できますので、お好みのデザインに調整してお使い下さい。
各順位のカウンター色を変更
今の設定では人気記事の各順位のカウンター色が全て同色となっているので、順位別に配色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。
ul.wpp-list li:nth-child(1):before{/*ランキング1*/
background-color: #FBCC54;/*背景色*/
}
ul.wpp-list li:nth-child(2):before{/*ランキング2*/
background-color: #B7BFC1;/*背景色*/
}
ul.wpp-list li:nth-child(3):before{/*ランキング3*/
background-color: #D47B16;/*背景色*/
}
ここでは「１位・２位・３位」まで背景色を指定していますが、同じようにコードを追加していくことで４位以降も変更することができます。
デフォルト状態の人気記事一覧の時と比較すると、見違えるようにデザインが良くなったのではないでしょうか。
統計タグのカスタマイズ
ワードプレスのウィジェットを使って、「閲覧数(ビュー)」や「カテゴリー」などの統計タグを人気記事一覧に表示させることができます。
この統計タグもCSSを編集すれば、文字色や背景色などを簡単にカスタマイズすることが可能です。
今回は詳細なカスタマイズは行いませんが、変更される方の為にテンプレートコードを記載しておきます。
.wpp-comments {/*コメント*/
}
.wpp-views {/*ページビュー*/
}
.wpp-author {/*投稿者*/
}
.wpp-date {/*日付*/
}
.wpp-category {/*カテゴリー*/
}
上記コードの「{}」内にカスタマイズしたいコードを追加して使用できますので、必要な統計タグを自分流にアレンジして下さいね。
これで「WordPress Popular Posts」のCSSカスタマイズは以上となります。
まとめ
人気記事一覧はブログやサイトの回遊率やユーザビリティの向上に必要なものです。
そんな人気記事を簡単に設置できる「WordPress Popular Posts」プラグインは便利ではありますが、デザインが初期状態ではその効果を上手く発揮できないかもしれません。
プラグイン機能を最大限に生かす為にも、CSSカスタマイズを行って見栄えの良いデザインとなるよう変更することをオススメします。
| 合わせて読んでほしい |
