更新日時 2024年 6月 12日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
Marketing Hub
Professional
,
Enterprise
|
Content Hub
Professional
,
Enterprise
|
| Marketing Hub Basic（旧製品） |
内蔵のサイズ調整オプションとカスタムCSSを使って、CTA（旧）のサイズを調整します。画像CTA用の画像をアップロードする際、レティナ最適化を考慮するとよいでしょう。
CTAをさらにカスタマイズするには、CSSを使ってCTA（レガシー）にカスタムスタイルを追加する方法を学習してください。EメールやテンプレートにCTAを追加する場合、CTA（レガシー）を中央に配置する方法を学ぶ。
CTA（旧）サイズを編集する
CTAのサイズを手動で調整したり、カスタムCSSを使用してCTAのコンテナーやモジュールの幅を自動的に埋めることができます。 画像CTAをHubSpot以外のサイトに埋め込む場合、画像CTAをレスポンシブにするためにスタイルシート内で追加のCSS宣言(width: 100%; など)を適用する必要があるかもしれません。ボタンCTAのサイズを編集するには：
- HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
- 左上のドロップダウンメニューをクリックし、［CTA（旧）］を選択します。
- CTAにマウスポインターを合わせ、「アクション」 > 「編集」をクリックします。
- スライドパネルで、[ 詳細オプション ]をクリックします。
- カスタムCTAのサイズを手動で変更する場合：
- テキストに合わせる］チェックボックスをオフにします。これにより、適用された自動リサイズが解除されます。
- 「ボタンのパディング」セクションで、ボタンの幅と高さのフィールドにサイズの値を入力します。
- 次へ」をクリック > .
- ［保存］をクリックします。その後、［完了］をクリックします。
- カスタムCTAをそのコンテナーやモジュールの幅いっぱいに表示させること：
- サイズを自動的に変更する」チェックボックスをオフにします。
- カスタムCSSフィールドに、カスタムCSSを入力します。
- 幅をwidth: 100%に設定します；
- 次へ」をクリック> .
- ［保存］をクリックします。その後、［完了］をクリックします。
retina 最適化とは何ですか？
Retina 最適化を使用すると, サイトページで CTA の画像がより明確に表示され, Eメールで受信者が Apple mail と iOS mail の現在のバージョンで CTA を閲覧する場合；Outlook またはGメールのようなウェブメールのサービスはサポートされていません。
CTAに必要なサイズの2倍以上の画像をアップロードすることでRetina最適化がサポートされるのは、インターネット上の全ての画像でRetinaサポートが機能しているのと同様です。次の点にもご注意ください。
- 100 px X 400 px で CTA を作成する場合, @2 x ピクセル密度表示をサポートするために, アップロードされた画像は 800 px です。
- CTAは4倍版までの加算に対応しています。例えば、400px×100pxのCTAを作成する場合、1600px×400pxの画像をアップロードすることができます。
- CTA は, 1x, 2x, 3x, 及び4x 倍のバージョンの srcset 属性を使用してウェブサイトに自動的に表示されます。
- CTAがレンダリングされるサイズで画像がアップロードされると、レティナ対応になりません。例えば、400px×100pxのCTAに400px×100pxの画像がアップロードされた場合
