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

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

更新日時 2021年 7月 27日

対象製品

すべての製品とプラン

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

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

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

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

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

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

edit-alignment-in-module

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

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

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

override-default-styles