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

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

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

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

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

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

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

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

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

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

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

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

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

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

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

• WordPress2025年5月25日重要なお知らせを先頭に表示して新着記事一覧から除外したカスタマイズ
• WordPress2025年4月10日グループブロックの背景画像を CSS で左右反転するやり方
• Lightning2025年3月16日カテゴリーをページヘッダーに表示するプラグインを作りました
• Lightning2025年2月16日ブログカード全体をリンクエリアにしたカスタマイズ例