最終更新日: 2025年8月22日

​
テーマでのブレークポイントの定義

responsive_breakpointsオブジェクトをthemes.jsonファイルに追加することで、テーマにブレークポイントを設定できます。このオブジェクトには、ブレークポイントに関する情報が格納されるキーと値のさまざまなペアがあります。 
// themes.json
{
  "label": "My Theme",
  "preview_path": "./path/to/preview.html",
  "screenshot_path": "./images/template-previews/home.png",
  "responsive_breakpoints": [
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 767px)",
      "previewWidth": {
        "value": 520
      }
    }
  ]
}
これらのキーと値のペアの詳細については、以下の表を参照してください。
キー型説明
nameStringブレークポイントの名前。現時点では"mobile"のみ利用できます。
mediaQueryStringレンダラー／エディターによって、レスポンシブCSSの生成に使用されるメディアクエリー文字列。例："@media (max-width: 767px)"
previewWidthKey/Value Pairプレビューiframeを表示するサイズをエディターに示します。例：{"value":520}

​
dnd_areaタグ内でHubLを使用してレスポンシブスタイルを定義する

dnd_areaタグの内部で要素を使用する場合には、既存のスタイル設定を引き続き使用できます。さらに、これらの属性のレスポンシブスタイルも定義できます。以下のdnd_sectionの例を参照してください。 
{% dnd_section padding={ 'top': 100, 'bottom': 100 } %}
{% end_dnd_section %}
「mobile」ブレークポイントのパディングを変更するだけの場合は、「default」ブレークポイント（この例ではデスクトップビューが考慮されます）と「mobile」ブレークポイントの両方に以下のように値を指定します。 
{% dnd_section padding={
    'default': { 'top': 100, 'bottom': 100 },
    'mobile': { 'top': 20, 'bottom': 20 }
  }
%}
{% end_dnd_section %}
この機能は現在、dnd_section、dnd_row、およびdnd_columnタグで機能します。

​
モジュール

現在、モジュールには、コンテンツエディター上でモバイルオプションを設定できます。テンプレートでのモジュールにレスポンシブの既定値を設定することは、まだサポートされていません。この機能は今後のご提供を予定しています。その際、本ページを更新し、ご紹介いたします。