モバイルデバイス上でのページの外観をカスタマイズする
更新日時 2021年 1月 20日
対象製品
すべての製品とプラン |
モバイルデバイス上でのページコンテンツの外観をカスタマイズできます。ページエディター内でモバイルアイコンを選択し、ページ本文に含まれるモジュールごとにモバイルオプションを編集します。特定のモジュールを非表示にしたり、ページがモバイルデバイス上で表示されるときにだけ適用されるカスタムパディングやスペースを追加したりできます。
始める前に
- テーマテンプレート、スターターテンプレート、またはドラッグ&ドロップエリアが含まれるコードテンプレートを使用して作成されたページでは、モバイル編集モードを使用できます。ページテンプレートのタイプについて詳細をご確認ください。
- グローバル コンテンツ エディター、ブログ記事エディター、テーマ設定では、モバイル編集モードを使用できません。
-
デスクトップ用にページを編集するときは、各モジュールのコンテンツのみを編集できます。
注:モバイル編集モードが組み込まれているのは、既定の HubSpot テーマとマーケットプレイステーマのみです。既定では、カスタムテーマにモバイル編集モードは組み込まれていません。モバイル編集を実装するには、開発者と協力してモバイルブレークポイントをインストールすることをおすすめします。
モバイルデバイス用にページコンテンツをカスタマイズする
モバイル編集モードでは、ページのモバイルプレビューと、ページ本文に含まれるすべてのモジュールのリストが表示されます。モジュールを非表示にしたり、モジュールの周囲にスペースやパディングを追加したりできます。
- HubSpotアカウントで、[マーケティング]>[ウェブサイト]>[ランディングページ/ウェブサイトページ]に移動します。
- 既存のページの上にカーソルを重ねて[編集]をクリックするか、新しいページを作成します。
- 左側パネルの上部にある[モバイル用に編集]アイコンをクリックします。
- [コンテンツ]パネルで、モバイルデバイス上での外観をカスタマイズするモジュールをクリックします。
- 可視性:このモジュールをモバイルデバイス上で表示するか、非表示にするかを選択します。
- アラインメントとスペース: このモジュールの周囲にパディングまたはスペースを追加できます。このスタイル設定は、モバイルバージョンのページにのみ適用されます。
- 別のモジュールを選択するには、左上にある[戻る]をクリックします。
- コンテンツエディターに戻るには、左上にある
[デスクトップ用に編集]アイコンをクリックします。desktop
関連記事
-
GoogleアナリティクスのトラッキングコードをHubSpotのブログ、ページに追加する
HubSpot設定でGoogleアナリティクスのトラッキングIDを追加して、HubSpotのウェブサイトおよびブログコンテンツをGoogleアナリティクスと連携できます。 ...
ナレッジベース -
非公開コンテンツにアクセスするためのメンバー登録を必須にする
公開権限を持つユーザーは、HubSpot上でホスティングされている特定のページ、ブログ記事、ナレッジベースの記事に、アクセス可能なコンタクトを指定できます。閲覧用のパスワード登録が必要な特定のコンテンツに、特定の...
ナレッジベース -
GoogleタグマネージャーのコードをHubSpotページに追加する
Googleタグマネージャーは、HubSpot設定でページに追加できるコードスニペットを提供します。Googleタグマネージャーの詳細については、Googleのスタートガイドを参照してください。一般的な質問...
ナレッジベース