小さめの画像付きリストをホームページ上に並べる場合の、(少々ややこしい)条件設定を考えてみた。

条件

項目の総数によって、レイアウトを柔軟に変える。

複数行にわたって並べ、1行にできるだけ多くの項目を配置するようにする。

配置数は、横1行に最低で2つ、最高で4つまで。

新しいものをクローズアップする感じにしたいので、最初の方で1行に少なく配置する。

できるだけデザインにばらつきが出ないように、行による配置数は大きく変わらないようにする。(差は1個のみ許容)

上の条件を満たすために、1行に配置する数をざっと書き出してみる。

総項目数 -> 1行の項目数
1 -> 2
2 -> 2
3 -> 3
4 -> 4
5 -> 2 3
6 -> 3 3
7 -> 3 4
8 -> 4 4
9 -> 3 3 3
10 -> 3 3 4
11 -> 3 4 4
12 -> 4 4 4
13 -> 3 3 3 4
14 -> 3 3 4 4
15 -> 3 4 4 4
16 -> 4 4 4 4
17 -> 3 3 3 4 4
18 -> 3 3 4 4 4
19 -> 3 4 4 4 4
20 -> 4 4 4 4 4
21 -> 3 3 3 4 4 4
22 -> 3 3 4 4 4 4
23 -> 3 4 4 4 4 4
24 -> 4 4 4 4 4 4
25 -> 3 3 3 4 4 4 4
26 -> 3 3 4 4 4 4 4
27 -> 3 4 4 4 4 4 4
28 -> 4 4 4 4 4 4 4
29 -> 3 3 3 4 4 4 4 4
30 -> 3 3 4 4 4 4 4 4
31 -> 3 4 4 4 4 4 4 4
32 -> 4 4 4 4 4 4 4 4
(…以下略)

上記のように書き出して調べた結果、3個配置を最初からいくつ目まで適用するかがポイントで、その後は全て4個配置にすれば良いことが判明。
またこの「いくつ目」の数字は、最初期を除いて9→6→3→0で循環していることも分かる。

よってまずはこの「いくつ目」を、項目総数を基にして算出する関数を作成。

9 - ((項目総数 - 1) % 4) * 3;

この数字を基本にループを組むが、1行に2個のレイアウトが入ってくる項目総数1個、2個、5個の場合については特に例外としてif文で除外する。

以上を元に作成した、条件を満たす判定コードは以下の通り。

【PHP】

<?php

//$post_sumは項目総数。今回はテストのためループさせる。

for($post_sum = 1; $post_sum <= 50; $post_sum++){

	$dec_form =  9 - (($post_sum - 1) % 4) * 3; //キーパラメーター算出

	$ans = "4個"; //基本

	if ($dec_form != 0) {
		$ans = $dec_form."番目まで3個、以下".$ans; //3個配置を付加
	}
	if ($post_sum - $dec_form < 0) {
		$ans = "2番目まで2個、以下3個"; //1、2、5個の場合の例外付加
	}

	echo $post_sum." → ".$ans."<br />"; //確認用の表示

}

?>

【実行結果】

出力結果

(項目総数1個~6個までは不要な設定もくっついてくるが、データが途中で尽きて結果として正しいレイアウト出力になるため、そのまま無視。)

実際の使用の仕方は、上記コードをwordpressのhead.php内に組み込み、特定のカテゴリーの投稿数を基数($post_sum)として判定、結果により別々のCSSを読み込むためのHTMLを出力する。
同じプロパティで値の異なる複数のCSSを準備し、各々のCSS内で「n番目は××」といった設定を細かく行っていく。

ちなみに横並びにはここぞとばかりにfloat: left;が活躍。
2個向け(おおよそ50%)、3個向け(おおよそ33%)、4個向け(おおよそ25%)とそれぞれにwidthの設定を行っておけば順番に並びつつ勝手に整列してくれるので、今回のような場合とても便利。
もっとも、隙間を空けるmarginの設定等は適宜必要になるが。

なお完成&組み込みバージョンは、このページの「只今施工中!」の表示部分にて絶賛稼働中。

【追記】
上記のコードは、パソコン・タブレットでページを見た場合に適用されるデザインに使用するためのもの。
スマートフォンは横幅が小さくなってしまうため、別な配置ルールを適用した(項目数が偶数か奇数かのみで場合分けし、偶数の場合は1行につき2個ずつ、奇数の場合は最初の行のみ1個で、以下2個ずつ並べている)。