コンテンツ系のプラグインをカスタマイズする手順（Simplicity2環境）

2018.02.19

「Popular Posts」や「Related Posts」など、任意のところにコンテンツを挿入するプラグインを使うことが多いと思います。
コンテンツの配置によって、ディフォルトのスタイルシートのデザインでは満足できない時があります。

「Popular Posts」をトップページに使っている、当サイトの場合を例にして、好みのデザインに変更するカスタマイズ手順を記録しておきます。

固定ページを「Page Builder by SiteOrigin」でレイアウト

当サイトのトップページは「Page Builder by SiteOrigin」で要素をレイアウトして、コンテンツは「Popular Posts」と「新着記事」だけで構成しています。

「Popular Posts」はカテゴリ別に表示させるようにして、各カテゴリの記事数は３個にしています。

上の画像で分かるように１番目の記事と２番目の記事の間の余白が無く、窮屈な感じがします。もう少し間隔があると、すっきりして窮屈感がなくなります。

「Popular Posts」のコンテンツの配置については、プラグインのファイルの中の［public］→［css］→［wpp.css］にコードが書かれていますが、記事のリスト間隔については特に書かれていません。

そこで、トップページのソースを確認します。

１番目の記事と２番目の記事の間隔に関係する部分は次の通りです。

<ul class="wpp-list wpp-list-with-thumbnails">
<li>
サムネイル画像
記事タイトル
記事抜粋
<span class="wpp-meta post-stats"><span class="wpp-views">ビュー数</span> | <span class="wpp-category">カテゴリ: カテゴリ名</span></span>
</li>
<li>
サムネイル画像
記事タイトル
記事抜粋
<span class="wpp-meta post-stats"><span class="wpp-views">ビュー数</span> | <span class="wpp-category">カテゴリ: カテゴリ名</span></span>
</li>
</ul>

記事リストの間隔を広げるには、Simplicity2のスタイルシートを変更する必要があります。変更する部分は下です。

ただ、ここの変更を行うと二つ問題が生じます。

Simplicity2のアップデートの度にstyle.cssを修正しなければならない
サイドバーのPopular Postsにはこの変更を反映したくない

親テーマのスタイルシートの変更をしないで、子テーマでの追記でなんとか方法はないかを考えてみると、ビュー数 | カテゴリ: カテゴリ名の部分に余白を多くするコードを追記する方法があります。

プラグインの［wpp.css］には次のコードがあります。

	/* Stats tag styles */
		.wpp-meta, .post-stats {
			display: block;
			font-size: 0.8em;
			font-weight: bold;
		}

marginやpaddingの指定はないので、Simplicity2の子テーマに追記するだけで思うようにできます。

ついでに文字をグレーに変え、ボーダーをつけてみたのが下の画像です。

子テーマに追記したコードは以下です。

/*popular-postsの下マージン*/
.wpp-meta{
	margin-bottom: 30px;
	border-bottom: dotted #999 1px;
	color: #999;
}

記事の間隔が開いて見やすくなりました。

以上、手順をおさらいするとこんな感じです。

ブラウザでソースを確認し、修正したい部分の要素を確認する
確認した要素のスタイルを既存のCSSファイルで確認する
コードの追記で出来る場合には「子テーマ」に追記する