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にします。

最初に作った2カラム
2カラムの中に作ったカラム

これで パソコンで4カラム、スマホで2カラム のレイアウトが完成です。

まとめ

レスポンシブデザインは、モバイルユーザーにも最適な表示が可能で、検索エンジンの評価も高めるため、SEOにも非常に有益です。

カラムブロックを利用すれば、簡単にレスポンシブ対応が可能で、CSSで調整する必要もありません。

WordPressでウェブサイトを構築する際には、ぜひカラムブロックを利用してレスポンシブデザインを取り入れることをおすすめいたします。

投稿者プロフィール

志水泉
志水泉
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)