更新日時 2023年 5月 22日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
Marketing Hub Professional, Enterprise
|
CMS Hub Professional, Enterprise
|
| Marketing Hub Basic（旧製品） |
内蔵のサイズ調整オプションとカスタムCSSを使って、CTA（レガシー）のサイズを調整します。画像CTA用の画像をアップロードする際、レティナ最適化を考慮するとよいでしょう。
CTAをさらにカスタマイズするために、CSSでCTA（レガシー）にカスタムスタイルを追加する方法をご紹介します。EメールやテンプレートにCTAを追加する場合は、CTAを中央に配置する方法を学びましょう（レガシー）。
CTA（レガシー）サイズを編集する
CTAのサイズを手動で調整したり、カスタムCSSを使用してCTAのコンテナやモジュールの幅を自動的に埋めることができます。HubSpot以外のサイトに 画像CTAを 埋め込む場合、画像CTAをレスポンシブにするために、スタイルシート内で追加のCSS宣言（width: 100%; など）を適用する必要がある場合があります。ボタンCTAのサイズを編集する場合：
- HubSpotアカウントで、Marketing > Lead Capture > CTAsに移動します。
- 左上のドロップダウンメニューをクリックし、「CTAs（Legacy）」を選択します。
- CTAにカーソルを合わせ、「アクション」 > 「編集」をクリックします。
- スライドパネルで、[ 詳細オプション ]をクリックします。
- カスタムCTAのサイズを手動で変更する場合：
- テキストに合わせる］チェックボックスをオフにします。これにより、適用された自動リサイズが解除されます。
- Button paddingセクションで、ボタンの幅と高さのフィールドにサイズの値を入力します。
- 次へ」をクリック > .
- ［保存］をクリックします。その後、［完了］をクリックします。
- カスタム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の画像がアップロードされた場合
