更新日時 2023年 1月 18日
HubSpotのCTA（Call-To-Action）詳細オプションを使用すると、ウェブサイトのテーマに合わせて、簡単にCTAボタンを細かくカスタマイズ設定することができます。
注：カスタムスタイルはカスタムボタンのみに適用され、画像ボタンには適用されません。
- HubSpotアカウントにて、［マーケティング］ > ［リードの獲得］ > ［CTA］の順に進みます。
- CTAの上にカーソルを重ねて［アクション］>［編集］の順にクリックするか、［CTAを作成］をクリックします。
-
スライドインパネルの下までスクロールし、［詳細オプション］をクリックします。
- カスタムCSSスタイルをCTAに適用するには、次の2つの方法があります。
- CTAにカスタムクラスを追加する場合、［カスタムCSSクラス］フィールドにカスタムクラスを入力できます。これが役に立つのは、複数のウェブサイトページにまたがって使用されているCTAで、フォントファミリー、サイズ、パディング、マージンといった類似のデザイン特性のセットを共有する必要がある場合です。カスタムCSSクラスを使用する場合、HubSpotのページでメインスタイルとして適用されるCSSスタイルシートにそのクラスを含めてスタイルを設定する必要があります。
- 編集中のCTAにカスタムスタイルを適用する場合は、［カスタムCSS］フィールドで、CTAに固有のインラインスタイルを適用することができます。変更したいCTAの要素がある場合は、変更を保存する前にここに新しいスタイルの宣言を追加します。
注：カスタムCSSスタイルをCTAに適用する場合は、［カスタムCSSクラス］オプションまたは［カスタムCSS］オプションのいずれか一方だけを使用する必要があります。両方のオプションが適用されると、CTAのスタイルや表示に問題が発生する可能性があります。
- 右下の［次へ］をクリックして、CTAの作成または編集を終了します。
