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

CTAの大きさを編集する(旧)

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