ボタン | 基本機能

ボタン

 テキストに自動でオンマウスの挙動やボタンのような装飾になるボタン機能。

スタイルは三種類まであり、管理メニュー > スタイル で色などを変更することができます。

ボタンスタイルは3種類用意されており、それぞれ j-calltoaction-link-style-N (Nが数値で変動)で定義されます。

 

機能で設定できる項目

管理メニュー > デザイン > 設定 からデザイン編集モードでボタンを選択し、フォントやアクティブカラーなどの項目を設定。

ボタン1/2/3 それぞれで各種設定が可能。

  • フォント / フォントサイズ
  • フォントカラー:デフォルト / Active
  • 背景色:デフォルト / Active
  • 枠の色:デフォルト / Active
  • 罫線のサイズ
  • 角丸

ボタンスタイル1

  1. <div id="cc-m-xxxxxxxxxx" class="j-module n j-callToAction ">
  2.   <div class="j-calltoaction-wrapper j-calltoaction-align-1">
  3.     <a class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button" href="/" data-title="新しいボタン">ボタンスタイル1</a>
  4.   </div>
  5. </div>

ボタンスタイル2

  1. <div id="cc-m-xxxxxxxxxx" class="j-module n j-callToAction ">
  2.   <div class="j-calltoaction-wrapper j-calltoaction-align-1">
  3.     <a class="j-calltoaction-link j-calltoaction-link-style-2" data-action="button" href="/" data-title="新しいボタン">ボタンスタイル2</a>
  4.   </div>
  5. </div>

ボタンスタイル3

  1. <div id="cc-m-xxxxxxxxxx" class="j-module n j-callToAction ">
  2.   <div class="j-calltoaction-wrapper j-calltoaction-align-1">
  3.     <a class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button" href="/" data-title="新しいボタン">ボタンスタイル3</a>
  4.   </div>
  5. </div>