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

ウェブサイトページおよびランディングページのエディター内で、個々のモジュールのスタイル設定を編集できます。ほとんどの場合、[スタイル] タブの中でモジュールの周囲の間隔とパディングを調整することにより、ページ上のモジュールの位置をカスタマイズすることができます。ページテンプレートを作成したウェブサイト開発者が付加的なスタイルオプションを含めた場合には、[オプション] タブに付加的なスタイルオプションが表示されます。

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

注: ページエディターからモジュールのスタイル設定を編集すると、!important タグの付いた CSS ルールが追加され、使用しているスタイルシートのルールがそれらによってオーバーライドされることがあります。最適な結果を得るには、デザイナーと協力して、サイトに添付されたスタイルシートに対して直接 CSS の編集をすることをお勧めします。コードを一切使用せずにページスタイルを手軽にカスタマイズするには、スターターテンプレートまたはテーマテンプレートを使用することができます。

始める前に

利用できるスタイルオプションは、編集するモジュールのタイプ、および使用しているページテンプレートに応じて異なりますどのスタイルオプションがページエディターに表示されるかは、テンプレートを作成したウェブサイト開発者によって制御されます。

• 一般的なモジュールのほとんどには、マージンとパディングのスタイルオプションがあり、それらによりモジュールの間隔と位置を調整することができます。フォームモジュールには、テキストの色やボーダーのスタイルなど、さらに多くのスタイルオプションがあります。
• ボタンや見出しなど、ページ上で何度も繰り返されるモジュールには、多くの場合、テンプレートのコードスタイルシートやテンプレートのテーマ設定に基づく色やフォントのプリセットスタイルがあります。
• カスタムモジュールについては、コンテンツエディターの中で使用できるスタイルオプションがないため、それらはデザインマネージャーで編集する必要があります。カスタムモジュールについてデザインの編集に関するヘルプを得るには、HubSpot パートナーにお問い合わせください。

モジュールのスタイルをカスタマイズする

• HubSpot アカウントで、[マーケティング] > [ウェブサイト] > [ランディングページ] または [ウェブサイトページ] の順に進みます。
• 左側パネルで [コンテンツ] タブをクリックし、編集するモジュールを選択します。
• [スタイル] タブをクリックします。
• 矢印キーを使用して、モジュールの周囲のマージンとパディングを調整します。モジュールの四方すべてに均等なスペースを空けるには、[均等] チェックボックスをクリックします。
• モジュールで利用可能な他の色、パディング、またはフォントのスタイルをカスタマイズします。 
• モジュールのスタイルに対して加えた変更を元に戻すには、 refresh 元に戻すアイコンをクリックして、すべてのスタイルをリセットします。

スターターテンプレートまたはテーマテンプレートでその他のスタイルオプションをカスタマイズする

スターターテンプレートを使用している場合、既定のフォントや色など、スタイルオプションの一部は、複数のページで繰り返されます。ウェブサイト開発者によるテンプレートのコーディング方法によっては、左側パネルの [オプション] タブでこれらの既定のスタイルをオーバーライドすることが可能な場合があります。

• ページエディターでモジュールをクリックしてそれを選択します。
• 左側パネルで [オプション] タブをクリックします。
• 既定のモジュールコンテンツオプションの下にある [Override default style（既定のスタイルをオーバーライド）] スイッチをクリックしてオンに切り替えます。
• ここで、ページのテンプレートに含まれるオプションに基づいて、追加のスタイルを選択できます。ほとんどのスターターテンプレートについては、ここに利用可能なオーバーライドオプションがあります。

• 変更を加えたら、左下にある [変更を適用] をクリックします。左側パネルのコンテンツオプションに戻るには、左上の [戻る] をクリックします。