ボタン・CTAブロック
最終更新: 2026-03-15
ボタン・CTA ブロック — 全種マニュアル
> 全18種（無料ボタン3 + プレミアムボタン6 + 有料ボタン2 + テンプレートボタン1 + 無料CTA 2 + 有料CTA 2 + テンプレートCTA 2）
設定手順
ボタン・CTAブロックの基本的な使い方を以下の手順で説明します。
ボタンブロックの挿入と設定
-
ブロックを挿入する
- エディタ上部の「＋」（ブロック挿入）ボタンをクリック
- ボタンの場合: 検索バーに「リンクボタン」と入力するか、カテゴリ「LiteWord」→「リンクボタン」から探す
- CTAの場合: 検索バーに「CTA」と入力するか、カテゴリ「LiteWord」→「CTA」から探す
- 使いたいブロックをクリックして挿入
-
テキストを入力する
- ボタンテキスト（メインテキスト・サブテキスト）を直接クリックして編集
- CTAブロックの場合は見出し・説明文も同様に編集
-
「基本設定」でリンクを設定する
- 右サイドバーの「ブロック」タブを開く
- 「URL」にリンク先のアドレスを入力
- 外部サイトへのリンクの場合は「新しいタブで開く」をONにする
- 電話番号ボタン（PRボタン04）の場合は
tel:0120000000の形式で入力
-
「色設定」で見た目を調整する
- 背景色: ボタンの背景色を変更（デフォルトはテーマのメインカラー）
- テキスト色: ボタン文字の色を変更
- 枠線色: ボーダーの色を設定（枠線太さが0の場合は表示されない）
- PRボタンの場合: ホバー時の色も設定可能
-
「レイアウト設定」でサイズを調整する
- 最大幅: ボタンの横幅を調整（px指定）
- 角丸: 値を大きくするほど丸みが増す（200でピル型、0で四角）
- 枠線太さ: 枠線を付けたい場合はpx値を入力
- フォントサイズ: テキストの大きさを調整
-
「配置設定」で位置を決める
- 左寄せ / 中央揃え / 右寄せ から選択
- PC時とスマホ時で別々の配置を設定可能
CTAブロックの追加設定
- 背景画像: CTAセクションの背景に画像を設定（雰囲気を演出）
- フィルター色/透過度: 背景画像の上にオーバーレイを重ねてテキストの可読性を確保
- 見出しレベル: h2/h3などSEOに適した見出しタグを選択
ボタンブロック
無料ボタン（3種）
リンクボタン 01（lw-button-1）
最もベーシックなボタン。シンプルな矩形ボタンで、サイズ・色・余白・配置を細かく調整できる。記事内やセクション末尾のリンク導線に最適。角丸・枠線も設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| buttonText | string | "詳細はこちら" |
ボタンに表示するテキスト |
| url | string | "" |
リンク先URL |
| openInNewTab | boolean | false |
新しいタブで開くかどうか |
| fontSize | number | 100 |
フォントサイズ（%指定） |
| maxWidth | number | 240 |
ボタンの最大幅（px） |
| maxWidthSp | number | null |
スマホ時の最大幅（null=PC値を継承） |
| backgroundColor | string | "var(--color-main)" |
ボタンの背景色 |
| textColor | string | "#ffffff" |
テキストの色 |
| paddingSize | string | "M" |
ブロック外側の余白サイズ（S/M/L） |
| innerPaddingSize | string | "M" |
ボタン内側の余白サイズ（S/M/L） |
| marginTop | number | 10 |
上マージン（px） |
| marginBottom | number | 10 |
下マージン（px） |
| alignment | string | "center" |
PC時の配置（left / center / right） |
| alignmentSp | string | "center" |
スマホ時の配置（left / center / right） |
| borderRadius | number | 0 |
角丸の半径（px）。0で四角 |
| borderWidth | number | 0 |
枠線の太さ（px）。0で枠線なし |
| borderColor | string | "#000000" |
枠線の色 |
リンクボタン 02（lw-button-2）
アイコン付きのボタン。グラデーション背景に対応し、右矢印アイコンでクリックを促すデザイン。フォント選択機能あり。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| btnText | string | "詳細はこちら" |
ボタンに表示するテキスト |
| bgGradient | string | "var(--color-main)" |
背景色またはグラデーション指定 |
| textColor | string | "#ffffff" |
テキストの色 |
| fontWeight | string | "400" |
フォントの太さ（400=通常 / 700=太字） |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開くかどうか |
| FontSet | string | "" |
フォントファミリー（空=テーマ設定に従う） |
| selectedIcon | string | SVG chevron-right | ボタン内に表示するSVGアイコン |
| iconColor | string | "#ffffff" |
アイコンの色 |
| borderWidth | number | 0 |
枠線の太さ（px） |
| borderColor | string | "var(--color-main)" |
枠線の色 |
リンクボタン 03（lw-button-3）
サブテキスト + メインテキスト + アイコンの2行構成ボタン。情報量が最も多く、資料請求やお問い合わせなど重要な導線に使う。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| btnTextSub | string | "お気軽にお問い合わせください" |
上段のサブテキスト |
| btnTextMain | string | "資料ダウンロードはこちら" |
下段のメインテキスト |
| bgGradient | string | "" |
背景色またはグラデーション指定 |
| textSubColor | string | "var(--color-main)" |
サブテキストの色 |
| textMainColor | string | "#ffffff" |
メインテキストの色 |
| fontWeight | string | "500" |
フォントの太さ |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開くかどうか |
| FontSet | string | "" |
フォントファミリー |
| selectedIcon | string | SVG envelope | ボタン内に表示するSVGアイコン（メール） |
| iconColor | string | "#ffffff" |
アイコンの色 |
プレミアムボタン（6種）
PRボタン 01（lw-pr-button-1）
サブテキスト + メインテキストの2行構成。ホバーアニメーション・シェイクアニメーション・ボックスシャドウに対応した高機能PRボタン。左右にアイコンを配置可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| textSub | string | "＼ テキストテキストテキスト ／" |
上段サブテキスト |
| textMain | string | "資料をダウンロード" |
メインテキスト |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| btnAlign | string | "center" |
PC時の配置（left / center / right） |
| btnAlignSp | string | "default" |
スマホ時の配置（default=PC値を継承） |
| bgColor | string | "#3e3a39" |
通常時の背景色 |
| bgColorHover | string | "#483c39ff" |
ホバー時の背景色 |
| bgColorSub | string | "#f9bb00" |
サブテキスト部分の背景色 |
| textColorMain | string | "#ffffff" |
メインテキストの色 |
| textColorSub | string | "#000000" |
サブテキストの色 |
| borderWidth | number | 3 |
枠線の太さ（px） |
| borderColor | string | "#ffffff" |
枠線の色 |
| borderRadius | number | 64 |
角丸の半径（px） |
| iconMain | string | "" |
メインアイコン（空=非表示） |
| iconRight | string | SVG chevron-right | 右側アイコン |
| iconMainColor | string | "#ffffff" |
メインアイコンの色 |
| iconRightColor | string | "#ffffff" |
右側アイコンの色 |
| iconMainSize | number | 20 |
メインアイコンのサイズ（px） |
| iconRightSize | number | 12 |
右側アイコンのサイズ（px） |
| iconMainMarginRight | number | 8 |
メインアイコンの右マージン（px） |
| FontSet | string | "" |
フォントファミリー |
| fontWeight | string | "700" |
メインテキストの太さ |
| fontWeightSub | string | "600" |
サブテキストの太さ |
| fontSizeMain | number | 20 |
メインテキストのフォントサイズ（px） |
| fontSizeMainSp | number | 18 |
スマホ時のメインフォントサイズ（px） |
| fontSizeSub | number | 12 |
サブテキストのフォントサイズ（px） |
| maxWidth | number | 340 |
ボタンの最大幅（px） |
| maxWidthSp | number | 300 |
スマホ時の最大幅（px） |
| transitionDuration | number | 0.3 |
ホバーアニメーションの時間（秒） |
| shakeAnimation | boolean | false |
シェイク（揺れ）アニメーションの有効化 |
| shakeInterval | number | 3 |
シェイクの間隔（秒） |
| shakeIntensity | string | "normal" |
シェイクの強さ（normal / strong） |
| shadowX | number | 0 |
ボックスシャドウのX方向オフセット（px） |
| shadowY | number | 0 |
ボックスシャドウのY方向オフセット（px） |
| shadowBlur | number | 6 |
ボックスシャドウのぼかし半径（px） |
| shadowOpacity | number | 0.2 |
ボックスシャドウの不透明度（0-1） |
PRボタン 02（lw-pr-button-2）
グラデーション背景対応の2行構成ボタン。サブテキスト + メインテキスト + 右矢印アイコン。ホバー時のグラデーション変化に対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| textSub | string | "＼ テキストテキストテキスト ／" |
上段サブテキスト |
| textMain | string | "お問い合わせはこちら" |
メインテキスト |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| btnAlign | string | "center" |
PC時の配置 |
| btnAlignSp | string | "default" |
スマホ時の配置 |
| bgGradient | string | "linear-gradient(135deg, #224394 0%, #12346f 100%)" |
通常時のグラデーション |
| bgGradientHover | string | "linear-gradient(135deg, #1a3470 0%, #0e285a 100%)" |
ホバー時のグラデーション |
| textColorMain | string | "#ffffff" |
メインテキストの色 |
| textColorSub | string | "#000000" |
サブテキストの色 |
| FontSet | string | "" |
フォントファミリー |
| fontWeightMain | string | "500" |
メインテキストの太さ |
| fontWeightSub | string | "500" |
サブテキストの太さ |
| fontSizeMain | number | 20 |
メインフォントサイズ（px） |
| fontSizeMainSp | number | 18 |
スマホ時のメインフォントサイズ（px） |
| fontSizeSub | number | 16 |
サブフォントサイズ（px） |
| maxWidth | number | 340 |
最大幅（px） |
| maxWidthSp | number | 300 |
スマホ時の最大幅（px） |
| borderRadius | number | 64 |
角丸（px） |
| paddingVertical | number | 1.2 |
上下パディング（em） |
| paddingHorizontal | number | 1 |
左右パディング（em） |
| subMarginBottom | number | 6 |
サブテキストの下マージン（px） |
| iconRight | string | "" |
右側アイコン（空=非表示） |
| iconRightColor | string | "#ffffff" |
右側アイコンの色 |
| iconRightSize | number | 20 |
右側アイコンのサイズ（px） |
| iconRightPosition | number | 20 |
右側アイコンの右端からの位置（px） |
| transitionDuration | number | 0.3 |
ホバーアニメーション時間（秒） |
| shakeAnimation | boolean | false |
シェイクアニメーション有効化 |
| shakeInterval | number | 3 |
シェイク間隔（秒） |
| shakeIntensity | string | "normal" |
シェイクの強さ |
| shadowX | number | 0 |
シャドウX（px） |
| shadowY | number | 0 |
シャドウY（px） |
| shadowBlur | number | 6 |
シャドウぼかし（px） |
| shadowOpacity | number | 0.2 |
シャドウ不透明度 |
PRボタン 03（lw-pr-button-3）
ダウンロードアイコン付きの2行構成ボタン。資料ダウンロードなどのCTA用。幅広（580px）で存在感のあるデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| textSub | string | "＼ テキストテキストテキスト ／" |
上段サブテキスト |
| textMain | string | "資料ダウンロードはこちら" |
メインテキスト |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| btnAlign | string | "center" |
PC時の配置 |
| btnAlignSp | string | "default" |
スマホ時の配置 |
| bgColor | string | "#e1a20e" |
通常時の背景色（ゴールド） |
| bgColorHover | string | "#c4880b" |
ホバー時の背景色 |
| textColorMain | string | "#ffffff" |
メインテキストの色 |
| textColorSub | string | "#ffffff" |
サブテキストの色 |
| borderWidth | number | 0 |
枠線の太さ（px） |
| borderColor | string | "#000000" |
枠線の色 |
| borderRadius | number | 2 |
角丸（px）。ほぼ四角 |
| iconMain | string | SVG download | メインアイコン（ダウンロード） |
| iconMainColor | string | "#ffffff" |
メインアイコンの色 |
| iconMainSize | number | 32 |
メインアイコンのサイズ（px） |
| iconMainMarginRight | number | 10 |
メインアイコンの右マージン（px） |
| iconMainMarginLeft | number | -8 |
メインアイコンの左マージン（px） |
| FontSet | string | "" |
フォントファミリー |
| fontWeightMain | string | "500" |
メインテキストの太さ |
| fontWeightSub | string | "500" |
サブテキストの太さ |
| fontSizeMain | number | 22 |
メインフォントサイズ（px） |
| fontSizeMainSp | number | 18 |
スマホ時のメインフォントサイズ（px） |
| fontSizeSub | number | 14 |
サブフォントサイズ（px） |
| maxWidth | number | 580 |
最大幅（px） |
| maxWidthSp | number | 480 |
スマホ時の最大幅（px） |
| paddingY | number | 1.2 |
上下パディング（em） |
| paddingX | number | 1.5 |
左右パディング（em） |
| transitionDuration | number | 0.3 |
ホバーアニメーション時間（秒） |
| shakeAnimation | boolean | false |
シェイクアニメーション有効化 |
| shakeInterval | number | 3 |
シェイク間隔（秒） |
| shakeIntensity | string | "normal" |
シェイクの強さ |
| shadowX | number | 0 |
シャドウX（px） |
| shadowY | number | 0 |
シャドウY（px） |
| shadowBlur | number | 6 |
シャドウぼかし（px） |
| shadowOpacity | number | 0.2 |
シャドウ不透明度 |
PRボタン 04 電話（lw-pr-button-4）
電話番号表示に特化したボタン。大きな電話番号 + 受付時間の2行構成で、電話アイコン付き。tel: リンクでスマホからワンタップ発信。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| textMain | string | "0120-000-000" |
電話番号テキスト |
| textSub | string | "受付時間 9:00~18:00（土日祝除く）" |
受付時間などの補足テキスト |
| btnUrl | string | "tel:0120000000" |
電話リンク（tel:スキーム） |
| openNewTab | boolean | false |
新しいタブで開く |
| btnAlign | string | "center" |
PC時の配置 |
| btnAlignSp | string | "default" |
スマホ時の配置 |
| bgColor | string | "#09488c" |
通常時の背景色（紺） |
| bgColorHover | string | "#063366" |
ホバー時の背景色 |
| textColorMain | string | "#ffffff" |
メインテキストの色 |
| textColorSub | string | "#ffffff" |
サブテキストの色 |
| borderWidth | number | 0 |
枠線の太さ（px） |
| borderColor | string | "#000000" |
枠線の色 |
| borderRadius | number | 2 |
角丸（px） |
| iconMain | string | SVG phone | メインアイコン（電話） |
| iconMainColor | string | "#ffffff" |
メインアイコンの色 |
| iconMainSize | number | 32 |
メインアイコンのサイズ（px） |
| iconMainMarginRight | number | 8 |
メインアイコンの右マージン（px） |
| iconMainMarginLeft | number | -8 |
メインアイコンの左マージン（px） |
| FontSet | string | "" |
フォントファミリー |
| fontWeightMain | string | "500" |
メインテキストの太さ |
| fontWeightSub | string | "500" |
サブテキストの太さ |
| fontSizeMain | number | 28 |
メインフォントサイズ（px）。大きめ表示 |
| fontSizeMainSp | number | 18 |
スマホ時のメインフォントサイズ（px） |
| fontSizeSub | number | 14 |
サブフォントサイズ（px） |
| letterSpacing | number | 0.05 |
文字間隔（em）。電話番号を読みやすく |
| maxWidth | number | 580 |
最大幅（px） |
| maxWidthSp | number | 480 |
スマホ時の最大幅（px） |
| paddingY | number | 1.2 |
上下パディング（em） |
| paddingX | number | 1.5 |
左右パディング（em） |
| transitionDuration | number | 0.3 |
ホバーアニメーション時間（秒） |
| shakeAnimation | boolean | false |
シェイクアニメーション有効化 |
| shakeInterval | number | 3 |
シェイク間隔（秒） |
| shakeIntensity | string | "normal" |
シェイクの強さ |
| shadowX | number | 0 |
シャドウX（px） |
| shadowY | number | 0 |
シャドウY（px） |
| shadowBlur | number | 6 |
シャドウぼかし（px） |
| shadowOpacity | number | 0.2 |
シャドウ不透明度 |
PRボタン 05（lw-pr-button-5）
コンパクトな1行ボタン。アイコン + テキストのシンプル構成で、丸みのあるピル型デザイン。ページ内の補助的なCTAに適している。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| textMain | string | "資料ダウンロードはこちら" |
ボタンテキスト |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| btnAlign | string | "center" |
PC時の配置 |
| btnAlignSp | string | "default" |
スマホ時の配置 |
| bgColor | string | "#e1a20e" |
通常時の背景色 |
| bgColorHover | string | "#c4880b" |
ホバー時の背景色 |
| textColorMain | string | "#ffffff" |
テキストの色 |
| borderWidth | number | 0 |
枠線の太さ（px） |
| borderColor | string | "#000000" |
枠線の色 |
| borderRadius | number | 48 |
角丸（px）。ピル型 |
| iconMain | string | SVG download | メインアイコン |
| iconMainColor | string | "#ffffff" |
メインアイコンの色 |
| iconMainSize | number | 24 |
メインアイコンのサイズ（px） |
| iconMainMarginRight | number | 4 |
メインアイコンの右マージン（px） |
| FontSet | string | "" |
フォントファミリー |
| fontWeight | string | "500" |
フォントの太さ |
| fontSizeMain | number | 16 |
フォントサイズ（px） |
| fontSizeMainSp | number | 14 |
スマホ時のフォントサイズ（px） |
| paddingY | number | 0.6 |
上下パディング（em） |
| paddingX | number | 1.2 |
左右パディング（em） |
| transitionDuration | number | 0.3 |
ホバーアニメーション時間（秒） |
| shakeAnimation | boolean | false |
シェイクアニメーション有効化 |
| shakeInterval | number | 3 |
シェイク間隔（秒） |
| shakeIntensity | string | "normal" |
シェイクの強さ |
| shadowX | number | 0 |
シャドウX（px） |
| shadowY | number | 0 |
シャドウY（px） |
| shadowBlur | number | 6 |
シャドウぼかし（px） |
| shadowOpacity | number | 0.2 |
シャドウ不透明度 |
ボタン 06 複数リンク（lw-pr-button-6）
複数のリンクボタンをグリッド配列で表示。PC/SP別にカラム数・間隔・パディングを細かく制御可能。アウトラインスタイル（枠線ベース）がデフォルト。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| button6Buttons | array | [{text, url, isBlank} x 2] |
ボタンリスト。各アイテムにtext, url, isBlankを持つ |
| button6MaxWidthPc | number | 600 |
PC時のコンテナ最大幅（px） |
| button6MaxWidthSp | number | -1 |
スマホ時の最大幅（-1=PC値を継承） |
| button6ColumnsPc | number | 2 |
PC時のカラム数 |
| button6ColumnsSp | number | 1 |
スマホ時のカラム数 |
| button6RowGapPc | number | 16 |
PC時の行間隔（px） |
| button6RowGapSp | number | -1 |
スマホ時の行間隔（-1=PC値を継承） |
| button6ColumnGapPc | number | 24 |
PC時の列間隔（px） |
| button6ColumnGapSp | number | 8 |
スマホ時の列間隔（px） |
| button6PaddingTopPc | number | 12 |
PC時の上パディング（px） |
| button6PaddingRightPc | number | 12 |
PC時の右パディング（px） |
| button6PaddingBottomPc | number | 12 |
PC時の下パディング（px） |
| button6PaddingLeftPc | number | 12 |
PC時の左パディング（px） |
| button6PaddingTopSp | number | -1 |
スマホ時の上パディング（-1=PC値を継承） |
| button6PaddingRightSp | number | -1 |
スマホ時の右パディング |
| button6PaddingBottomSp | number | -1 |
スマホ時の下パディング |
| button6PaddingLeftSp | number | -1 |
スマホ時の左パディング |
| button6MinHeightPc | number | 64 |
PC時のボタン最小高さ（px） |
| button6MinHeightSp | number | 56 |
スマホ時のボタン最小高さ（px） |
| button6PositionPc | string | "center" |
PC時のコンテナ配置 |
| button6PositionSp | string | "" |
スマホ時の配置（空=PC値を継承） |
| button6FontSizePc | number | 16 |
PC時のフォントサイズ（px） |
| button6FontSizeSp | number | 15 |
スマホ時のフォントサイズ（px） |
| button6BorderWidthPc | number | 2 |
PC時の枠線太さ（px） |
| button6BorderWidthSp | number | 1 |
スマホ時の枠線太さ（px） |
| button6BorderStyle | string | "solid" |
枠線のスタイル（solid / dashed / dotted） |
| button6BorderColor | string | "var(--color-main)" |
枠線の色 |
| button6TextColor | string | "#000000" |
テキストの色 |
| button6BorderRadiusPc | number | 10 |
PC時の角丸（px） |
| button6BorderRadiusSp | number | -1 |
スマホ時の角丸（-1=PC値を継承） |
| button6BgColor | string | "#ffffff" |
ボタンの背景色 |
| button6FontSet | string | "" |
フォントファミリー |
| button6FontWeight | string | "" |
フォントの太さ |
| button6ShowArrow | boolean | false |
右矢印アイコンの表示 |
| button6TextAlign | string | "center" |
テキストの揃え方 |
| button6ArrowColor | string | "var(--color-main)" |
矢印アイコンの色 |
> SP値が -1 のとき: PC値をそのまま継承する仕様。スマホで別の値にしたい場合のみ設定する。
有料ボタン（2種）
リンクボタン 04（paid-block-lw-button-4）
有料プラン専用のシンプルボタン。アイコン表示のON/OFF切替、フォントサイズのプリセット選択（s/m/l）に対応。ピル型（角丸200）がデフォルト。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| blockId | string | ― | ブロック固有ID（自動生成） |
| btnText | string | "詳細はこちら" |
ボタンに表示するテキスト |
| bgColor | string | "var(--color-main)" |
背景色 |
| textColor | string | "#ffffff" |
テキストの色 |
| fontWeight | string | "400" |
フォントの太さ |
| FontSet | string | "" |
フォントファミリー |
| fontSize | string | "m" |
フォントサイズプリセット（s / m / l） |
| position | string | "center" |
PC時の配置 |
| positionSp | string | "" |
スマホ時の配置（空=PC値を継承） |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| selectedIcon | string | SVG chevron-right | ボタン内アイコン |
| iconVisible | boolean | true |
アイコンの表示/非表示 |
| borderWidth | number | 1 |
枠線の太さ（px） |
| borderColor | string | "#ffffff" |
枠線の色 |
| borderRadius | number | 200 |
角丸（px）。完全ピル型 |
| maxWidth | number | 320 |
最大幅（px） |
| maxWidthSp | number | 320 |
スマホ時の最大幅（px） |
リンクボタン 05 複数ボタン（paid-block-lw-button-5）
複数のボタンを並べて表示。各ボタンにサブテキスト・アイコン・個別の色設定が可能。メインテキスト + サブテキスト + アイコンの構成。
トップレベル属性:
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| blockId | string | ― | ブロック固有ID（自動生成） |
| fontWeight | string | "400" |
全ボタン共通のフォント太さ |
| FontSet | string | "" |
全ボタン共通のフォントファミリー |
| position | string | "center" |
ボタン群の配置 |
| gapX | number | 12 |
ボタン間の横間隔（px） |
| gapY | number | 12 |
ボタン間の縦間隔（px） |
| borderRadius | number | 12 |
全ボタン共通の角丸（px） |
| buttons | array | ― | ボタンリスト（下記の構造を持つ） |
各ボタンアイテムの属性（buttons配列の要素）:
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| enabled | boolean | ― | このボタンを表示するか |
| btnText | string | ― | メインテキスト |
| subText | string | ― | サブテキスト |
| bgColor | string | ― | 背景色 |
| textColor | string | ― | テキストの色 |
| btnUrl | string | ― | リンク先URL |
| openNewTab | boolean | ― | 新しいタブで開く |
| selectedIcon | string | ― | SVGアイコン |
| iconVisible | boolean | ― | アイコン表示/非表示 |
| iconWidth | number | 34 |
アイコンのサイズ（px） |
| iconColor | string | ― | アイコンの色 |
| outerBorderWidth | number | 0 |
外枠線の太さ（px） |
| outerBorderColor | string | ― | 外枠線の色 |
| borderWidth | number | 1 |
内枠線の太さ（px） |
| borderColor | string | ― | 内枠線の色 |
テンプレートボタン（1種）
リンクボタン 01 shin（shin-gas-station-01-button-01）
ガソリンスタンドテンプレート専用ボタン。lw-button-2をベースに、カラーモード切替（テーマカラー/カスタム色）を追加。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| btnText | string | "詳細はこちら" |
ボタンテキスト |
| bgGradient | string | "var(--color-main)" |
背景色またはグラデーション |
| colorMode | string | "select" |
カラーモード（select=テーマカラー / custom=自由入力） |
| customBgColor | string | "#0073aa" |
カスタムモード時の背景色 |
| textColor | string | "#ffffff" |
テキストの色 |
| fontWeight | string | "400" |
フォントの太さ |
| btnUrl | string | "" |
リンク先URL |
| openNewTab | boolean | false |
新しいタブで開く |
| FontSet | string | "" |
フォントファミリー |
| selectedIcon | string | SVG chevron-right | ボタン内アイコン |
| iconColor | string | "#ffffff" |
アイコンの色 |
| borderWidth | number | 0 |
枠線の太さ（px） |
| borderColor | string | "var(--color-main)" |
枠線の色 |
CTAブロック
無料CTA（2種）
CTA 01（cta-1）
背景画像 + カラーフィルター + タイトル + 本文 + CTAボタンの構成。ページの途中や末尾に配置して、コンバージョンを促すセクション。見出しレベルの指定が可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | "無料相談受付中" |
見出しテキスト |
| text | string | （プレースホルダー） | 説明文（HTML可） |
| buttonText | string | "お問い合わせ" |
CTAボタンのテキスト |
| buttonUrl | string | "#" |
ボタンのリンク先 |
| openInNewTab | boolean | false |
新しいタブで開く |
| imageUrl | string | "" |
背景画像のURL |
| imageAlt | string | "背景画像" |
画像の代替テキスト |
| filterColor | string | "#054161" |
背景オーバーレイの色（濃青） |
| buttonBackgroundColor | string | "var(--color-main)" |
ボタンの背景色 |
| buttonBorderColor | string | "#fff" |
ボタンの枠線色 |
| buttonBorderSize | number | 1 |
ボタンの枠線太さ（px） |
| buttonMaxWidth | number | 240 |
ボタンの最大幅（px） |
| pcTextAlign | string | "center" |
PC時のテキスト配置 |
| mobileTextAlign | string | "center" |
スマホ時のテキスト配置 |
| maxWidth | number | 0 |
コンテンツ最大幅（0=制限なし） |
| headingLevel | number | 2 |
見出しタグレベル（2=h2, 3=h3等） |
> 注意: 内部にh2見出しを含む。直前に見出しブロックを配置すると見出し構造が重複するため注意。
CTA 02 電話＋メール（cta-2）
電話番号とメールボタンを並べた連絡先CTA。背景画像 + フィルター付き。実店舗やサービス業向け。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | "お問合せはこちら" |
見出しテキスト |
| addressText | string | （住所テキスト） | 住所や所在地情報（HTML可） |
| phoneText | string | （受付時間テキスト） | 電話受付時間の説明 |
| phoneNumber | string | "042-000-0000" |
表示する電話番号 |
| mailText | string | "メールでお問い合わせ" |
メールボタンのテキスト |
| mailUrl | string | "mailto:info@example.com" |
メールリンク先 |
| backgroundImage | string | （画像URL） | 背景画像のURL |
| filterColor | string | "rgba(0,0,0,0.5)" |
背景オーバーレイの色 |
| buttonBackgroundColor | string | "#0073aa" |
メールボタンの背景色 |
| buttonTextColor | string | "#ffffff" |
メールボタンのテキスト色 |
| selectedIcon | string | SVG envelope | メールボタン内のアイコン |
| maxWidth | number | 0 |
コンテンツ最大幅（0=制限なし） |
有料CTA（2種）
CTA 03 電話誘導（paid-block-cta-3）
電話コンバージョン特化のCTA。メインタイトル + リード文 + 3つの訴求ポイント + 電話番号 + イメージ画像。中古車買取・出張サービスなど即時対応を訴求する業種向け。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "中古車・高価買取" |
メイン見出し |
| leadText | string | （リードテキスト） | 訴求文 |
| listItem1 | string | "即日買取" |
訴求ポイント1 |
| listItem2 | string | "出張買取" |
訴求ポイント2 |
| listItem3 | string | "実績多数" |
訴求ポイント3 |
| phoneNumber | string | "0120-000-000" |
電話番号 |
| imageUrl | string | （画像URL） | イメージ画像のURL |
| objectFit | string | "object_fit_cover" |
画像のフィット方法 |
| objectPosition | string | "object_position_center" |
画像の表示位置 |
| bgColor | string | "#f8f4de" |
背景色（クリーム） |
| bdColor | string | "#f45353" |
アクセントカラー（赤系） |
| tapTelText | string | "タップしてお電話ください" |
スマホ向け電話タップ誘導テキスト |
| fontTel | string | "Montserrat" |
電話番号のフォント |
| fontWeightTel | string | "" |
電話番号のフォント太さ |
CTA 04 2カラム誘導（paid-block-cta-4）
左右2カラムで別々のリンク先へ誘導するCTA。各カラムに背景画像 + フィルター + タイトル + サブタイトル + 説明文 + ボタンを配置。フランチャイズ募集と求人など、2つの訴求を並列表示。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| linkUrl1 | string | "" |
左カラムのリンク先 |
| mainTitle1 | string | "Franchise" |
左カラムの英語タイトル |
| subTitle1 | string | "加盟店募集" |
左カラムの日本語サブタイトル |
| desc1 | string | （説明テキスト） | 左カラムの説明文 |
| backgroundImage1 | string | （画像URL） | 左カラムの背景画像 |
| filterColor1 | string | "rgba(38,129,147,1)" |
左カラムのフィルター色 |
| filterOpacity1 | number | 60 |
左カラムのフィルター不透明度（%） |
| btnText1 | string | "詳細はこちら" |
左カラムのボタンテキスト |
| bgColor1 | string | "#d88d00" |
左カラムのボタン背景色 |
| textColor1 | string | "#ffffff" |
左カラムのボタンテキスト色 |
| linkUrl2 | string | "" |
右カラムのリンク先 |
| mainTitle2 | string | "Recruit" |
右カラムの英語タイトル |
| subTitle2 | string | "求人情報" |
右カラムの日本語サブタイトル |
| desc2 | string | （説明テキスト） | 右カラムの説明文 |
| backgroundImage2 | string | （画像URL） | 右カラムの背景画像 |
| filterColor2 | string | "#690707" |
右カラムのフィルター色 |
| filterOpacity2 | number | 60 |
右カラムのフィルター不透明度（%） |
| btnText2 | string | "詳細はこちら" |
右カラムのボタンテキスト |
| bgColor2 | string | "#F02D2D" |
右カラムのボタン背景色 |
| textColor2 | string | "#ffffff" |
右カラムのボタンテキスト色 |
| maxWidth | number | 0 |
コンテンツ最大幅（0=制限なし） |
テンプレートCTA（2種）
CTA 1 shin（shin-gas-station-01-cta）
ガソリンスタンドテンプレート用の採用情報CTA。背景画像 + フィルター + タイトル + サブタイトル + 説明文 + ボタン。白ボタンに枠線カラーのデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | "採用情報" |
見出しテキスト |
| titleSub | string | "Recruit" |
英語サブタイトル |
| text | string | （採用テキスト） | 説明文 |
| buttonText | string | "詳しく見る" |
ボタンテキスト |
| buttonUrl | string | "#" |
リンク先URL |
| openInNewTab | boolean | false |
新しいタブで開く |
| imageUrl | string | "" |
背景画像のURL |
| filterColor | string | "#054161" |
フィルターの色 |
| buttonBackgroundColor | string | "#fff" |
ボタン背景色（白） |
| buttonBorderColor | string | "var(--color-main)" |
ボタン枠線色 |
| buttonBorderSize | number | 1 |
ボタン枠線太さ（px） |
| buttonMaxWidth | number | 240 |
ボタン最大幅（px） |
| pcTextAlign | string | "center" |
PC時のテキスト配置 |
| mobileTextAlign | string | "left" |
スマホ時のテキスト配置（左寄せ） |
CTA 2 shin（shin-gas-station-01-cta2）
ガソリンスタンドテンプレート用のお問い合わせCTA。薄いフィルター + タイトル + 説明文 + メールアイコン付きボタン。背景画像なしでも使えるライトなデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | string | "お問い合わせ・ご相談" |
見出しテキスト |
| text | string | （テキスト） | 説明文 |
| buttonText | string | "お問い合わせ" |
ボタンテキスト |
| buttonUrl | string | "#" |
リンク先URL |
| openInNewTab | boolean | false |
新しいタブで開く |
| filterColor | string | "#054161" |
フィルターの色 |
| filterOpacity | number | 0.05 |
フィルター不透明度（非常に薄い） |
| buttonTextColor | string | "#fff" |
ボタンテキスト色 |
| buttonBackgroundColor | string | "var(--color-main)" |
ボタン背景色 |
| buttonBorderColor | string | "var(--color-main)" |
ボタン枠線色 |
| buttonBorderSize | number | 1 |
ボタン枠線太さ（px） |
| selectedIcon | string | SVG envelope | ボタン内のメールアイコン |
どれを使えばいい？ — ボタン選択ガイド
ボタンの選び方
| 用途 | おすすめブロック | ティア |
|---|---|---|
| 記事内のシンプルなリンク | lw-button-1 | 無料 |
| アイコン付きで目立たせたい | lw-button-2 | 無料 |
| 説明文付きの重要CTA（資料請求等） | lw-button-3 | 無料 |
| サブテキスト + ホバー + シェイクの高機能ボタン | lw-pr-button-1 | プレミアム |
| グラデーション背景のボタン | lw-pr-button-2 | プレミアム |
| 資料ダウンロード（幅広・大きめ） | lw-pr-button-3 | プレミアム |
| 電話番号のタップ発信 | lw-pr-button-4 | プレミアム |
| コンパクトなピル型ボタン | lw-pr-button-5 | プレミアム |
| 複数リンクをグリッド配置 | lw-pr-button-6 | プレミアム |
| ピル型 + アイコンON/OFF | paid-block-lw-button-4 | 有料 |
| 複数ボタン + サブテキスト + 個別色 | paid-block-lw-button-5 | 有料 |
| テンプレ用（カラーモード切替） | shin-gas-station-01-button-01 | テンプレート |
CTAの選び方
| 用途 | おすすめブロック | ティア |
|---|---|---|
| 汎用のページ末尾CTA | cta-1 | 無料 |
| 電話 + メールの連絡先セクション | cta-2 | 無料 |
| 電話コンバージョン特化（訴求ポイント付き） | paid-block-cta-3 | 有料 |
| 2つの異なるリンク先への同時誘導 | paid-block-cta-4 | 有料 |
| テンプレ用・採用情報CTA | shin-gas-station-01-cta | テンプレート |
| テンプレ用・お問い合わせCTA（ライト） | shin-gas-station-01-cta2 | テンプレート |
CTA配置のベストプラクティス
- ページ最下部に1つは必ず配置 -- 読了後に迷わせない
- 長いページでは中間にも配置 -- スクロール途中での離脱を防ぐ
- FVのすぐ下には置かない -- まだ情報を得ていない段階ではクリックされにくい
- ボタンURLは必ず設定 -- 空のままだとリンク切れになる
- 電話番号ボタンはtel:スキームを忘れずに --
tel:0120000000の形式で設定
よくある質問
Q: ボタンとCTAの違いは何ですか？
A: ボタンは単体のリンクボタンです。CTAは背景画像・見出し・説明文・ボタンを含む「セクション全体」のブロックです。ページの途中や末尾に配置してコンバージョンを促す目的で使います。
Q: ボタンの色をテーマカラーに合わせたいです。
A: 背景色の初期値が var(--color-main) になっているブロックは、カスタマイザーで設定したメインカラーが自動で適用されます。個別に変更したい場合のみ色コードを指定してください。
Q: ホバー時のアニメーションを付けたいです。
A: PRボタン01〜05（プレミアム）にはホバー色の変更やシェイク（揺れ）アニメーション機能があります。無料ボタンにはホバー設定はありません。
Q: 電話番号ボタンをPCでは非表示にできますか？
A: ブロック自体に非表示設定はありません。WordPress標準の「追加CSSクラス」にレスポンシブ非表示用のクラスを追加するか、CSSで対応してください。
Q: 複数のボタンを横並びにしたいです。
A: PRボタン06（複数リンク）またはリンクボタン05（有料・複数ボタン）を使うと、グリッド形式で複数ボタンを並べられます。カラム数やギャップも設定可能です。
最終更新: 2026-03-15 13:00