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

スポンサーリンク

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

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

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

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

Page Builder

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

トップページ

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

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

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

HTMLソース

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

<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にはこの変更を反映したくない

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

プラグインの［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;
}

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

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

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

コメント

ホーム
トップ