Eメールやページ内の画像、ボタンCTA、ロゴを中央に配置する。
更新日時 2023年 3月 8日
デザインマネージャーツールで作成したレイアウトテンプレートを使用している場合、テンプレートにインラインスタイリングを追加することで、画像、ボタン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アカウントで、ランディングページ、ウェブサイトページ、ブログ記事のいずれかに移動します。
- 検索バーで、「水平スペーサー」と検索してください。
- 水平スペーサーをクリックして、センタリングしたいモジュールの両脇にドラッグします。そして、スペーサーの幅を調整して、エレメントを中央に配置します。
関連記事
-
HubSpotコンテンツに動画を追加する
HubSpot動画を使用すると、ファイルツールに動画をアップロードし、ページ、マーケティングEメール、ブログ記事、ナレッジベース記事に動画を追加できます。 HubSpot動画は、ドラッグ&ドロップ マーケティングEメール
ナレッジベース -
スマートコンテンツ | よくある質問
スマートコンテンツに関する一般的な質問への回答を見つけてください。マーケティングEメール、ブログ記事、ランディングページ、ウェブサイトページ、テンプレートにスマートコンテンツを追加することができます。 ...
ナレッジベース -
HubSpotのコンテンツとデータをエクスポートする
ページ、コンタクト、ファイルなど、自分のアカウントからHubSpotコンテンツとデータをエクスポートする方法を説明します。 ...
ナレッジベース