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

CTAにカスタムスタイルを追加する

更新日時 2023年 1月 18日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Marketing Hub Basic(旧製品)

HubSpotのCTA(Call-To-Action)詳細オプションを使用すると、ウェブサイトのテーマに合わせて、簡単にCTAボタンを細かくカスタマイズ設定することができます。

注:カスタムスタイルはカスタムボタンのみに適用され、画像ボタンには適用されません

  • HubSpotアカウントにて、[マーケティング] > [リードの獲得] > [CTA]の順に進みます。
  • CTAの上にカーソルを重ねて[アクション]>[編集]の順にクリックするか、[CTAを作成]をクリックします。 edit-or-create-new-cta
  • スライドインパネルの下までスクロールし、[詳細オプション]をクリックします。

  • カスタムCSSスタイルをCTAに適用するには、次の2つの方法があります。
    • CTAにカスタムクラスを追加する場合、[カスタムCSSクラス]フィールドにカスタムクラスを入力できます。これが役に立つのは、複数のウェブサイトページにまたがって使用されているCTAで、フォントファミリー、サイズ、パディング、マージンといった類似のデザイン特性のセットを共有する必要がある場合です。カスタムCSSクラスを使用する場合、HubSpotのページでメインスタイルとして適用されるCSSスタイルシートにそのクラスを含めてスタイルを設定する必要があります。
    • 編集中のCTAにカスタムスタイルを適用する場合は、[カスタムCSS]フィールドで、CTAに固有のインラインスタイルを適用することができます。変更したいCTAの要素がある場合は、変更を保存する前にここに新しいスタイルの宣言を追加します。

注:カスタムCSSスタイルをCTAに適用する場合は、[カスタムCSSクラス]オプションまたは[カスタムCSS]オプションのいずれか一方だけを使用する必要があります。両方のオプションが適用されると、CTAのスタイルや表示に問題が発生する可能性があります。 

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。