[無料WordPressテーマ] Luxeritasでグリッドレイアウト3列以上の時に最終行が両端揃えになるのを何とかする方法

2018/02/13WordPressテーマ

無料WordPressテーマLuxeritasではカスタマイザーから簡単に記事一覧の表示タイプをグリッド化したり、更にそのカラム数も1～4の範囲で変更出来るというこの上なく便利な機能が標準装備されていますが、実はグリッドレイアウトを3列以上に設定した時に”ある現象”が発生する場合があります。

これはテーマ側に問題があるわけでもバグでもありませんが、私としては現在準備中のサイトの為に何とかしたい現象だったので、無い知恵を絞ってその対策を考えてみました。

コンテンツ

1. 最終行だけ両端揃え・均等割付になる
2. 疑似要素でダミーの枠を追加する
3. 記事一覧中央ウィジェットは念入りにチェックを
4. これで3列以上のグリッドも大丈夫

最終行だけ両端揃え・均等割付になる

その”ある現象”とはグリッドレイアウト3列以上でかつ最終行の表示件数が1以外の端数の時に起こる現象で（わかりやすく書いたつもりですが合ってるかな…）flexboxと言うかjustify-contentの仕様によって最終行だけ両端揃え、または均等割付したように見えてしまうというものです。

2列の時もそう見えないだけで、同じ状態なんだろうとは思いますけど。

と言うか、元々そういうものなので本当は何もおかしくないんですが、途中まではいい感じで均等に割って最後だけ左詰めでよろしくね？とか都合のいい事を言ってるのはむしろこちらだったりします。

3列で最終行が2記事の場合

4列で最終行が2記事の場合

4列で最終行が3記事の場合

別におかしくなくね？という方はそのままで全然構いませんが、私としてはやっぱりちょっと気になっちゃうので、何とかしてこれを調整してみたいと思います。

疑似要素でダミーの枠を追加する

CSSの内容だけ先に説明しますと、3列の時は疑似要素のafterを使って、4列の時は1つでは足りないので更にbeforeも使ってダミーの枠を一覧の後ろに追加する、という感じでしょうか。afterは文字通り後ろなのでそのままで問題ありませんが、beforeの方は一覧の前に入ってしまうのでorderを設定して表示上は後ろに持っていきます。

正直なところ理屈はいまいちよくわかってませんが（大丈夫かいな）一覧がキリのいいところで終わっている場合はレイアウトに影響しないのでその点は安心して良さげです。

メディアクエリの部分についてですが、グリッドレイアウトを4列に設定している場合、768px～1199pxの範囲では3列表示になるのでダミーのサイズもそれに合わせて調整しています。

グリッド3列の場合

/* グリッド3列の場合 */
div#tile-3::after,
div#card-3::after {
	content: '';
	display: block;
	width: 32.5%;
}

グリッド4列の場合

/* グリッド4列の場合 */
div#tile-4::before,
div#tile-4::after,
div#card-4::before,
div#card-4::after {
	content: '';
	display: block;
	width: 24.5%;
	order: 1;
}

@media (min-width: 768px) and (max-width: 1199px) {
	div#tile-4::before ,
	div#card-4::before {
		width: 32.5%;
	}
}

本当はこれだけでうまくいくはずなんですが、Luxeritasの場合は記事一覧の要素内に記事一覧下ウィジェットとページャーが入ってくるので、それを更にorderで後ろに下げます。

記事一覧下ウィジェットとページャー対応

/* 記事一覧下ウィジェットとページャー対応 */
#list #bottom-area,
#list .posts-list-under-widget {
	order: 2;
}

実は最初この方法を思いつかなくて、Luxeritas以外のテーマでやるしかないかな…と諦めかけましたがキュピーン！と閃いた事を試したらうまくいってホっとしました。

尚、上記のコードは3列・4列それぞれタイル型とカード型を含めてあるので、全部入ってても良ければそのままコピペでOKですが、不要な部分があれば自由に削除してもらっても結構です。ただし、消しちゃいけない部分は消さないで下さいね？

例えば「わしゃタイル型の3列しか使わん！」という場合は

タイル型3列の場合

/* タイル型3列の場合 */
div#tile-3::after {
	content: '';
	display: block;
	width: 32.5%;
}

/* 記事一覧下ウィジェットとページャー対応 */
#list #bottom-area,
#list .posts-list-under-widget {
	order: 1;
}

こんな感じでよろしいかと。

それほどの量でも無いと思いますんで、とりあえずはまるっとコピペでいっちゃって、後から要らないと思えば部分的に削除するのもありだと思いますよ？

記事一覧中央ウィジェットは念入りにチェックを

3列以上のグリッドレイアウトの場合、タブレットサイズでカラムが1つ減るので、想定外の位置に記事一覧中央ウィジェットが挿入される事があります。また、記事一覧中央ウィジェットが挿入された場合、その上に表示されている件数によっては両端揃え・均等割付になりますが、当エントリーの方法ではさすがにそこまでは回避出来ません。

何れにしても非常に便利な機能を持ったウィジェットですが、3列以上のグリッドレイアウトで利用する場合は念入りにチェックした方がよろしいかと思います。

私は制御出来ないと判断したので無しの方向で考えています。