共通部品：製品ページ CTAボタン

CTAボタン

製品トップのバナー下部に重なるようにボタンを設置します。

２個・中央配置

<!-- PR画像 start -->
<div class="common-cta-btn-wrap">
   <h1><img class="common-top-title-image" src="productname_img/template-image1600.jpg" alt="[製品名]"></h1>
      <!-- CTAボタン -->
      <div class="common-cta-btn">
         <a href="#" class="common-cta-btn01" target="_blank" download="ファイル名" title="ご紹介資料をダウンロード">
            資料をダウンロード<br>
         </a>
         <a href="trial.html" class="common-cta-btn02" title="『製品名』評価版をダウンロード">
            <span class="common-cta-btn-copy">30日間フル機能をお試し！</span>
            評価版をダウンロード
         </a>
      </div>
      <!-- CTAボタン -->
</div>
<!-- PR画像 end -->

ボタンの位置は固定のため、画像はある程度の高さを持たせて調整してください。
ボタンが一つのみで良い場合にはaタグごと削除してください。
ボタンのテキストは変更可能です。テキストの長さはボタンサイズ幅に収まる程度にしてください。
ボタン上の吹き出しテキストも変更可能です。テキストの長さはボタンサイズ幅に収まる程度にしてください。不要な場合はspanタグごと削除してください。
ボタンの色は製品種別ごとのアクセントカラーが初期値になっています。変更したい場合は製品個別CSSに次の記述を追加して"background"の箇所を変更してください。
/* 一つ目のボタンの色 */ .common-cta-btn01 { background: rgb(var(--image-color-accent)); } /* 二つ目のボタンの色 */ .common-cta-btn02 { background: rgb(var(--image-color-accent)); }

1個・右配置

30日間お試しできます！評価版をダウンロード

<!-- PR画像 start -->
<div class="common-cta-btn-wrap">
   <h1><img class="common-top-title-image" src="productname_img/template-image1600.jpg" alt="[製品名]"></h1>
      <!-- CTAボタン -->
      <div class="common-cta-btn cta-option-right">
         <a href="trial.html" class="common-cta-btn01" title="『製品名』評価版をダウンロード">
            <span class="common-cta-btn-copy">30日間お試しできます！</span>
            評価版をダウンロード
         </a>
      </div>
      <!-- CTAボタン -->
</div>
<!-- PR画像 end -->

1個・左配置

資料請求はこちら

<!-- PR画像 start -->
<div class="common-cta-btn-wrap">
   <h1><img class="common-top-title-image" src="productname_img/template-image1600.jpg" alt="[製品名]"></h1>
      <!-- CTAボタン -->
      <div class="common-cta-btn cta-option-left">
         <a href="#" class="common-cta-btn01" download="ファイル名" title="ご紹介資料をダウンロード">
            <!-- <span class="common-cta-btn-copy">30日間お試しできます！</span> -->
            資料請求はこちら
         </a>
      </div>
      <!-- CTAボタン -->
</div>
<!-- PR画像 end -->