wordpress

WordPress Popular PostsをCSSカスタマイズしてカッコよくする方法。

投稿日:




このBLOGでも使っているwordpressプラグイン「WordPress Popular Posts」。

人気記事をランキング形式で表示できる優れものですが、デフォルトだと見た目が悪い。ということでCSSをカスタマイズして、見た目をカッコよくしたいと思います。

スポンサーリンク




「WordPress Popular Posts」は初期状態だとこう

WordPress Popular Postsは初期状態だとこんな外観。余白がなくサムネイル画像が上下でくっついてる。見づらい。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-08-7-22-53

「WordPress Popular Posts」をCSSカスタマイズ

さっそくカスタマイズを始めましょう。まずはCSSを編集して各順位のあいだに点線の区切り線を入れてみます。

「WordPress Popular Posts」のプラグインを編集する

ダッシュボード から「プラグイン」→「プラグイン編集」と進み、画面右上から「wordpress-popular-posts」を選択。さらにプラグインファイルの中から「wordpress-popular-posts/style/wpp.css」を選択。これでCSSファイルが編集できるようになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-10-08_16_00_07

各順位のあいだに点線の区切り線を入れる

CSSファイルの中で下記の記述を探す。

見つけたら、下記のように書き換えて「ファイルを更新」ボタンを押して見よう。

すると下記のように、点線の区切り線が入ります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-08-16-13-42

記事タイトルを黒い太字にして下線をなくす

これだけでもOKですが、もう少しカスタマイズ。記事タイトルの文字色(ブルー)と装飾(アンダーライン)を変更したいと思います。

CSSファイルの中で下記の記述を探す。

見つけたら、下記のように書き換えて「ファイルを更新」ボタンを押して見よう。

すると下記のように、記事タイトルが黒の太字になり、アンダーラインが無くなります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-08-16-31-47

まとめ

よく読まれている記事を表示するのに便利な「WordPress Popular Posts」。デフォルトだとイマイチな見た目も、CSSカスタマイズで簡単に改善できます。

ちなみにこのBLOGでも使っている有料テーマ「AFFINGER4 pro」なら、さらに細かくwordpress設定をカスタマイズできます。おすすめです♪

 







-wordpress
-,

Copyright© フリーランス航海日誌 , 2019 All Rights Reserved.