エレメント（Elementor）は現在1,000万個を超えるサイトに設置され使用されている人気 WordPress ページビルダーです。 エレメンプロを使用してテーマへの依存を最小限に抑えながらサイトを作成するユーザーが多いです。エレメントページビルダーでモバイル、タブレットなどのブレークポイントを変更したい場合は、サイト設定で変更が可能です。
エレメンタレス反応ブレークポイント設定：モバイル・タブレット設定値を変更する
京テーマ（K-theme）のモバイル、タブレットブレークポイントの設定
WordPressを使う人 Naver カフェエケテマ（K-theme）とエレメントを使う WordPress サイトでテーマとエレメンタのタブレット解像度設定が少し違いがあり、タブレットでハンバーガーメニューの変換がうまくいかないという質問が上がってきました。
京テーマは韓国開発者が作った韓国型テーマとしてエレメンタを使用し、費用がかなり高価な方です。
しかし、残念ながらそれほど活発に販売されているようではありません。さらに、Googleで「Katema」で検索すると、他のサイトが最上位に検索されています。😥
ケーテマデモサイトで確認してみると、モバイルやタブレット、PC解像度ブレークポイント（Breakpoint）は次のように見えます。
- モバイル（phones）: < 768px
- タブレット(tablets): ≥ 768px
- ラップトップ/小型デスクトップ (laptops/small desktops): ≥ 992px
- デスクトップ(large desktops): ≥ 1200px
- 非常に大きな画面（ultra-wide/xxl）: ≥ 1400px
上記の値（768、992、1200、1400）は、モバイルファースト（min-width）方式で業界標準に広く使われている区間であり、特にBootstrap 5の基本ブレークポイント（md、lg、xl、xxl）と等しいとします。
エレメントでモバイル、タブレットブレークポイントを変更する
エレメントでは、サイト設定でモバイル、タブレット、ラップトップなどのブレークポイントを変更できます。
1 エレメント編集画面で左上の サイトの設定 アイコンをクリックします。
2 設定(Settings) 下の レイアウト(Layout)をクリックします。
3 メニューから ブレークポイント(Breakpoints)をクリックします。
4 ブレークポイント セクションにアクティブなブレークポイントが表示されます。
私は見てみると、上記のようにモバイルポートレートとタブレットポートレートのブレークポイントが表示されます。 アクティブブレークポイントの+アイコンをクリックして他の解像度のデバイスを追加できます。
5 テストでタブレットの水平方向とラップトップのオプションを追加しました。 （デフォルトで追加されているモバイルとタブレットのオプションは削除できません。）
各デバイスのブレークポイント設定を必要に応じて変更できます。
設定を変更した後、下部の「変更を保存「ボタンをクリックして変更を保存します。（「変更を保存」は「変更を保存」に翻訳するとより自然なようです。人工知能（AI）を使ってインターフェースを韓国語に翻訳するのでしょうか？）
変更を保存ボタンを押すと牛エディタの再読み込み ポップアップが表示されます。
この設定はサイト全体に適用されます。
エレメンタのモバイル、タブレットブレークポイントが広く使われているフレームワーク（ブートストラップなど）とは少し違う理由
エレメントは基本的にモバイル≤767px、タブレット768-1024px、デスクトップ≥1025pxの範囲を前提としてCSSを生成します。これは、iPad（768×1024）のポートレート（垂直）/ランドスケープ（水平）区間を安全にカバーする選択からの値で、タブレットの水平（1024px）までをタブレットビューとして扱います。
現在(3.2.0バージョンから)カスタムブレークポイントを導入してブレークポイント(分岐点)を追加/修正が可能ですが、内部CSS生成ロジックとの互換性を考慮して動的に処理されるように変わったとします。
ちなみに広く使われているフレームワーク（例：Bootstrap）は、md=768、lg=992、xl=1200、xxl=1400をデフォルト値として採用しているそうです。
Redditフォーラムにこの問題に関する質問があります。 」Elementor responsive breakpoints verses industry standard「投稿を参考にしてください。
最後に、
以上で、エレメントページ編集のサイト設定でモバイル、タブレットなどの反応型分岐点（中断点）を変更する方法について見てきました。テーマによっては、メディアクエリレスポンシブブランチポイントの設定が少しずつ異なる場合があります。例えば、 GeneratePress テーマの場合、レスポンシブブレークポイントの設定について次の記事を参照できます。
コメントを残す