WordPressの制作はブロックエディタが主流になってきている昨今ですが、まだまだブロックエディタは使いにくい、思うようなレイアウトやデザインができない、といった声もよく聞きます。
ですが、使い方次第で様々なレイアウトが可能ですし、ブロックを組み合わせることでデザインの幅も広がります。
モバイルデバイスの普及に伴い、レスポンシブデザインの重要性も増していますので、今回はWordPressのカラムブロックを使って、レスポンシブなレイアウトを作成する方法について解説します。
カラムブロックの基本的な使い方はこちらの記事に記載しています。
レスポンシブデザインを意識したカラムブロック
例1：パソコンで4カラム、スマホで1カラムにしたい場合
通常通り、カラムブロックで4カラムつくり、開始時のパターンを選択します。
4カラムにしたいのでどれでもOKですが、ここでは等分にしたいので、50 / 50 または 33 / 33 / 33 を選択します。
+でカラムを追加し、4カラムにします。
カラム全体を選択すると右側の設定画面に「モバイルでは縦に並べる」という表示がでますので、これをONにすると、スマホで1カラムの表示になります。
この表示でも全く問題はないのですが、スマホで見たときに1カラムだと画像が大きすぎたり、余白がありすぎたり、スクロールが長くなりすぎる場合があります。
画像の大きさや余白はCSSでも調整は可能ですが、スマホで2カラムにすると、スクロールも長くなりすぎず、レイアウトも整うことがあります。
例2：パソコンで4カラム、スマホで2カラムにしたい場合
この場合、最初のカラム分けの段階で4カラムにせず、50/50 の2カラムを選択します。
2カラムに分けたカラムの中に、さらに 50/50 の2カラムをそれぞれ追加します。
最初に作った2カラムを「モバイルでは縦に並べる」をONにし、その中に作った2カラムはOFFにします。
これで パソコンで4カラム、スマホで2カラム のレイアウトが完成です。
まとめ
レスポンシブデザインは、モバイルユーザーにも最適な表示が可能で、検索エンジンの評価も高めるため、SEOにも非常に有益です。
カラムブロックを利用すれば、簡単にレスポンシブ対応が可能で、CSSで調整する必要もありません。
WordPressでウェブサイトを構築する際には、ぜひカラムブロックを利用してレスポンシブデザインを取り入れることをおすすめいたします。
投稿者プロフィール
- 2004年頃の会社員時代からブログ作成を始める。ブログ作成が楽しくなり、そのまま趣味が高じて2006年にホームページ制作で起業、2008年に株式会社ウェブロードを設立。現在は、個人・中小事業者のWordPressサイト制作・改善を中心に、Web業界20年の知識と経験を生かして、自治体案件等の大型案件のWebディレクターや中小企業・個人事業主へのWeb全般のアドバイザー、SEO/AIOのコンサルタントとしても活動中。 プロフィールはこちら
最新の投稿
メルマガバックナンバー2026年6月15日過去記事のリライトが、AI検索時代の集客を左右する- ホームページ制作2026年6月8日ホームページ制作費のお見積り金額と相場感
- SEO・AIO・Web集客2026年6月8日「SEO記事制作」を外注する費用相場は？依頼前に知っておきたい料金の内訳
- お知らせ2026年6月6日「サービス利用規約」と「取引約款」を一本化し改定いたしました
お問合せフォームはこちら
弊社サービスをご検討いただきありがとうございます。
こちらのカテゴリ内のご質問と回答で解決できない場合は、ぜひ下記フォームよりお問い合わせください。ご相談・お見積りのご依頼は無料です。
お申込前のお打ち合わせはメール/お電話/GoogleMeet等オンラインでもご対応可能です。全国からお問い合わせを受付けています。
翌営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
