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

コンテンツエディターでモジュールのスタイルをカスタマイズする

更新日時 2021年 8月 18日

対象製品

すべての製品とプラン

コンテンツエディターでは、サイドバーエディターの[スタイル]タブ上のマージンやパディングなどのモジュールスタイル指定オプションを編集できます。カスタムモジュールテーマで利用可能なスタイルオプションは、そのモジュールを作成した開発者によって設定されています。モジュールとテーマのスタイルオプションについて詳しくは、開発者ドキュメントを参照してください。 

ドラッグ&ドロップエリアを伴うスターターテンプレートテーマテンプレート、またはコードテンプレートを使用している場合は、背景スタイルをページの行、列、またはセクションに適用することもできます。

注:古いモジュールには、廃止されたスタイルが含まれている場合があります。それらは、新しいモジュールやテンプレートでは使用できません。廃止されたスタイルも[スタイル]タブで編集できますが、クリアされている場合は、モジュールから削除されます。

既定モジュールまたはカスタムモジュールのスタイルをカスタマイズする

[スタイル]タブで、配置、間隔、色などのスタイルオプションをカスタマイズできます。カスタムモジュールで利用可能なスタイルオプションは、デザインマネージャーの中で開発者によって設定されています。カスタムモジュールのスタイルオプションについて詳しくは、開発者ドキュメントを参照してください。 

  • HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。 
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターで、モジュールをクリックして編集状態にします。
  • サイドバーエディターで、[スタイル]タブをクリックします。
  • モジュールの間隔を調整するには、[パディング]または[マージン]を選択してから、フィールドにピクセル値を入力します。モジュールの全サイドに同じマージンまたはパディングを適用するには、[すべてのサイドに適用]チェックボックスをオンにします。 
  • モジュールで利用可能な境界線、フォント、または色をカスタマイズします。

edit-a-module-s-style-options

スターターテンプレートまたはテーマテンプレートからスタイルオプションをカスタマイズする

スターターテンプレートまたはテーマテンプレートを使用している場合、一部のスタイルオプションがサイドバーエディターの[コンテンツ]タブに表示されることがあります。 

  • HubSpotアカウントで、ランディングページまたはウェブサイトページに移動します。 
  • コンテンツの上にカーソルを重ねて[編集]をクリックします。
  • コンテンツエディターで、モジュールをクリックして編集状態にします。
  • サイドバーエディターで、[コンテンツ]タブをクリックします。
  • [既定のスタイルを上書き]スイッチをクリックしてオンに切り替えます。
  • [スタイルオプション]セクションで、スターターテンプレートまたはテーマテンプレートに含まれる追加のスタイル指定オプションをカスタマイズします。 

edit-starter-module-style-options