グリッドブロックのカラム数のコントロールが楽になった
WordPress 7.0 になって、グリッドブロックを使ってこのような↓画像ベースのメニューを作ったときに、画面幅ごとのカラム数をコントロールするのがかんたんになりました。
このグリッドブロックは PC で4カラム、スマホで2カラムのレイアウトで表示されるように設定してあります。
WordPress 6.9.4 まではこのレイアウトにするために CSS を書く必要がありましたが、WordPress 7.0 では CSS が不要になって、わかりやすい設定画面が提供されています。
レイアウト設定画面の違い
WordPress 6.9.4 の設定画面
- スマホで2カラム表示にするために、最小列幅を 10rem に指定します。
- 最大列の指定ができないので、PC では右に余白が生じてしまいます。（下記参照）
WordPress 7.0 の設定画面
- スマホで2カラム表示にするために、最小列幅を 10rem に指定します。
- PC でカラム数が4カラムを超えないように、最大列を 4 に指定します。
WordPress 6.9.4 で作ると…
WordPress 6.9.4 で作っていたとき、最小列幅を 10rem に指定するとスマホではバッチリなのですが、PC ではこのようになっていました。
WordPress 6.9.4 のときは、さらに CSS を使って画面幅ごとのカラム数をコントロールしていましたが、WordPress 7.0 ではかんたんになってありがたいですね。
編集画面でも4カラムで表示されるので、気持ちよく編集作業を行うことができます。
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
ExUnit2026年8月4日ExUnit の HTML サイトマップを見やすくカスタマイズするやり方
WordPress2026年6月19日WordPress 7.0 のグリッドブロックのうれしいレイアウト仕様
X-T92026年6月15日X-T9 でサイドバーにフローティングバナーを設置するカスタマイズ手順
X-T92026年6月10日X-T9 のサイトにパンくずリストを表示しました
