お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

モバイルデバイス上でのページの外観をカスタマイズする

更新日時 2021年 1月 20日

対象製品

すべての製品とプラン

モバイルデバイス上でのページコンテンツの外観をカスタマイズできます。ページエディター内でモバイルアイコンを選択し、ページ本文に含まれるモジュールごとにモバイルオプションを編集します。特定のモジュールを非表示にしたり、ページがモバイルデバイス上で表示されるときにだけ適用されるカスタムパディングやスペースを追加したりできます。

始める前に

注:モバイル編集モードが組み込まれているのは、既定の HubSpot テーマとマーケットプレイステーマのみです。既定では、カスタムテーマにモバイル編集モードは組み込まれていません。モバイル編集を実装するには、開発者と協力してモバイルブレークポイントをインストールすることをおすすめします。


モバイルデバイス用にページコンテンツをカスタマイズする

モバイル編集モードでは、ページのモバイルプレビューと、ページ本文に含まれるすべてのモジュールのリストが表示されます。モジュールを非表示にしたり、モジュールの周囲にスペースやパディングを追加したりできます。

  • HubSpotアカウントで、[マーケティング]>[ウェブサイト]>[ランディングページ/ウェブサイトページ]に移動します。
  • 既存のページの上にカーソルを重ねて[編集]をクリックするか、新しいページを作成します。
  • 左側パネルの上部にある[モバイル用に編集]アイコンをクリックします。

edit-page-content-for-mobile

  • [コンテンツ]パネルで、モバイルデバイス上での外観をカスタマイズするモジュールをクリックします。
    • 可視性:このモジュールをモバイルデバイス上で表示するか、非表示にするかを選択します。
    • アラインメントとスペース: このモジュールの周囲にパディングまたはスペースを追加できます。このスタイル設定は、モバイルバージョンのページにのみ適用されます。

edit-specific-module-for-mobile

  • 別のモジュールを選択するには、左上にある[戻る]をクリックします。
  • コンテンツエディターに戻るには、左上にある
    desktop
    [デスクトップ用に編集]アイコンをクリックします。