グリッドレイアウトを使ったクエリーループによる新着表示例

クエリーループでも最小列幅を指定できるようになった

WordPress 6.6 にアップデートすると、グループブロックだけでなく、クエリーループの投稿テンプレートでもグリッドレイアウトで最小列幅を指定できるようになっていることに気がつきました。

WordPress 6.5 のクエリーループも CSS は display: grid; になるのですが、指定できるのはカラム数だけでした。

WordPress 6.6 では以下のようにタイプを自動にして最小列幅を指定できるようになりました。

グリッドレイアウトを使ったカードタイプの新着表示例

以下のように新着表示の脇にイラストを配置したデザインを作るのって、カスタマイズするのに手間がかかっていました。そのため、投稿リスト部分をテキスト1カラムで作るパターンが多かったです😅

クエリーループで最小列幅を指定できるようになったので、このようなデザインを作りやすくなりました。

レスポンシブ対応のこの新着表示をほとんどノーコードで作ってあります。

完全ノーコードで作ってやろうと思って作業にとりかかったのですが、細かい部分が気に入らなくて（スマホで2カラムの表示にする ＆ グリッドの高さを揃える）、宣言の数にして CSS を3行書きました😊

ノーコードでもここまでできる

ちなみに、CSS を書かなくても ↓ ここまで作ることができます。

イラストを右に配置するのもかんたん

新着情報の前後のコンテンツとのバランスを考えて、以下のようにイラストの位置を右にしたい場合もあると思いますが、この配置も可能です。
この配置の場合でも、スマホではイラストが新着情報の前に表示されます。