お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Eメールやページ内の画像、CTA(レガシー)、ロゴを中央に配置する。
更新日時 2023年 5月 22日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
|
Marketing Hub Basic(旧製品) |
デザインマネージャーツールで作成したレイアウトテンプレートを使用している場合、テンプレートにインラインスタイリングを追加することで、画像、CTA(レガシー)、ロゴモジュールをページ、ブログ、メールの中央に配置します。
ドラッグ&ドロップエリアを含むテンプレートを使用している場合、コンテンツエディター内でモジュールの配置を中央揃えにすることができます。また、ページエディターでは、水平スペーサーを使用してモジュールを中央に配置することができます。
インラインスタイリングで画像、CTA(レガシー)、ロゴを中央に配置する
注:
- この方法は、HTMLの基本的な理解が必要です。
- ページやテンプレートにスタイルシートが添付されていたり、スタイルが追加されている場合、画像、CTA(レガシー)、ロゴに影響を与える既存のCSSが存在する可能性があります。HubSpotでは、デザイナーと協力してスタイリングの原因を特定し、アセットを中央に配置するために必要な変更を行うことを推奨しています。
Eメールやページのテンプレートで、画像やCTA(レガシー)、ロゴを中央に配置する場合:
- HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ記事、またはEメールダッシュボードに移動します。
- ページ、ブログ記事、またはEメールにカーソルを置き、[編集]をクリックします。
- コンテンツエディターの上部にある、「設定」タブをクリックします。
- 設定タブで下にスクロールし、「詳細オプション」をクリックします。
- テンプレート」セクションで、「このテンプレートを編集する」をクリックします。この操作により、レイアウトエディターでテンプレートが新しいタブまたはウィンドウで開かれます。
- レイアウトテンプレート内で、ロゴ、CTA、または画像モジュールをクリックして、インスペクタで選択します。
- Inline Styling 」欄に、CSS「text-align: center 」を追加します。

- 右上の「変更を公開する」をクリックすると、このテンプレートに変更が適用されます。
- その後、コンテンツエディターに戻り、ブラウザーで更新すると、テンプレートに変更が反映されます。このモジュールで作成したコンテンツは、ページ、ブログ、Eメールの中心に置かれるようになります。
モジュールのスタイリングオプションから、画像、CTA(レガシー)、ロゴを中央に配置する。
ドラッグアンドドロップエリアがあるテンプレートを使用している場合、特定のモジュールやセクションで、アライメントを直接設定することを選択することができます。ただし、このスタイリングオプションは、すべてのテンプレートやモジュールで利用できるわけではないことに注意してください。
- ページモジュールを中央に配置する
- HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ記事のいずれかに移動します。
- ページまたはブログ記事にカーソルを合わせ、[ 編集 ]をクリックします。
- ページエディターで、センタリングしたいモジュールをクリックします。
- 左側のパネルで[スタイル]タブをクリックします。
- クリックすると、「アライメントとスペーシング」が拡大表示されます。
- アライメント]で[中央揃え]を選択します。
- Eメールモジュールのセンタリングに。
- HubSpotのアカウントから、[マーケティング]>[Eメール]に移動します。
- ページまたはブログ記事にカーソルを合わせ、[ 編集 ]をクリックします。
- センタリングしたいモジュールをクリックします。
- 左のパネルで、「整列」ドロップダウンメニューをクリックし、「中央」を選択します。
画像、CTA(レガシー)、ロゴを水平スペーサーで中央に配置する。
使用しているモジュールに整列オプションがない場合、ページエディターから、水平スペーサーをページに追加して、代わりにモジュールを中央に配置することができます。
注: Starterテンプレートでは、水平スペーサーモジュールはご利用いただけません。
水平スペーサーを使用してモジュールをセンタリングする場合。
- HubSpotアカウントで、ランディングページ、ウェブサイトページ、ブログ記事のいずれかに移動します。
- 検索バーで、「水平スペーサー」と検索してください。
- 水平スペーサーをクリックして、センタリングしたいモジュールの両脇にドラッグします。そして、スペーサーの幅を調整して、エレメントを中央に配置します。
CTAs
貴重なご意見をありがとうございました。
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。