小さめの画像付きリストをホームページ上に並べる場合の、(少々ややこしい)条件設定を考えてみた。
項目の総数によって、レイアウトを柔軟に変える。
複数行にわたって並べ、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個ずつ並べている)。