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

CTAの大きさを編集する(レガシー)

更新日時 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の画像がアップロードされた場合
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。