WordPress Popular Postsで作成した人気記事一覧にホバーエフェクトと番号順位を付ける方法

WordPress Popular Postsで人気記事一覧の表示方法は前回書きました。
もし導入されていない方は以下の記事を参考に設定していただけたらと思います。
https://xn--dckta2f5e8cqc.net/wp-plugin-wordpress-popular-posts/

人気記事一覧の表示できたのはいいのですが、デザインが少し寂しいですよね?
せっかくアイキャッチが付いてるんですから、ぱっと目を引くようにカスタマイズしてみましたので、ちょこっとCSSをコピするだけでいい感じに出来ると思います。

スポンサーリンク

順位を表示する

まず、以下のコードをstyle.css「スタイルシート」に貼り付けて欲しい。

上記のコードを説明すると、「.wpp-list」は「WordPress Popular Posts」のデフォルトのセレクタ、んでこれの li に疑似要素「:before」をつかって、ナンバーを付ける。

これでリストタグに、番号順位が表示されてる状態。

カウンター変数名に「wpp-ranking」を使用していますが、他のものと衝突しなければ何でもいいようですが、参考にさせていただいたサイトのものをお借りしました。

CSS で装飾する

このままだとデザインがダサいので、スタイルを整えていきましょう。

上記のコードを説明するとこうなる。

まず、リストスタイルタイプの「・」というやつを消す。

数値の背景にrgbaを使って少し透かす「半透明」

そして、フォントカラーを白色にし、フォントサイズとパディングの余白などはお使いのテーマに合わせて欲しい。

1~3までの色を変える

必要性はあるかどうかは別にして、デザイン的に悪くわないだろう。
チャイルドの横 (1) この部分がランキングなっているので、好みの色に変える場合は。「background」を変えてみてください。

この時点で、以下のようなスタイルになっていれば正解。

ホバーエフェクトを付ける

大体この辺で大丈夫なのだが、少しサムネイルにカーソルが乗った時にエフェクトを入れたい。
ということで以下のコードを付け足して頂きたい。

フィルターはIEの対策、opcityで以下のように半透明のエフェクトをかけている。
この 0.70という部分を変更すれば、通過度が変わるので必要ならば変更してみてもいいかも。

これでカスタマイズは完了です。
あと、私の場合はボーダーラインを入れてリストを見やすくしてるつもりです。
必要であれば、入れてみてください説明するほどでもないですが、一応載せときます。

これで、以下の画像のようになるはずです。
少し以前のものより見やすくなってると思うのですが… どうでしょうか?

んまぁまぁ、この辺はお好みで。

ではまた、何かいいデザインが浮かんだら追記しておきます。