【WordPress】AstraテーマのブレークポイントをElementorと揃えてレスポンシブ対応を最適化する方法

WordPressの人気テーマ「Astra」は、その軽快さとカスタマイズのしやすさから、多くのサイトで採用されています。特に、ページビルダープラグイン「Elementor」との相性が非常に良く、これらをセットで利用している方も多いのではないでしょうか。

しかし、AstraとElementorを組み合わせて使う際、レスポンシブ表示が崩れる原因となりがちなのが「ブレークポイント」の不一致です。

この記事では、Astraのブレークポイントを変更し、Elementorと設定を統一することで、効率的かつ美しくレスポンシブ対応を行う方法を解説します。

なぜブレークポイントの変更が必要なのか？

ブレークポイントとは、WebサイトのレイアウトがPC向けからタブレットやスマートフォン向けに切り替わる画面の幅（px）を指します。この数値がずれていると、意図しない表示崩れが発生します。

AstraとElementorのデフォルトのブレークポイントは、それぞれ以下のようになっています。

• Astraのブレークポイント
  • タブレット: 921px
  • モバイル: 544px
• Elementorのブレークポイント
  • タブレット: 1024px
  • モバイル: 767px

ご覧の通り、両者の設定値は大きく異なっています。

AstraとElementorでブレークポイントが異なると、例えば画面幅が950pxのデバイスで表示した場合、「Astra側はタブレット表示になっているが、Elementorで作成した部分はPC表示のまま」といったねじれ現象が発生します。これでは、きれいで一貫性のあるレスポンシブ設定を行うことが非常に困難になります。

この問題を解決し、あらゆるデバイスで美しい表示を実現するために、AstraのブレークポイントをElementor側に合わせて統一することが非常に重要です。

Astraのブレークポイント変更方法

Astraのブレークポイントは、簡単なコードスニペットを子テーマのfunctions.phpなどに追加することで変更できます。

Elementorの設定（1024px / 767px）に合わせるコード

以下のコードをコピーし、お使いの子テーマのfunctions.phpに貼り付けてください。これにより、AstraのブレークポイントがElementorと完全に一致します。

// Astraのタブレットブレークポイントを1024pxに変更
add_filter( 'astra_tablet_breakpoint', function() {
    return 1024;
});

// Astraのモバイルブレークポイントを767pxに変更
add_filter( 'astra_mobile_breakpoint', function() {
    return 767;
});

ポイント：
もしご自身のElementorでブレークポイントをカスタマイズしている場合は、上記のコードの1024や767の部分を、ご自身のElementorの設定値に合わせて変更してください。

まとめ

AstraとElementorは、WordPressで自由自在なサイトデザインを実現するための強力な組み合わせです。しかし、その能力を最大限に引き出すには、裏側にある「ブレークポイント」という設定を正しく理解し、統一しておく必要があります。

今回ご紹介した簡単なコードを追加するだけで、レスポンシブデザインの管理が格段に楽になり、表示崩れのリスクを大幅に減らすことができます。ぜひ、ご自身のサイト設定を確認し、ブレークポイントの最適化を行ってみてください。