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

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

更新日時 2020年 6月 2日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

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

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

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

始める前に

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

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

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

edit-module-styles

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

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

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

override-default-styles

  • 変更を加えたら、左下にある [変更を適用] をクリックします。左側パネルのコンテンツオプションに戻るには、左上の [戻る] をクリックします。
/jp/cos-pages-editor/how-do-i-customize-the-css-of-my-hubspot-pages