Elementor│レスポンシブのブレークポイントの増やし方 – 大画面やスマホ横向きも設定できる
- 2025年3月28日
- 2025年3月28日
- Elementorの使い方
- チュートリアル, レスポンシブ
Elementorで、スマートフォンの横向きやワイドスクリーンのみ、違う設定にしたいと思ったことはありませんか？実はElementorのレスポンシブ設定でブレークポイントの追加はとても簡単にできるんです。
今回は、ブレークポイントの追加と、削除の手順についても解説します。
そもそもブレークポイントとは？
ウェブデザインにおけるブレークポイントとは、ウェブサイトのレイアウトが変わる特定の画面幅のことを指します。
たとえば、PC では横並び2段で表示されていたものが、タブレットやモバイルでは縦並び1段で表示されるといった具合です。
この、デバイス間で画面の見え方が切り替わるポイント を「ブレークポイント」といいます。
Elementorのデフォルトのブレークポイント
Elementor の初期設定では、ブレークポイントを以下のように定義しています。
PC：幅が 1024 ピクセルを超えるデバイス
タブレット：幅が 1024 ピクセルから 767 ピクセルのデバイス
モバイル：幅が 767 ピクセル未満のデバイス
ブレークポイントは増やせる
Elementorエディタでは、デフォルトでPC・タブレット（縦向き）・モバイルのブレークポイントが設定されています。
しかし最近では、大きめの画面のモバイルや、ワイドなPCモニターが増えていることもあり、ウェブサイトの内容や目的に応じて適切に設定する必要があります。
Elementorエディターで追加できるブレークポイントは以下のとおりです。
・モバイル横向き
・Tablet Landscape （タブレット横向き）
・ノートパソコン
・ワイドスクリーン
ブレークポイントの追加の手順
ブレークポイントは次の手順で追加できます。
手順1. Elementorの「設定」で「Additional Custom Breakpoints」を「有効」にする
手順2. 「サイト設定」でブレークポイントを追加する
以下でくわしく解説します。
手順1│Elementorの「設定」で「Additional Custom Breakpoints」を「有効」にする
まずは、
①Elementorの「設定」から
②「機能」タブを開きます。
③「Additional Custom Breakpoints」が「有効」になっているか確認します。なっていない場合は「有効」にしてください。
④「保存」しましょう。
手順2│「サイト設定」でブレークポイントを追加
「サイト設定」のアイコンをクリックします。
「レイアウト」を選択します。「レイアウト」はサイト設定メニューの下のほうにあります。
「レイアウト設定」の下の「ブレークポイント」の項目を開きます。
「Active Breakpoints」に表示されている、「モバイル縦向き」「Tablet Poatrait」の横の「＋」マークをクリックします。
「モバイル横向き」や「ワイドスクリーン」などが選択できます。必要なブレークポイントをクリックして追加しましょう。
例では「モバイル横向き」「ワイドスクリーン」の、二つのブレークポイントを追加しました。
「変更を保存」しましょう。
「今すぐ再読み込み」ボタンが表示されるので、クリックします。
エディターに新しいブレークポイントが追加されました。
ブレークポイントのカスタマイズ
ブレークポイントの幅を変更したい場合もあると思います。この場合は任意の数値に変更が可能です。
ブレークポイントの追加の手順と同様に「サイト設定」→「レイアウト」→「ブレークポイント」と進み、変更したいデバイスのブレークポイントの数値を入力します。忘れずに「変更を保存」しましょう。
ブレークポイントの削除
ブレークポイントを増やしたけれど、やっぱり不要になったときなどもありますよね。不要になったブレークポイントは削除しておきましょう。
ブレークポイントの追加の手順と同様に「サイト設定」→「レイアウト」→「ブレークポイント」と進み、「Active Breakpoints」に表示されている不要なブレークポイントの先頭の「×」をクリックして削除します。忘れずに「設定の保存」をしましょう。
まとめ
Elementorのレスポンシブ設定は、ブレークポイントの追加が簡単にできます。デフォルトではPC・タブレット・モバイルの3つが設定されていますが、モバイル横向き・タブレット横向き・ノートパソコン・ワイドスクリーンを追加できます。また、必要に応じてブレークポイントの数値の変更も可能です。これにより、さまざまな画面サイズに対応したデザインが実現できます。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
