【CSS】WordPress Popular PostsのCSS（wpp.css）をカスタマイズ

こんにちは。
正解がわからない。
只野です。

結構前から私のブログのサイドバーに表示している「人気の記事」
これのデザインをカスタマイズしたいと思っていました。
プラグインを使用しているのでCSS触るのもなんだかめんどくせ←
こんな形で放置していたのですが、やっぱりデザインを変更してみたくなったので挑戦です。

まず私が人気の記事を表示している方法はWordPressのプラグイン「WordPress Popular Posts」を使用しています。
これとカテゴリー毎に人気記事の表示ができるということで、WordPress Popular Postsの拡張プラグインの「wpp-plus-widget」も使用しています。
カテゴリー毎の人気記事表示はうまく動作していない感じがするので、これについては時間がある時に調査ですかね。
私の使い方が間違っている可能性が大ですが笑

上記2点の導入方法についてはWebで調べれば出てくるので、興味ある方は調べて導入してみてください。
私は2点については説明できるほどプロフェッショナルではないので記載しません笑

はい。
そして導入してみたは良いけれど、そのままサイドバーに表示しただけだとレイアウトが不格好なんですよね。
ウィンドウを縮小したりするとレイアウト崩れたりしていました。

私が求めるレイアウトとしては

この状態が固定されているのが理想です。
画像の左上に表示数が重なり、タイトルエリアは文字数により折り返して表示をしたいです。

はい。
それではCSSのカスタマイズをしていきます。

wpp.cssを有効にする。

「WordPress Popular Posts」のCSSをカスタマイズするにはまずは「wpp.css」を使用できるようにしなくてはなりません。
「wpp.css」はプラグインで使用しているcssになります。
WordPress Popular Postsを使用して人気記事を表示している場合はwpp.cssで指定されてるスタイルが適用されています。

導入方法は簡単です。
自身が使用しているテーマフォルダにコピーして配置するだけです。

配置場所としては環境により違いますが、大体の方が下記の場所になるかと思います。

wpp.cssをコピーする場所

自身のサイト環境/wp-content/plugins/wordpress-popular-posts/public/css

プラグインフォルダ「css」内の「wpp.css」をコピーします。

wpp.cssの配置場所

自身のサイト環境/wp-content/themes/自身が適用しているテーマ

コピーした「wpp.css」を上記のフォルダへ配置します。これだけです。
配置はftpソフトなり自身の慣れている方法で行ってください。
これでWordPress Popular Postsを使用した場合のcssカスタマイズの第一段階が終了です。

いざカスタマイズ！

はい。
カスタマイズする時はどのスタイルがどこに適用されているかまずは調査する必要がありますね。

私が確認したところ「wpp.css」内で私が求める形に修正する場合に、対象となるcssクラスは下記でした。

クラス名 用途
.wpp-list li 記事単位の枠
.wpp-thumbnail 記事単位の画像
.wpp-post-title 記事単位のタイトル
.wpp-views 記事単位の表示件数

私のブログのサイドバーで説明すると下記の適用状態になります。

では上から順にカスタマイズしていきます。

.wpp-list li

記事単位の枠を修正します。

：デフォルト

.wpp-list li {
    overflow: hidden;
    float: none;
    clear: both;
}

：カスタマイズ

.wpp-list li {
    overflow: hidden;
    float: none;
    clear: both;
    --枠の下線（点線）
    border-bottom:dotted 1px #303030;
    --枠外のスペース（下スペースを指定）
    margin: 0 0px 10px 0;
    --配置設定（後の配置指定で必要）
    position:relative;
    --改行なし
    white-space: nowrap;
}

このように5行目以降追加しました。

.wpp-list li a

：追加

.wpp-list li a {
    display: inline-block;
}

次に「画像とタイトル」を常に横並びにしたいので、デフォルトスタイルにはありませんが、上記指定を追加します。
これをする事で、リンクを横並びで表示してくれます。
WordPress Popular Postsを使用すると、画像とタイトルは<a>で作成されるのでまとめて適用します。

.wpp-thumbnail

記事単位の画像に適用されているスタイルを修正します。

：デフォルト

.wpp-thumbnail {
    display: inline;
    float: left;
    margin: 0 5px 0 0;
    border: none;
}

：カスタマイズ

.wpp-thumbnail {
    margin: 0 5px 0 0;
}

marginだけ残しました。

.wpp-post-title

記事単位のタイトルに適用されているスタイルのカスタマイズです。

：デフォルト

.wpp-post-title {
}

：カスタマイズ

.wpp-post-title {
    --上寄せ
    vertical-align:top;
    --スペース（右スペースを指定）
    margin: 0 8em 0 0;
    --改行あり
    white-space: normal;
}

右スペースがないと変な枠幅を取るので指定しました。

.wpp-views

最後に記事単位の表示件数です。

：デフォルト

.wpp-views {
}

：カスタマイズ

.wpp-views {
    --配置設定
    position:absolute;
    --上位置
    top:5px;
    --左位置
    left:5px;
    --背景色
    background-color: #FFFFFF;
}

表示件数は画像に重ねたかったので、配置設定をしています。
最初に.wpp-list liで配置設定をしているのはこのスタイルを適用させるためです。

これで全てのカスタマイズが完了しました。
結果的にこのように表示されます。

求めている状態にすることができました。
今のところウィンドウ幅によりタイトルサイズが変更されるようになっているので、スマートフォンで表示しても大丈夫かと思います。
ダメだったらまた修正するだけですが笑

カスタマイズ全体

.wpp-list li {
    overflow: hidden;
    float: none;
    clear: both;
    --枠の下線（点線）
    border-bottom:dotted 1px #303030;
    --枠外のスペース（下スペースを指定）
    margin: 0 0px 10px 0;
    --配置設定（後の配置指定で必要）
    position:relative;
    --改行なし
    white-space: nowrap;
}

.wpp-list li a {
    display: inline-block;
}

.wpp-thumbnail {
    margin: 0 5px 0 0;
}

.wpp-post-title {
    --上寄せ
    vertical-align:top;
    --スペース（右スペースを指定）
    margin: 0 8em 0 0;
    --改行あり
    white-space: normal;
}

.wpp-views {
    --配置設定
    position:absolute;
    --上位置
    top:5px;
    --左位置
    left:5px;
    --背景色
    background-color: #FFFFFF;
}

本日はこの辺で

関連記事:

【CSS】見出し用のブログパーツでも作る 【CSS】画像付きの見出しスタイルが欲しい

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です