FAQ・ステップ・お客様の声・コメント・フォーム・ソリューション ブロック — 全種マニュアル
LiteWordが提供するFAQ、ステップ、お客様の声、吹き出しコメント、お問い合わせフォーム、ソリューションブロックの完全リファレンス。全24ブロック、全属性を網羅。
設定手順
基本の3ステップ
-
ブロックを挿入する
- エディター画面で「+」ボタンをクリック
- ブロック名で検索（例: 「FAQ」「ステップ」「お客様の声」「吹き出し」「フォーム」「ソリューション」）
- 目的のブロックをクリックしてページに挿入
-
コンテンツを編集する
- FAQ: 質問テキスト（Q）と回答テキスト（A）を入力。項目の追加・削除も可能
- ステップ: 各ステップの見出しと説明文を入力。番号は自動付与されるものが多い
- お客様の声: 名前・肩書き・コメント本文を入力。画像がある場合はアップロード
- 吹き出しコメント: 話者の名前とコメントテキストを入力。アバター画像を設定
- フォーム:
formId でどのメールフォーム設定を使うかを指定（管理画面「LiteWord > メールフォーム」で事前に作成）
- ソリューション: 課題/解決策のテキストと画像を入力
-
サイドバーで見た目を調整する
- ブロックを選択した状態で右サイドバーを確認
- 色（メインカラー、背景色、文字色）を変更
- フォント（種類・太さ・サイズ）を設定
- レイアウト（最大幅、カラム数、配置）を調整
- 共通サイドバー設定（マージン・パディング・アニメーション等）も利用可能 → 共通サイドバー設定
よくある質問
Q: FAQの項目を増やしたい・減らしたい
A: エディター上で「項目を追加」「項目を削除」ボタンを使います。contents 配列の数が自動で変わります。
Q: フォームの送信先メールアドレスを変えたい
A: ブロック側ではなく、WordPress管理画面の「LiteWord > メールフォーム」で該当フォームの設定を変更してください。ブロックは formId でフォームを参照しているだけです。
Q: お客様の声を3件以上表示したい
A: lw-voice-1 はエディターで項目を追加できます。スライダー形式の paid-block-voice-3（有料）なら多数の声を効率的に見せられます。
Q: 吹き出しの向きを左右どちらにするか
A: lw-comment-1 はサイドバーの commentAlignment で left（左）または right（右）を選択します。lw-pr-comment-2 は comment2ImagePosition で画像の位置を指定します。
Q: ステップブロックの番号を「01」以外から始めたい
A: lw-pr-step-8 は stepNo 属性で開始番号を変更できます。paid-block-lw-step-3 以降は各項目の no フィールドで個別に番号を指定可能です。
ティア凡例:
- 無料 — LiteWord標準同梱
- プレミアム — プレミアムプラン以上で利用可能
- 有料 — 単体購入またはプロフェッショナルプラン以上
- テンプレート — テンプレート専用（テンプレート購入時に付属）
目次
- よくある質問（FAQ）
- ステップ
- お客様の声
- 吹き出しコメント
- お問い合わせフォーム
- ソリューション
よくある質問（FAQ）
よくある質問 01（lw-qa-1）— 無料
アコーディオン式のFAQ。Q/Aラベル付きで、クリックすると回答が開閉する。よくある質問ページやサービスページの下部に最適。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
blockId |
string |
— |
ブロック固有のID。ページ内リンクやCSS指定に使用 |
FontLabel |
string |
"Roboto" |
Q/Aラベル（「Q」「A」の文字）のフォント |
fontWeightLabel |
string |
"" |
Q/Aラベルのフォントウェイト（空欄=デフォルト） |
mainColor |
string |
"var(--color-main)" |
Q/Aラベルやアイコンの装飾色 |
fontP |
string |
"" |
回答テキストのフォント |
fontWeightDt |
string |
"" |
質問（dt要素）のフォントウェイト |
fontWeightDd |
string |
"" |
回答（dd要素）のフォントウェイト |
contents |
array |
5件 |
Q&Aペアの配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
text_q |
string |
質問テキスト |
text_a |
string |
回答テキスト |
Q&A 02（lw-pr-qa-2）— プレミアム
画像付きQ&A。質問者・回答者のアバターアイコンを表示できる。会話形式のFAQに向いている。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
maxWidth |
number |
0 |
最大幅（px）。0=制限なし |
qImageBorderColor |
string |
"#3c7fc3" |
質問者アバター画像のボーダー色 |
qTextBg |
string |
"#eaf4ff" |
質問テキストの背景色 |
qTextFontSizePc |
number |
24 |
質問テキストのPC用フォントサイズ（px） |
qTextFontSizeSp |
number |
16 |
質問テキストのSP用フォントサイズ（px） |
aImageBorderColor |
string |
"#3c7fc3" |
回答者アバター画像のボーダー色 |
どれを使えばいい？（FAQ）
| 用途 |
おすすめ |
| シンプルなアコーディオンFAQ |
lw-qa-1（無料） |
| アバター画像付きの会話形式FAQ |
lw-pr-qa-2（プレミアム） |
ステップ
step 01（lw-step-1）— 無料
グラデーション背景付きのステップフロー。採用フローやサービス利用手順に最適。番号付きアイコンで順序を明示。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
filterOpacity |
number |
0.15 |
背景フィルターの透過度（0〜1） |
titleText |
string |
"採用までの流れ" |
セクション見出しテキスト |
ulMaxWidth |
number |
800 |
ステップリストの最大幅（px） |
fontH3 |
string |
"" |
ステップタイトルのフォント |
fontWeightH3 |
string |
"" |
ステップタイトルのフォントウェイト |
fontP |
string |
"" |
ステップ説明文のフォント |
fontWeightP |
string |
"" |
ステップ説明文のフォントウェイト |
colorLiSvg |
string |
"var(--color-main)" |
番号アイコン（SVG）の色 |
contents |
array |
5件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 02（lw-step-2）— 無料
ボーダーラインで各ステップを接続するフロー。step-01よりシンプルで控えめなデザイン。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
ulMaxWidth |
number |
800 |
ステップリストの最大幅（px） |
fontH3 |
string |
"" |
ステップタイトルのフォント |
fontWeightH3 |
string |
"" |
ステップタイトルのフォントウェイト |
fontP |
string |
"" |
ステップ説明文のフォント |
fontWeightP |
string |
"" |
ステップ説明文のフォントウェイト |
colorLiSvg |
string |
"var(--color-main)" |
番号アイコン（SVG）の色 |
borderWidth |
number |
1 |
区切りボーダーの太さ（px） |
contents |
array |
5件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 07（lw-pr-step-7）— プレミアム
カード型のステップグリッド。丸番号付きで、PCとSPのカラム数を個別に指定可能。3カラム以上のレイアウトにも対応。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
circleBgColor |
string |
"#4a9d9c" |
丸番号の背景色 |
cardBgColor |
string |
"#ffffff" |
カードの背景色 |
borderColor |
string |
"#e0e0e0" |
カードのボーダー色 |
ulMaxWidth |
number |
1200 |
リスト全体の最大幅（px） |
columnCountPc |
number |
3 |
PC表示時のカラム数 |
columnCountSp |
number |
2 |
SP表示時のカラム数 |
columnCount |
number |
— |
カラム数の直接指定（初期値なし、設定時に優先） |
fontSizeClass |
string |
"font_size_m" |
テキストのフォントサイズクラス |
fontNo |
string |
"Murecho" |
番号のフォント |
fontWeightNo |
string |
"700" |
番号のフォントウェイト |
colorNo |
string |
"#ffffff" |
番号の文字色 |
titleTag |
string |
"h3" |
タイトルのHTMLタグ（h2/h3/h4/p） |
fontH3 |
string |
"" |
タイトルのフォント |
fontWeightH3 |
string |
"600" |
タイトルのフォントウェイト |
colorH3 |
string |
"#333333" |
タイトルの文字色 |
fontP |
string |
"" |
説明文のフォント |
fontWeightP |
string |
"400" |
説明文のフォントウェイト |
colorP |
string |
"#666666" |
説明文の文字色 |
contents |
array |
3件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 04（lw-pr-step-8）— プレミアム
グラデーション背景と角丸カードの番号付きステップ。ステップ番号のスタイルを細かくカスタマイズ可能。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
ulMaxWidth |
number |
1080 |
リスト全体の最大幅（px） |
fontNo |
string |
"Murecho" |
番号のフォント |
fontWeightNo |
string |
"600" |
番号のフォントウェイト |
colorNo |
string |
"var(--color-main)" |
番号の文字色 |
stepNo |
string |
"01" |
開始番号の表示形式 |
liInPtPc |
number |
0.6 |
PC時のリスト項目内パディング（em） |
liInPtSp |
number |
0.6 |
SP時のリスト項目内パディング（em） |
stepBdrPc |
number |
10 |
PC時のカード角丸（px） |
stepBdrSp |
number |
10 |
SP時のカード角丸（px） |
step 03（paid-block-lw-step-3）— 有料
番号付きステップカード。見出しタグを自由に選択でき、SEOを意識した構成が可能。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
ulMaxWidth |
number |
1080 |
リスト全体の最大幅（px） |
fontSizeClass |
string |
"font_size_m" |
テキストのフォントサイズクラス |
fontNo |
string |
"Murecho" |
番号のフォント |
fontWeightNo |
string |
"600" |
番号のフォントウェイト |
colorNo |
string |
"" |
番号の文字色（空欄=テーマデフォルト） |
titleTag |
string |
"h3" |
タイトルのHTMLタグ（h2/h3/h4/p） |
fontH3 |
string |
"" |
タイトルのフォント |
fontWeightH3 |
string |
"" |
タイトルのフォントウェイト |
colorH3 |
string |
"" |
タイトルの文字色 |
fontP |
string |
"" |
説明文のフォント |
fontWeightP |
string |
"" |
説明文のフォントウェイト |
colorP |
string |
"" |
説明文の文字色 |
contents |
array |
3件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
no |
string |
ステップ番号（例: "01"） |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 04（paid-block-lw-step-4）— 有料
step-03と同様の構成だが、番号がアクセントカラーで強調される。メインカラーを使った視覚的なアクセント効果。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
ulMaxWidth |
number |
1080 |
リスト全体の最大幅（px） |
fontSizeClass |
string |
"font_size_m" |
テキストのフォントサイズクラス |
fontNo |
string |
"Murecho" |
番号のフォント |
fontWeightNo |
string |
"600" |
番号のフォントウェイト |
colorNo |
string |
"var(--color-main)" |
番号の文字色（メインカラーで強調） |
titleTag |
string |
"h3" |
タイトルのHTMLタグ（h2/h3/h4/p） |
fontH3 |
string |
"" |
タイトルのフォント |
fontWeightH3 |
string |
"" |
タイトルのフォントウェイト |
colorH3 |
string |
"" |
タイトルの文字色 |
fontP |
string |
"" |
説明文のフォント |
fontWeightP |
string |
"" |
説明文のフォントウェイト |
colorP |
string |
"" |
説明文の文字色 |
contents |
array |
3件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
no |
string |
ステップ番号（例: "01"） |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 05（paid-block-lw-step-5）— 有料
シャドウとボーダー付きのステップカード。ボーダーの太さ・スタイル・色、影のぼかし・色・透過度を細かく制御できる。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
bgGradient |
string |
"var(--color-main)" |
背景グラデーションのベースカラー |
ulMaxWidth |
number |
1080 |
リスト全体の最大幅（px） |
fontSizeClass |
string |
"font_size_m" |
テキストのフォントサイズクラス |
borderWidth |
number |
0 |
カードボーダーの太さ（px）。0=ボーダーなし |
borderStyle |
string |
"solid" |
カードボーダーのスタイル（solid/dashed/dotted等） |
borderColor |
string |
"var(--color-main)" |
カードボーダーの色 |
shadowBlur |
number |
6 |
カードシャドウのぼかし半径（px） |
shadowColor |
string |
"#000000" |
カードシャドウの色 |
shadowAlpha |
number |
0.16 |
カードシャドウの透過度（0〜1） |
fontNo |
string |
"Murecho" |
番号のフォント |
fontWeightNo |
string |
"600" |
番号のフォントウェイト |
colorNo |
string |
"" |
番号の文字色 |
titleTag |
string |
"h3" |
タイトルのHTMLタグ（h2/h3/h4/p） |
fontH3 |
string |
"" |
タイトルのフォント |
fontWeightH3 |
string |
"" |
タイトルのフォントウェイト |
colorH3 |
string |
"" |
タイトルの文字色 |
fontP |
string |
"" |
説明文のフォント |
fontWeightP |
string |
"" |
説明文のフォントウェイト |
colorP |
string |
"" |
説明文の文字色 |
contents |
array |
3件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
no |
string |
ステップ番号（例: "01"） |
title |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
step 06（paid-block-lw-step-6）— 有料
画像付きステップカード。各ステップに画像・番号・リンクURLを設定可能。最も多機能なステップブロック。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
fontLi |
string |
"" |
タイトルのフォント |
fontColorLi |
string |
"" |
タイトルの文字色 |
fontWeightLi |
string |
"600" |
タイトルのフォントウェイト |
titleFontSizeClass |
string |
"font_size_m" |
タイトルのフォントサイズクラス |
fontLiP |
string |
"" |
説明文のフォント |
fontColorLiP |
string |
"var(--color-black)" |
説明文の文字色 |
fontWeightLiP |
string |
"400" |
説明文のフォントウェイト |
textFontSizeClass |
string |
"font_size_m" |
説明文のフォントサイズクラス |
borderColor |
string |
"var(--color-main)" |
カードのボーダー色 |
borderSize |
number |
0 |
カードのボーダー太さ（px） |
imageBorderRadius |
number |
0 |
画像の角丸（px） |
imageObjectFit |
string |
"cover" |
画像のフィット方法（cover/contain） |
imageAspectH |
number |
300 |
画像のアスペクト高さ（px） |
titleTag |
string |
"h3" |
タイトルのHTMLタグ（h2/h3/h4/p） |
titleBorderColor |
string |
"var(--color-main)" |
タイトル下ボーダーの色 |
titleBorderSize |
number |
2 |
タイトル下ボーダーの太さ（px） |
numberBgColor |
string |
"var(--color-main)" |
番号バッジの背景色 |
showNumber |
boolean |
true |
番号表示のON/OFF |
liBorderColor |
string |
"#ccc" |
リスト項目のボーダー色 |
liBorderSize |
number |
1 |
リスト項目のボーダー太さ（px） |
liBorderRadius |
number |
0 |
リスト項目の角丸（px） |
contents |
array |
3件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
image |
string |
ステップの画像URL |
ttl |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
url |
string |
リンク先URL（空欄=リンクなし） |
number |
string |
表示する番号テキスト |
ステップ 1 shin（shin-gas-station-01-step-1）— テンプレート
テンプレート「shinガソリンスタンド」専用のステップブロック。色付き背景とボーダーで手順を表示。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
fontLi |
string |
"" |
タイトルのフォント |
fontColorLi |
string |
"var(--color-black)" |
タイトルの文字色 |
fontWeightLi |
string |
"600" |
タイトルのフォントウェイト |
fontLiP |
string |
"" |
説明文のフォント |
fontColorLiP |
string |
"var(--color-black)" |
説明文の文字色 |
fontWeightLiP |
string |
"400" |
説明文のフォントウェイト |
stepFont |
string |
"" |
「STEP」ラベルのフォント |
stepFontColor |
string |
"#fff" |
「STEP」ラベルの文字色 |
stepFontWeight |
string |
"600" |
「STEP」ラベルのフォントウェイト |
backgroundColor |
string |
"#FAFAFA" |
カードの背景色 |
borderColor |
string |
"var(--color-main)" |
カードのボーダー色 |
borderSize |
number |
0 |
カードのボーダー太さ（px） |
contents |
array |
4件 |
ステップ項目の配列 |
contents サブフィールド
| フィールド名 |
型 |
説明 |
ttl |
string |
ステップの見出し |
text |
string |
ステップの説明文 |
どれを使えばいい？（ステップ）
| 用途 |
おすすめ |
| シンプルな手順説明（背景色あり） |
lw-step-1（無料） |
| 控えめな手順説明（ボーダーのみ） |
lw-step-2（無料） |
| カードグリッドで3列以上並べたい |
lw-pr-step-7（プレミアム） |
| 角丸カードで番号を強調 |
lw-pr-step-8（プレミアム） |
| 番号の色を自由に変えたい |
paid-block-lw-step-3 / step-4（有料） |
| シャドウ・ボーダーで高級感を出したい |
paid-block-lw-step-5（有料） |
| 各ステップに画像＋リンクを付けたい |
paid-block-lw-step-6（有料） |
| shinテンプレート利用時 |
shin-gas-station-01-step-1（テンプレート） |
お客様の声
お客様の声 01（lw-voice-1）— 無料
テスティモニアルカード。名前バッジ＋肩書き＋コメントの構成。セクションタイトル・背景色もカスタマイズ可能。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
testimonials |
array |
3件 |
テスティモニアル項目の配列 |
h2Title |
string |
"お客様の声" |
セクション見出しテキスト |
h2FontSet |
string |
"Noto Sans JP" |
見出しのフォント |
h2FontWeight |
string |
"600" |
見出しのフォントウェイト |
h2TextColor |
string |
"#000000" |
見出しの文字色 |
nameTextColor |
string |
"#ffffff" |
名前バッジの文字色 |
nameBackgroundColor |
string |
"var(--color-main)" |
名前バッジの背景色 |
nameFontSet |
string |
"Noto Sans JP" |
名前のフォント |
nameFontWeight |
string |
"500" |
名前のフォントウェイト |
h3TextColor |
string |
"#000000" |
肩書き（h3）の文字色 |
h3FontSet |
string |
"Noto Sans JP" |
肩書きのフォント |
h3FontWeight |
string |
"500" |
肩書きのフォントウェイト |
pTextColor |
string |
"#000000" |
コメント本文の文字色 |
pFontSet |
string |
"Noto Sans JP" |
コメント本文のフォント |
pFontWeight |
string |
"500" |
コメント本文のフォントウェイト |
backgroundColor |
string |
"#eeeeee" |
セクション全体の背景色 |
testimonials サブフィールド
| フィールド名 |
型 |
説明 |
name |
string |
お客様の名前 |
title |
string |
肩書き・職業 |
content |
string |
コメント本文 |
お客様の声 2（paid-block-voice-2）— 有料
フル幅の声セクション。背景フィルター付きで、装飾テキスト（サブタイトル）と感謝メッセージを表示。高級感のあるデザイン。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
blockTitleMain |
string |
"お客様の声" |
セクションメインタイトル |
blockTitleSub |
string |
"VOICE" |
セクションサブタイトル（装飾用英字） |
explanation |
string |
（プレースホルダー） |
セクション説明文 |
filterColor |
string |
"var(--color-main)" |
背景フィルターの色 |
filterOpacity |
number |
0.9 |
背景フィルターの透過度（0〜1） |
voiceSubNameFont |
string |
"Noto Sans JP" |
サブ名前（肩書き等）のフォント |
voiceSubNameFontWeight |
string |
"400" |
サブ名前のフォントウェイト |
voiceSubNameFontColor |
string |
"var(--color-black)" |
サブ名前の文字色 |
voiceMeinNameFont |
string |
"Noto Sans JP" |
メイン名前のフォント |
voiceMeinNameFontWeight |
string |
"500" |
メイン名前のフォントウェイト |
voiceMeinNameFontColor |
string |
"var(--color-black)" |
メイン名前の文字色 |
voiceCommentFont |
string |
"Noto Sans JP" |
コメント本文のフォント |
voiceCommentFontWeight |
string |
"400" |
コメント本文のフォントウェイト |
voiceCommentFontColor |
string |
"var(--color-black)" |
コメント本文の文字色 |
voiceThanksFont |
string |
"Dancing Script" |
感謝メッセージのフォント（筆記体） |
voiceThanksFontWeight |
string |
"400" |
感謝メッセージのフォントウェイト |
voiceThanksFontColor |
string |
"var(--color-black)" |
感謝メッセージの文字色 |
voices |
array |
1件 |
声の項目の配列 |
voices サブフィールド
| フィールド名 |
型 |
説明 |
image |
string |
お客様の写真URL |
thanks |
string |
感謝メッセージ（筆記体で表示） |
sub |
string |
サブ名前（肩書き・職業等） |
nameBig |
string |
メイン名前（大きく表示） |
nameSmall |
string |
補足名前（小さく表示） |
comment |
string |
コメント本文 |
お客様の声 03 スライダー（paid-block-voice-3）— 有料
スライダー（カルーセル）形式の声ブロック。自動再生・ナビゲーション・ページネーション対応。クリックでモーダルが開き詳細を表示。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
blockId |
string |
— |
ブロック固有のID |
voices |
array |
3件 |
声の項目の配列 |
autoplayDelay |
number |
4000 |
自動再生の間隔（ミリ秒） |
loop |
boolean |
true |
ループ再生のON/OFF |
disableOnInteraction |
boolean |
false |
ユーザー操作後に自動再生を停止するか |
showPagination |
boolean |
true |
ページネーション（ドット）の表示 |
paginationClickable |
boolean |
true |
ページネーションのクリック操作 |
showNavigation |
boolean |
true |
前/次ボタンの表示 |
sliderSpeed |
number |
600 |
スライドのアニメーション速度（ミリ秒） |
slidesPerView600 |
number |
2 |
画面幅600px以上での表示枚数 |
slidesPerView900 |
number |
3 |
画面幅900px以上での表示枚数 |
spaceBetween600 |
number |
24 |
画面幅600px以上でのカード間隔（px） |
spaceBetween900 |
number |
30 |
画面幅900px以上でのカード間隔（px） |
maxWidthContainer |
number |
1120 |
コンテナの最大幅（px） |
cardBgColor |
string |
"#ffffff" |
カードの背景色 |
cardShadowColor |
string |
"rgba(0,0,0,0.08)" |
カードのシャドウ色 |
nameColor |
string |
"#333333" |
名前の文字色 |
excerptColor |
string |
"#666666" |
抜粋テキストの文字色 |
metaColor |
string |
"#999999" |
メタ情報（年齢・職業）の文字色 |
btnBgColor |
string |
"" |
「詳しく見る」ボタンの背景色 |
btnTextColor |
string |
"" |
「詳しく見る」ボタンの文字色 |
nameFontSet |
string |
"" |
名前のフォント |
nameFontWeight |
string |
"600" |
名前のフォントウェイト |
excerptFontSet |
string |
"" |
抜粋テキストのフォント |
excerptFontWeight |
string |
"400" |
抜粋テキストのフォントウェイト |
voices サブフィールド
| フィールド名 |
型 |
説明 |
name |
string |
お客様の名前 |
age |
string |
年齢 |
job |
string |
職業 |
photo |
string |
写真のURL |
alt |
string |
写真のalt属性 |
excerpt |
string |
カード上に表示される抜粋テキスト |
text |
string |
モーダル内に表示される全文 |
どれを使えばいい？（お客様の声）
| 用途 |
おすすめ |
| シンプルなカード型テスティモニアル |
lw-voice-1（無料） |
| 高級感のあるフル幅レイアウト |
paid-block-voice-2（有料） |
| 多数の声をスライダーで見せたい |
paid-block-voice-3（有料） |
吹き出しコメント
アバター画像付きの吹き出しコメント。左右の配置を切り替え可能。会話形式の説明やスタッフ紹介に。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
name |
string |
"お名前" |
話者の名前 |
title |
string |
"こんにちは！コメントサンプルです。" |
吹き出し内のテキスト |
imageUrl |
string |
"" |
アバター画像のURL（空欄=デフォルトアイコン） |
imageColor |
string |
"var(--color-main)" |
デフォルトアバターアイコンの色 |
altText |
string |
"画像" |
アバター画像のalt属性 |
commentAlignment |
string |
"left" |
吹き出しの位置（left/right） |
commentBgColor |
string |
"#eeeeee" |
吹き出しの背景色 |
nameFontSet |
string |
"" |
名前のフォント |
nameFontWeight |
string |
"" |
名前のフォントウェイト |
nameTextColor |
string |
"#000000" |
名前の文字色 |
titleFontSet |
string |
"" |
コメントテキストのフォント |
titleFontWeight |
string |
"" |
コメントテキストのフォントウェイト |
titleTextColor |
string |
"#000000" |
コメントテキストの文字色 |
maxWidth |
number |
1200 |
ブロック全体の最大幅（px） |
名前なしのフル幅吹き出し。画像サイズをPC/SPで個別に指定可能。ボーダーの太さ・色もデバイス別に細かく制御できる。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
comment2MaxWidth |
number |
800 |
ブロック全体の最大幅（px） |
comment2ImagePosition |
string |
"left" |
画像の位置（left/right） |
comment2ImageUrl |
string |
（プレースホルダー） |
アバター画像のURL |
comment2ImageId |
number |
0 |
メディアライブラリの画像ID |
comment2ImageAlt |
string |
"" |
画像のalt属性 |
comment2ImageWidthPc |
number |
160 |
PC時の画像幅（px） |
comment2ImageWidthSp |
number |
80 |
SP時の画像幅（px） |
comment2ImageBdWidthPc |
number |
2 |
PC時の画像ボーダー幅（px） |
comment2ImageBdWidthSp |
number |
-1 |
SP時の画像ボーダー幅（px）。-1=PC設定を継承 |
comment2ImageBdColorPc |
string |
"#3C7FC3" |
PC時の画像ボーダー色 |
comment2ImageBdColorSp |
string |
"" |
SP時の画像ボーダー色（空欄=PC設定を継承） |
comment2ImageBg |
string |
"#ffffff" |
画像の背景色 |
comment2Text |
string |
"ここにコメントを入力" |
コメントテキスト |
comment2TextColor |
string |
"#3C7FC3" |
コメントテキストの文字色 |
comment2TextBg |
string |
"#F0FCFF" |
吹き出しの背景色 |
comment2TextMtPc |
number |
24 |
PC時のテキスト上マージン（px） |
comment2TextMtSp |
number |
8 |
SP時のテキスト上マージン（px） |
comment2TextFontsizePc |
number |
17 |
PC時のテキストフォントサイズ（px） |
comment2TextFontsizeSp |
number |
16 |
SP時のテキストフォントサイズ（px） |
comment2TextBdrPc |
number |
12 |
PC時の吹き出し角丸（px） |
comment2TextBdrSp |
number |
8 |
SP時の吹き出し角丸（px） |
comment2TriangleTop |
number |
20 |
吹き出し三角形の上からの位置（px） |
comment2FontSet |
string |
"" |
テキストのフォント |
comment2FontWeight |
string |
"" |
テキストのフォントウェイト |
画像付き吹き出しにInnerBlocks対応。吹き出し内に他のブロック（テキスト、リスト、画像等）を自由に配置できる。最も柔軟なコメントブロック。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
comment3ImageWidthPc |
number |
240 |
PC時の画像幅（px） |
comment3ImageWidthSp |
number |
120 |
SP時の画像幅（px） |
comment3TextBdColorPc |
string |
"#3C7FC3" |
吹き出しのボーダー色 |
comment3TextInnerBg |
string |
"#e9f5ff" |
吹き出し内側の背景色 |
comment3ImageUrl |
string |
（プレースホルダー） |
アバター画像のURL |
comment3ImageId |
number |
0 |
メディアライブラリの画像ID |
comment3ImageAlt |
string |
"" |
画像のalt属性 |
comment3TextDfPc |
number |
16 |
PC時のデフォルトフォントサイズ（px） |
comment3TextDfSp |
number |
14 |
SP時のデフォルトフォントサイズ（px） |
comment3SpClm |
boolean |
true |
SP時に縦並びにするか |
comment3BdOutside |
boolean |
false |
ボーダーを外側に表示するか |
comment3BdColor |
string |
"#3C7FC3" |
外側ボーダーの色 |
comment3Bg |
string |
"#ffffff" |
ブロック全体の背景色 |
comment3AlignItems |
string |
"end" |
画像と吹き出しの垂直揃え（start/center/end） |
comment3MaxWidth |
number |
980 |
ブロック全体の最大幅（px） |
comment3TextInnerGapPc |
number |
8 |
PC時のInnerBlocks内側余白（px） |
comment3TextInnerGapSp |
number |
8 |
SP時のInnerBlocks内側余白（px） |
どれを使えばいい？（吹き出しコメント）
| 用途 |
おすすめ |
| 名前付きのシンプルな吹き出し |
lw-comment-1（無料） |
| 名前なし、デバイス別の細かい調整 |
lw-pr-comment-2（プレミアム） |
| 吹き出し内に自由にブロックを配置 |
lw-pr-comment-3（プレミアム） |
お問い合わせフォーム
> formIdについて: LiteWordにはメールフォーム管理機能が内蔵されています。WordPress管理画面の「LiteWord > メールフォーム」で作成したフォームにはそれぞれIDが割り振られます。formId はそのフォームIDを指定することで、どのフォーム設定（送信先メールアドレス、入力項目、自動返信など）を使用するかを制御します。デフォルトは 1（最初に作成されたフォーム）です。
ワンカラムのシンプルなお問い合わせフォーム。ラベル色・入力欄・ボタン・必須/任意バッジの色を個別にカスタマイズ可能。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
formId |
number |
1 |
連携するメールフォームのID |
maxWidth |
number |
1080 |
フォームの最大幅（px） |
labelColor |
string |
"#000000" |
ラベルの文字色 |
inputBgColor |
string |
"#f6f6f6" |
入力欄の背景色 |
inputTextColor |
string |
"#000000" |
入力欄の文字色 |
buttonBgColor |
string |
"#007cba" |
送信ボタンの背景色 |
buttonTextColor |
string |
"#ffffff" |
送信ボタンの文字色 |
requiredBgColor |
string |
"#da3838" |
「必須」バッジの背景色 |
requiredTextColor |
string |
"#ffffff" |
「必須」バッジの文字色 |
optionalBgColor |
string |
"#dddddd" |
「任意」バッジの背景色 |
optionalTextColor |
string |
"#000000" |
「任意」バッジの文字色 |
uniqueClass |
string |
"" |
カスタムCSSクラス名（複数フォームの区別に使用） |
背景画像付きのフル幅お問い合わせフォーム。ヒーローセクション風のデザインで、メインタイトル・サブタイトル・説明文を上部に配置。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
formId |
number |
1 |
連携するメールフォームのID |
mainTitle |
string |
"CONTACT" |
メインタイトル（英字等） |
subTitle |
string |
"お問合わせフォーム" |
サブタイトル（日本語等） |
description |
string |
（プレースホルダー） |
フォーム上部の説明文 |
bgImageUrl |
string |
（URL） |
PC用背景画像のURL |
bgImageUrlSp |
string |
"" |
SP用背景画像のURL（空欄=PC用を使用） |
bgColor |
string |
"#03294C" |
背景オーバーレイの色 |
bgOpacity |
number |
0.5 |
背景オーバーレイの透過度（0〜1） |
requiredBgColor |
string |
"#da3838" |
「必須」バッジの背景色 |
submitBgColor |
string |
"#EE3131" |
送信ボタンの背景色 |
mainTitleLevel |
string |
"h1" |
メインタイトルのHTMLタグ（h1/h2/h3/p） |
maxWidth |
string |
"800px" |
フォームの最大幅 |
descriptionAlignPC |
string |
"pc_center" |
PC時の説明文テキスト揃え |
descriptionAlignSP |
string |
"sp_center" |
SP時の説明文テキスト揃え |
テンプレート「shinガソリンスタンド」専用のフォームブロック。設定は最小限で、フォームIDのみ指定。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
formId |
number |
1 |
連携するメールフォームのID |
どれを使えばいい？（お問い合わせフォーム）
| 用途 |
おすすめ |
| シンプルなワンカラムフォーム |
lw-contact-3（無料） |
| 背景画像付きのヒーロー風フォーム |
paid-block-contact-2（有料） |
| shinテンプレート利用時 |
shin-gas-station-01-contact（テンプレート） |
ソリューション
solution 01（solution-1）— 無料
課題と解決策をビジュアルで比較表示するカード。「こんなお悩みありませんか？」形式のセクションに最適。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
contents |
array |
3件 |
ソリューション項目の配列 |
fontSet |
string |
"" |
テキストのフォント |
fontWeight |
string |
"" |
テキストのフォントウェイト |
contents サブフィールド
| フィールド名 |
型 |
説明 |
text |
string |
課題/解決策のテキスト |
image |
string |
画像のURL |
borderColor |
string |
カードのボーダー色 |
ソリューション 02（paid-block-solution-2）— 有料
セクションタイトル付きのソリューション表示。画像サイズを個別に指定でき、メインカラーで統一感を出せる。
属性一覧
| 属性名 |
型 |
初期値 |
説明 |
blockId |
string |
— |
ブロック固有のID |
title |
string |
"このな事が解決できます" |
セクションタイトル |
colorMain |
string |
"var(--color-main)" |
メインカラー（装飾・アクセントに使用） |
items |
array |
3件 |
ソリューション項目の配列 |
items サブフィールド
| フィールド名 |
型 |
説明 |
imgSrc |
string |
画像のURL |
text |
string |
課題/解決策のテキスト |
imageSize |
string |
画像のサイズ指定 |
どれを使えばいい？（ソリューション）
| 用途 |
おすすめ |
| シンプルな課題→解決の比較表示 |
solution-1（無料） |
| タイトル付き、画像サイズも調整したい |
paid-block-solution-2（有料） |
最終更新: 2026-03-15 13:00