テーマのレスポンシブブレークポイント

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

responsive_breakpointsオブジェクトをthemes.jsonファイルに追加することで、テーマにブレークポイントを設定できます。このオブジェクトには、ブレークポイントに関する情報が格納されるキーと値のさまざまなペアがあります。

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
      }
    }
  ]
}

これらのキーと値のペアの詳細については、以下の表を参照してください。 

Use this table to describe parameters / fields
キー型説明
name
String

ブレークポイントの名前。現時点では"mobile"のみ利用できます。

mediaQuery
String

レンダラー／エディターによって、レスポンシブCSSの生成に使用されるメディアクエリー文字列。

例："@media (max-width: 767px)"

previewWidth
Key/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タグで機能します。

モジュール

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

参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。