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

Eメールやページ内の画像、ボタンCTA、ロゴを中央に配置する。

更新日時 2023年 3月 8日

対象製品

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

デザインマネージャーツールで作成したレイアウトテンプレートを使用している場合、テンプレートにインラインスタイリングを追加することで、画像、ボタンCTA、ロゴモジュールをページ、ブログ、メールの中央に配置します。

ドラッグ&ドロップエリアを含むテンプレートを使用している場合、コンテンツエディター内でモジュールの配置を中央揃えにすることができます。また、ページエディターでは、水平スペーサーを使用してモジュールを中央に配置することができます。 

インラインスタイリングで画像、ボタンCTA、ロゴを中央に配置する

注:

  • この方法は、HTMLの基本的な理解が必要です。 
  • ページやテンプレートにスタイルシートが添付されていたり、スタイルが追加されている場合、画像、CTA、ロゴに影響を与える既存のCSSが存在する可能性があります。HubSpotでは、デザイナーと協力してスタイリングの原因を特定し、アセットを中央に配置するために必要な変更を行うことを推奨しています。 

 

Eメールやページのテンプレートで、画像、ボタンCTA、ロゴを中央に配置する場合。

  • レイアウトテンプレート内で、ロゴ、CTA、または画像モジュールをクリックし、それをインスペクターで選択します。
  • Inline Styling 」欄に、CSS「text-align: center 」を追加します。

 
  • 右上の「変更を公開する」をクリックすると、このテンプレートに変更が適用されます。
  • その後、コンテンツエディターに戻り、ブラウザーで更新すると、テンプレートに変更が反映されます。このモジュールで作成したコンテンツは、ページ、ブログ、Eメールの中心に置かれるようになります。

モジュールのスタイリングオプションから、画像、ボタンCTA、ロゴを中央に配置する。

ドラッグアンドドロップエリアがあるテンプレートを使用している場合、特定のモジュールやセクションで、アライメントを直接設定することを選択することができます。ただし、このスタイリングオプションは、すべてのテンプレートやモジュールで利用できるわけではないことに注意してください。

  • ページモジュールを中央に配置する
    • HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ記事のいずれかに移動します。
    • ページまたはブログ記事にカーソルを合わせ、[ 編集 ]をクリックします。
    • ページエディターで、センタリングしたいモジュールをクリックします。 
    • 左側のパネルで[スタイル]タブをクリックします。
    • クリックすると、「アライメントとスペーシング」が拡大表示されます。  
    • アライメント]で[中央揃え]を選択します。

 

  • Eメールモジュールのセンタリングに。 
    • HubSpotのアカウントで、[マーケティング]>[Eメール]に移動します。
    • ページまたはブログ記事にカーソルを合わせ、[ 編集 ]をクリックします。
    • センタリングしたいモジュールをクリックします。 
    • 左のパネルで、「整列」ドロップダウンメニューをクリックし、「中央」を選択します。

 

画像、ボタンCTA、ロゴを水平スペーサーで中央に配置する。

使用しているモジュールに整列オプションがない場合、ページエディターから、水平スペーサーをページに追加して、代わりにモジュールを中央に配置することができます。 

ご注意: Starterテンプレートでは、水平スペーサーモジュールはご利用いただけません

水平スペーサーを使用してモジュールをセンタリングする場合。 

  • HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ記事のいずれかに移動します。
  • 検索バーで、「水平スペーサー」と検索してください。 
  • 水平スペーサーをクリックして、センタリングしたいモジュールの両脇にドラッグします。そして、スペーサーの幅を調整して、エレメントを中央に配置します。

    
   

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。