CTA

CTAにカスタムスタイルを追加するにはどうすればいいですか?

更新日時 November 29, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

HubSpotの新しいCSSデザインタブから、どのウェブサイトテーマにも対応できる、高度にカスタマイズされたCTAボタンをHubSpot内部で作成できます。ポータル内のこれらのツールにアクセスするには、[Content(コンテンツ)] > [CTA(CTA)]の順に選択して、青い[Create a CTA(CTAを作成)]ボタンをクリックします(または、CTAリスト内の既存のボタンを編集します)。次にエディターの[Design(デザイン)]タブをクリックし、[Customize CSS(CSSをカスタマイズ)]ボタンをクリックしてCSSデザインタブを開きます。

CTA [Customize CSS(CSSをカスタマイズ)]ボタン
CTA [Customize CSS(CSSをカスタマイズ)]ボタン

自動生成されたCSSボックスは、読み取り専用のプレビューボックスで、ここから、現在のCTAのデザイン設定に基づいて特定のCTA要素に適用されているスタイルを簡単に確認できます。

CTAにカスタムクラスを追加する必要がある場合は、[CSS Class(CSSクラス)]ボックスがカスタムクラスの入力をサポートします。これは、複数のウェブサイトページにまたがって使用されているCTAで、フォントファミリー、サイズ、パディングやマージンといった類似のデザイン特性のセットを共有する場合に有効です。また、カスタムCSSクラスを使用する場合には、HubSpotページ用のメインスタイルとして適用されるCSSスタイルシート内に、そのカスタムCSSクラスと対応するスタイルを必ず実装してください。

customize-css-class-cta.png
CTA CTAのカスタマイズ CSSクラス

[Custom CSS(カスタムCSS)]ボックスを使って、編集中のCTAに対してインラインスタイルを簡単に適用することもできます。CTAに変更したい要素が1つある場合、変更を保存する前に、[Custom CSS(カスタムCSS)]ボックスに新しいスタイル宣言を追加します。

CTA CTAのカスタマイズ CSSコード
CTA CTAのカスタマイズ CSSコード

実行中のページ上のCTAを更新する場合は、[Update CTA(CTAを更新)](新しいCTAを作成している場合には[Create CTA(CTAを作成)])をクリックします。