更新日時 2021年 1月 20日
モバイルデバイス上でのページコンテンツの外観をカスタマイズできます。ページエディター内でモバイルアイコンを選択し、ページ本文に含まれるモジュールごとにモバイルオプションを編集します。特定のモジュールを非表示にしたり、ページがモバイルデバイス上で表示されるときにだけ適用されるカスタムパディングやスペースを追加したりできます。
始める前に
- テーマテンプレート、スターターテンプレート、またはドラッグ＆ドロップエリアが含まれるコードテンプレートを使用して作成されたページでは、モバイル編集モードを使用できます。ページテンプレートのタイプについて詳細をご確認ください。
- グローバル コンテンツ エディター、ブログ記事エディター、テーマ設定では、モバイル編集モードを使用できません。
-
デスクトップ用にページを編集するときは、各モジュールのコンテンツのみを編集できます。
注：モバイル編集モードが組み込まれているのは、既定の HubSpot テーマとマーケットプレイステーマのみです。既定では、カスタムテーマにモバイル編集モードは組み込まれていません。モバイル編集を実装するには、開発者と協力してモバイルブレークポイントをインストールすることをおすすめします。
モバイルデバイス用にページコンテンツをカスタマイズする
モバイル編集モードでは、ページのモバイルプレビューと、ページ本文に含まれるすべてのモジュールのリストが表示されます。モジュールを非表示にしたり、モジュールの周囲にスペースやパディングを追加したりできます。
- HubSpotアカウントで、［マーケティング］>［ウェブサイト］>［ランディングページ／ウェブサイトページ］に移動します。
- 既存のページの上にカーソルを重ねて［編集］をクリックするか、新しいページを作成します。
- 左側パネルの上部にある［モバイル用に編集］アイコンをクリックします。
- ［コンテンツ］パネルで、モバイルデバイス上での外観をカスタマイズするモジュールをクリックします。
- 可視性：このモジュールをモバイルデバイス上で表示するか、非表示にするかを選択します。
- アラインメントとスペース： このモジュールの周囲にパディングまたはスペースを追加できます。このスタイル設定は、モバイルバージョンのページにのみ適用されます。
- 別のモジュールを選択するには、左上にある［戻る］をクリックします。
- コンテンツエディターに戻るには、左上にある ［デスクトップ用に編集］アイコンをクリックします。