見出し・テーブル・ユーティリティブロック
最終更新: 2026-03-15
見出し・テーブル・ビフォーアフター・ユーティリティ ブロック — 全種マニュアル
全46種（見出し無料7 + 見出しプレミアム5 + 見出し有料4 + 見出しテンプレート2 + テーブルプレミアム3 + ビフォーアフター有料2 + ビフォーアフタープレミアム1 + ユーティリティ各種22）
設定手順
基本の3ステップ
-
ブロックを挿入する
- エディター画面で「+」ボタンをクリック
- ブロック名で検索（例: 「見出し」「テーブル」「ビフォーアフター」「スペーサー」「コンテナ」「カレンダー」等）
- 目的のブロックをクリックしてページに挿入
-
テキスト・コンテンツを編集する
- 見出し: メインタイトルとサブタイトルを入力。
headingLevelで見出し階層（h2〜h6）を選択 - テーブル: ヘッダー行と各セルのテキストを入力。行や列の追加・削除も可能
- ビフォーアフター: Before/After画像をアップロードし、ラベルテキストを入力
- ユーティリティ: 各ブロックに応じたコンテンツを入力（スペーサーは高さ指定のみ、コンテナは内部にブロック配置）
- 見出し: メインタイトルとサブタイトルを入力。
-
サイドバーでデザインパターン・見た目を調整する
- ブロックを選択した状態で右サイドバーを確認
- 見出し: テキスト配置（左/中央/右）、アクセントカラー、フォントサイズ・太さを調整
- テーブル: 列幅、ヘッダー背景色、セル文字色、角丸、フォント設定を調整
- ビフォーアフター: ラベル色、矢印色、最大幅、アスペクト比を調整
- ユーティリティ: ブロックごとの固有設定を調整
- 共通サイドバー設定（マージン・パディング・アニメーション等）も利用可能 → 共通サイドバー設定
よくある質問
Q: 見出しのレベル（h2/h3など）はどう選べばいい？
A: ページタイトルが h1 なので、本文の大セクションは h2、その中の小セクションは h3 が基本です。headingLevel 属性で 1〜6 を指定できます。
Q: テーブルの列数を変えたい
A: サイドバーの columnCount で列数を変更できます。テーブル01は最大8列、テーブル03は自由に設定可能です。
Q: テーブルがスマホではみ出す
A: 共通サイドバーの「横スクロール設定」をONにしてください。または、各列のスマホ用幅（cellWidthSp 系）を小さくしてください。
Q: ビフォーアフターのスライダーが動かない
A: paid-block-before-after-2（スライダー式）を使っているか確認してください。paid-block-before-after-1 は矢印表示型でスライダー機能はありません。
Q: スペーサーの高さをデバイスごとに変えたい
A: lw-space-1 は PC (pcHeight)、タブレット (tbHeight)、スマホ (spHeight) で個別に高さを指定できます。
Q: コンテナブロックに背景動画を設定したい
A: lw-bg-1 の backgroundType を "video" に変更し、videoUrl に動画URLを入力してください。再生速度は videoSpeed で調整可能です。
見出しブロック
全18種。ページのセクション区切りやコンテンツの階層構造を作るためのブロック。
> headingLevel について
> すべての見出しブロックには headingLevel 属性がある。HTML の <h1>〜<h6> に対応する数値（1〜6）を指定する。初期値は 2（h2）。ページの構造に合わせて適切な階層を選ぶこと。h1 はページに1つだけ（通常はページタイトル）、本文セクションは h2〜h3 が基本。
> sizeClass の値一覧（有料見出し 07〜10 で使用）
> - size_s — 小サイズ
> - size_m — 中サイズ（初期値）
> - size_l — 大サイズ
> positionClass の値一覧（有料見出し 07〜08, 10 で使用）
> - position_left — 左寄せ
> - position_center — 中央寄せ（初期値）
> - position_right — 右寄せ
> headingSize の値一覧（テンプレート見出し 2 shin で使用）
> - S — 小
> - M — 中（初期値）
> - L — 大
どれを使えばいい？
| やりたいこと | おすすめブロック |
|---|---|
| シンプルにメイン＋サブの見出しを置きたい | 見出し 01（無料） |
| 英字メインタイトル＋日本語サブを左寄せで使いたい | 見出し 02 または 05（無料） |
| アクセントカラーの装飾ラインが欲しい | 見出し 03 または 06（無料） |
| 開閉できるアコーディオン見出しが欲しい | 見出しアコーディオン 01（無料） |
| メイン/サブの順番を逆にしたり色を細かく制御したい | 見出し 11〜14（プレミアム） |
| 下線装飾の位置・サイズまで細かく調整したい | 見出し 15（プレミアム） |
| グラデーション風のボーダー装飾が欲しい | 見出し 07〜09（有料） |
| アイコン画像付きの見出しが欲しい | 見出し 10（有料） |
無料見出し（7種）
見出しタイトル 01（custom-title-1）
最もシンプルな見出し。メインタイトルとサブタイトルを上下に配置する基本型。サブタイトルの上マージンをPC/SP個別に調整可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "タイトル" |
メインの見出しテキスト |
| subTitle | string | "サブタイトル" |
サブタイトルテキスト |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| subMarginTopPc | number | 0.2 |
サブタイトル上マージン（em）— PC |
| subMarginTopSp | number | 0.2 |
サブタイトル上マージン（em）— スマホ |
見出しタイトル 02（custom-title-2）
英字メインタイトル＋サブタイトルの構成。テキスト配置を左・中央・右から選べる。欧文フォントが映えるセクション見出し向け。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "CONTENT" |
メインタイトル（英字推奨） |
| subTitle | string | "SUB TITLE TEXT" |
サブタイトル |
| textAlignment | string | "left" |
テキスト配置（left / center / right） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
見出しタイトル 03（custom-title-3）
アクセントカラー付きの見出し。メインタイトルの装飾ラインにテーマカラーが使われる。サブタイトルにHTMLを記述可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "CONTENT" |
メインタイトル |
| subTitle | string | HTML テキスト | サブタイトル（HTML記述可） |
| textAlignment | string | "left" |
テキスト配置（left / center / right） |
| accentColor | string | "var(--color-main)" |
アクセントカラー（CSS色値） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
見出しタイトル 04（custom-title-4）
見出し 01 と似た構成だが、サブタイトルの下マージンを調整できる点が異なる。サブの下に続くコンテンツとの間隔を細かく制御したい場合に使用。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "タイトル" |
メインの見出しテキスト |
| subTitle | string | "サブタイトル" |
サブタイトルテキスト |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| subMarginBottomPc | number | 0.6 |
サブタイトル下マージン（em）— PC |
| subMarginBottomSp | number | 0.6 |
サブタイトル下マージン（em）— スマホ |
見出しタイトル 05（custom-title-5）
サブタイトルが上、メインタイトルが下に配置されるスタイル。メインタイトルの色とサイズを変更可能。製品紹介セクションなどに最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "製品紹介" |
サブタイトル（上段に表示） |
| mainTitle | string | "PRODUCTS" |
メインタイトル（下段に表示） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| fontSize | string | "l" |
フォントサイズ（s / m / l） |
見出しタイトル 06（custom-title-6）
アクセントカラーラインのみのミニマルな見出し。サブタイトルなし。シンプルに1行の見出しだけ欲しい場合に使う。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "CONTENT" |
見出しテキスト |
| accentColor | string | "var(--color-main)" |
アクセントカラー（CSS色値） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
見出しアコーディオン 01（custom-title-accordion-1）
クリックで開閉できるアコーディオン見出し。ステップ形式のコンテンツやFAQの大カテゴリに最適。ボーダー・背景色・アイコン色をカスタマイズ可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "STEP 1" |
サブタイトル（ステップ番号など） |
| mainTitle | string | "WordPressの初期設定" |
メインの見出しテキスト |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| borderColor | string | "var(--color-main)" |
枠線の色 |
| borderWidth | number | 1 |
枠線の太さ（px） |
| backgroundColor | string | "" |
背景色（空=透明） |
| iconColor | string | "var(--color-main)" |
開閉アイコンの色 |
プレミアム見出し（5種）
見出しタイトル 11（lw-pr-custom-title-11）
高機能な見出し。メイン/サブの表示順逆転、最大幅制限、角丸、最小高さ（PC/タブレット/スマホ個別）など、レイアウトを細かく制御できる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "カスタムタイトル" |
メインタイトル |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| colorMain | string | "#0a71c0" |
メインカラー（装飾に使用） |
| colorMainText | string | "" |
メインタイトルの文字色（空=自動） |
| colorSubText | string | "" |
サブタイトルの文字色（空=自動） |
| orderReversed | boolean | false |
trueでメイン/サブの表示順を逆転 |
| maxWidth | number | 0 |
最大幅（px）。0=制限なし |
| borderRadius | number | 0 |
角丸の半径（px） |
| minHeightPc | number | 0 |
最小高さ（px）— PC。0=自動 |
| minHeightTb | number | 0 |
最小高さ（px）— タブレット |
| minHeightSp | number | 0 |
最小高さ（px）— スマホ |
見出しタイトル 12（lw-pr-custom-title-12）
2色カラー構成の見出し。メインカラーとサブカラーで装飾を分けられる。順序逆転・最大幅にも対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "カスタムタイトル" |
メインタイトル |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| colorMain | string | "#0a71c0" |
メインカラー |
| colorSub | string | "#13214c" |
サブカラー |
| colorMainText | string | "" |
メインタイトルの文字色（空=自動） |
| colorSubText | string | "" |
サブタイトルの文字色（空=自動） |
| orderReversed | boolean | false |
trueでメイン/サブの表示順を逆転 |
| maxWidth | number | 0 |
最大幅（px）。0=制限なし |
見出しタイトル 13（lw-pr-custom-title-13）
見出し12のシンプル版。サブカラーなしの1色構成で、文字色・順序・幅を制御できる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "カスタムタイトル" |
メインタイトル |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| colorMain | string | "#0a71c0" |
メインカラー |
| colorMainText | string | "" |
メインタイトルの文字色（空=自動） |
| colorSubText | string | "" |
サブタイトルの文字色（空=自動） |
| orderReversed | boolean | false |
trueでメイン/サブの表示順を逆転 |
| maxWidth | number | 0 |
最大幅（px）。0=制限なし |
見出しタイトル 14（lw-pr-custom-title-14）
角丸とPC/SP個別の配置指定に対応した見出し。カード風デザインのセクションタイトルに適している。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "カスタムタイトル" |
メインタイトル |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| colorMain | string | "#0a71c0" |
メインカラー |
| colorMainText | string | "" |
メインタイトルの文字色（空=自動） |
| colorSubText | string | "" |
サブタイトルの文字色（空=自動） |
| maxWidth | number | 0 |
最大幅（px）。0=制限なし |
| borderRadius | number | 6 |
角丸の半径（px） |
| alignmentPc | string | "" |
PC時の配置（left / center / right / 空=デフォルト） |
| alignmentSp | string | "" |
スマホ時の配置（left / center / right / 空=デフォルト） |
見出しタイトル 15（lw-pr-custom-title-15）
最も属性が多いプレミアム見出し。サブタイトル表示切替、装飾ライン（::after疑似要素）の色・サイズ・位置、フォントサイズ・太さ、テキスト配置をすべてPC/SP個別に制御できる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "タイトル" |
メインタイトル |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| subMarginTopPc | number | 0.2 |
サブタイトル上マージン（em）— PC |
| subMarginTopSp | number | 0.2 |
サブタイトル上マージン（em）— スマホ |
| showSubTitle | boolean | true |
サブタイトルを表示するか |
| afterColor | string | "var(--color-main)" |
装飾ラインの色 |
| afterMarginTopPc | number | 1 |
装飾ライン上マージン（em）— PC |
| afterMarginTopSp | number | 0.8 |
装飾ライン上マージン（em）— スマホ |
| afterHeightPc | number | 4 |
装飾ラインの高さ（px）— PC |
| afterHeightSp | number | 4 |
装飾ラインの高さ（px）— スマホ |
| afterWidthPc | number | 50 |
装飾ラインの幅（px）— PC |
| afterWidthSp | number | 50 |
装飾ラインの幅（px）— スマホ |
| fontSizePc | number | 16 |
フォントサイズ（px）— PC |
| fontSizeSp | number | 16 |
フォントサイズ（px）— スマホ |
| mainFontWeight | string | "" |
メインタイトルのフォント太さ（空=デフォルト） |
| subFontWeight | string | "" |
サブタイトルのフォント太さ（空=デフォルト） |
| positionPc | string | "" |
テキスト配置 — PC（left / center / right / 空=デフォルト） |
| positionSp | string | "" |
テキスト配置 — スマホ（left / center / right / 空=デフォルト） |
有料見出し（4種）
見出しタイトル 07（paid-block-custom-title-7）
左右にグラデーション風のボーダーが入る装飾見出し。ボーダーの透明度を左右個別に設定でき、フェードイン/アウトの効果が作れる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "製品紹介" |
サブタイトル（上段） |
| mainTitle | string | "PRODUCTS" |
メインタイトル（下段） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| borderLeftColor | string | "var(--color-main)" |
左ボーダーの色 |
| borderRightColor | string | "var(--color-main)" |
右ボーダーの色 |
| borderLeftOpacity | number | 20 |
左ボーダーの不透明度（0〜100） |
| borderRightOpacity | number | 100 |
右ボーダーの不透明度（0〜100） |
| borderRadius | number | 10 |
ボーダーの角丸（px） |
| sizeClass | string | "size_m" |
サイズ（size_s / size_m / size_l） |
| positionClass | string | "position_center" |
配置（position_left / position_center / position_right） |
見出しタイトル 08（paid-block-custom-title-8）
見出し07と同様の左右ボーダー装飾だが、初期値で左が100%・右が20%と逆方向のフェードになっている。スマホ用サイズクラスも個別設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "製品紹介" |
サブタイトル（上段） |
| mainTitle | string | "PRODUCTS" |
メインタイトル（下段） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| borderLeftColor | string | "var(--color-main)" |
左ボーダーの色 |
| borderRightColor | string | "var(--color-main)" |
右ボーダーの色 |
| borderLeftOpacity | number | 100 |
左ボーダーの不透明度（0〜100） |
| borderRightOpacity | number | 20 |
右ボーダーの不透明度（0〜100） |
| borderRadius | number | 10 |
ボーダーの角丸（px） |
| sizeClass | string | "size_m" |
PC時のサイズ（size_s / size_m / size_l） |
| positionClass | string | "position_left" |
配置（position_left / position_center / position_right） |
| sizeSpClass | string | "" |
スマホ時のサイズ（空=PC値を継承） |
見出しタイトル 09（paid-block-custom-title-9）
上下にボーダーが入るスタイル。上ボーダーと下ボーダーの不透明度を個別に設定でき、上から下へのフェード効果が可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "製品紹介" |
サブタイトル（上段） |
| mainTitle | string | "PRODUCTS" |
メインタイトル（下段） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| borderTopColor | string | "var(--color-main)" |
上ボーダーの色 |
| borderBottomColor | string | "var(--color-main)" |
下ボーダーの色 |
| borderTopOpacity | number | 100 |
上ボーダーの不透明度（0〜100） |
| borderBottomOpacity | number | 20 |
下ボーダーの不透明度（0〜100） |
| borderRadius | number | 10 |
ボーダーの角丸（px） |
| sizeClass | string | "size_m" |
サイズ（size_s / size_m / size_l） |
見出しタイトル 10（paid-block-custom-title-10）
最も多機能な有料見出し。左右にアイコン画像を配置でき、サブ/メインの個別非表示、下線の太さ・表示切替、全幅表示にも対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "製品紹介" |
サブタイトル（上段） |
| mainTitle | string | "PRODUCTS" |
メインタイトル（下段） |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| mainTitleColor | string | "var(--color-main)" |
メインタイトルの文字色 |
| sizeClass | string | "size_m" |
サイズ（size_s / size_m / size_l） |
| leftImage | string | アイコンURL | 左側に表示する画像のURL |
| rightImage | string | "" |
右側に表示する画像のURL（空=非表示） |
| leftHeightEm | number | 1.5 |
左画像の高さ（em） |
| rightHeightEm | number | 1.5 |
右画像の高さ（em） |
| leftMarginEm | number | 0.4 |
左画像とテキストの間隔（em） |
| rightMarginEm | number | 0.4 |
右画像とテキストの間隔（em） |
| positionClass | string | "position_center" |
配置（position_left / position_center / position_right） |
| hideSubTitle | string | "off" |
サブタイトルを非表示（on / off） |
| hideMainTitle | string | "off" |
メインタイトルを非表示（on / off） |
| bdThickness | number | 2 |
下線の太さ（px） |
| bdMarginTopEm | number | 0.1 |
下線の上マージン（em） |
| bdDisplay | string | "on" |
下線の表示（on / off） |
| ttlFullWidth | string | "off" |
全幅表示（on / off） |
テンプレート見出し（2種）
見出しタイトル 1 shin（shin-gas-station-01-custom-title-1）
ガソリンスタンドテンプレート用のシンプル見出し。下線の高さと色を調整可能。uniqueId でページ内リンクの対象にできる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "タイトル" |
見出しテキスト |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| underlineHeight | number | 1 |
下線の高さ（px） |
| underlineColor | string | "#C6C6C6" |
下線の色 |
| uniqueId | string | "" |
ページ内リンク用のID（空=なし） |
見出しタイトル 2 shin（shin-gas-station-01-custom-title-2）
ガソリンスタンドテンプレート用。メイン＋サブの2段構成で、テーマカラーの装飾と3段階のサイズ切替に対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "Heading Title" |
メインタイトル（英字推奨） |
| subTitle | string | "サブタイトル" |
サブタイトル |
| headingLevel | number | 2 |
見出しレベル（1〜6） |
| colorMain | string | "var(--color-main)" |
メインカラー |
| headingSize | string | "M" |
サイズ（S / M / L） |
テーブルブロック
全3種（すべてプレミアム）。料金表・比較表・定義リストなど、表形式のコンテンツを作成するためのブロック。
どれを使えばいい？
| やりたいこと | おすすめブロック |
|---|---|
| 料金プランの比較表を作りたい | テーブル 01（価格表スタイル） |
| 項目名＋内容の定義リスト型テーブル（会社概要など） | テーブル 02（定義リスト型） |
| セル結合が必要な複雑な比較表 | テーブル 03（セル統合対応） |
プレミアムテーブル（3種）
テーブル 01 価格表（lw-pr-table-1）
カード風の価格比較テーブル。列ごとにヘッダー背景色を個別設定でき、影付きのモダンなデザイン。スクロールヒント表示にも対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| columnCount | number | 4 |
列数 |
| hideTableHeader | boolean | false |
テーブルヘッダーを非表示にするか |
| cellWidth1 | number | 200 |
1列目の幅（px）— PC |
| cellWidth2 | number | 200 |
2列目の幅（px）— PC |
| cellWidth3 | number | 200 |
3列目の幅（px）— PC |
| cellWidth4 | number | 200 |
4列目の幅（px）— PC |
| cellWidth5 | number | 200 |
5列目の幅（px）— PC |
| cellWidth6 | number | 200 |
6列目の幅（px）— PC |
| cellWidth7 | number | 200 |
7列目の幅（px）— PC |
| cellWidth8 | number | 200 |
8列目の幅（px）— PC |
| cellWidth1Sp | number | 160 |
1列目の幅（px）— スマホ |
| cellWidth2Sp | number | 160 |
2列目の幅（px）— スマホ |
| cellWidth3Sp | number | 160 |
3列目の幅（px）— スマホ |
| cellWidth4Sp | number | 160 |
4列目の幅（px）— スマホ |
| cellWidth5Sp | number | 160 |
5列目の幅（px）— スマホ |
| cellWidth6Sp | number | 160 |
6列目の幅（px）— スマホ |
| cellWidth7Sp | number | 160 |
7列目の幅（px）— スマホ |
| cellWidth8Sp | number | 160 |
8列目の幅（px）— スマホ |
| radiusSize | number | 12 |
カード全体の角丸（px） |
| headerBgColor | string | "var(--color-main)" |
ヘッダー共通背景色 |
| headerTextColor | string | "#ffffff" |
ヘッダーの文字色 |
| useIndividualHeaderBg | boolean | false |
列ごとに個別のヘッダー背景色を使うか |
| cellBgColor | string | "#ffffff" |
セルの背景色 |
| cellTextColor | string | "#333333" |
セルの文字色 |
| shadowColor | string | "rgba(37,37,37,0.3)" |
カードの影色 |
| fontFamilyHeader | string | "" |
ヘッダーのフォント（空=テーマ設定） |
| fontWeightHeader | string | "600" |
ヘッダーのフォント太さ |
| fontSizeHeader | number | 17 |
ヘッダーのフォントサイズ（px）— PC |
| fontSizeHeaderSp | number | 16 |
ヘッダーのフォントサイズ（px）— スマホ |
| lineHeightHeader | number | 1.5 |
ヘッダーの行間 |
| fontFamilyRowHeader | string | "" |
行ヘッダーのフォント（空=テーマ設定） |
| fontWeightRowHeader | string | "600" |
行ヘッダーのフォント太さ |
| fontSizeRowHeader | number | 17 |
行ヘッダーのフォントサイズ（px）— PC |
| fontSizeRowHeaderSp | number | 16 |
行ヘッダーのフォントサイズ（px）— スマホ |
| lineHeightRowHeader | number | 1.6 |
行ヘッダーの行間 |
| fontFamilyCell | string | "" |
セルのフォント（空=テーマ設定） |
| fontWeightCell | string | "400" |
セルのフォント太さ |
| fontSizeCell | number | 17 |
セルのフォントサイズ（px）— PC |
| fontSizeCellSp | number | 16 |
セルのフォントサイズ（px）— スマホ |
| lineHeightCell | number | 1.6 |
セルの行間 |
| showScrollHint | boolean | false |
スマホ時に横スクロールヒントを表示するか |
| gapSize | number | 3 |
セル間の隙間（px） |
| headers | array | [{text, bgColor} x3] |
ヘッダー行のデータ配列。各要素に text（表示テキスト）と bgColor（個別背景色） |
| rows | array | [{header, cells}] |
行データの配列。header=行ヘッダー、cells=各セルの content |
テーブル 02（lw-pr-table-2）
定義リスト（dt/dd）スタイルのテーブル。会社概要・施設情報など「項目名：内容」形式のデータ表示に最適。ボーダーを個別方向ごとに細かく制御可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| dtFixedPc | boolean | false |
dt列を固定幅にするか — PC |
| dtWidthPc | number | 200 |
dt列の幅（px）— PC |
| ddFixedPc | boolean | false |
dd列を固定幅にするか — PC |
| ddWidthPc | number | 200 |
dd列の幅（px）— PC |
| clm1FrPc | number | 1 |
dt列のfr比率 — PC |
| clm2FrPc | number | 1 |
dd列のfr比率 — PC |
| dtFixedSp | boolean | false |
dt列を固定幅にするか — スマホ |
| dtWidthSp | number | 150 |
dt列の幅（px）— スマホ |
| ddFixedSp | boolean | false |
dd列を固定幅にするか — スマホ |
| ddWidthSp | number | 150 |
dd列の幅（px）— スマホ |
| clm1FrSp | number | 1 |
dt列のfr比率 — スマホ |
| clm2FrSp | number | 1 |
dd列のfr比率 — スマホ |
| dlBorderColor | string | "#000000" |
テーブル外枠の色 |
| dlBorderStyle | string | "solid" |
テーブル外枠のスタイル（solid / dashed / dotted / none） |
| dlBorderWidth | number | 1 |
テーブル外枠の太さ（px） |
| dlBorderIndividual | boolean | false |
外枠を上下左右個別に設定するか |
| dlBorderTopColor | string | "#000000" |
外枠上の色（個別設定時） |
| dlBorderTopStyle | string | "solid" |
外枠上のスタイル（個別設定時） |
| dlBorderTopWidth | number | 1 |
外枠上の太さ（個別設定時） |
| dlBorderBottomColor | string | "#000000" |
外枠下の色（個別設定時） |
| dlBorderBottomStyle | string | "solid" |
外枠下のスタイル（個別設定時） |
| dlBorderBottomWidth | number | 1 |
外枠下の太さ（個別設定時） |
| dlBorderLeftColor | string | "#000000" |
外枠左の色（個別設定時） |
| dlBorderLeftStyle | string | "solid" |
外枠左のスタイル（個別設定時） |
| dlBorderLeftWidth | number | 1 |
外枠左の太さ（個別設定時） |
| dlBorderRightColor | string | "#000000" |
外枠右の色（個別設定時） |
| dlBorderRightStyle | string | "solid" |
外枠右のスタイル（個別設定時） |
| dlBorderRightWidth | number | 1 |
外枠右の太さ（個別設定時） |
| rowBorderColor | string | "#000000" |
行間ボーダーの色 |
| rowBorderStyle | string | "solid" |
行間ボーダーのスタイル |
| rowBorderWidth | number | 1 |
行間ボーダーの太さ（px） |
| dtBorderColor | string | "#000000" |
dt/dd間ボーダーの色 |
| dtBorderStyle | string | "solid" |
dt/dd間ボーダーのスタイル |
| dtBorderWidth | number | 1 |
dt/dd間ボーダーの太さ（px） |
| dtBgColor | string | "" |
dt列の背景色（空=透明） |
| cellPaddingPc | number | 16 |
セル内余白（px）— PC |
| cellPaddingSp | number | -1 |
セル内余白（px）— スマホ（-1=PC値を継承） |
| fontSizePc | number | 17 |
フォントサイズ（px）— PC |
| fontSizeSp | number | 16 |
フォントサイズ（px）— スマホ |
| dtFont | string | "" |
dt列のフォント（空=テーマ設定） |
| dtFontWeight | string | "" |
dt列のフォント太さ（空=デフォルト） |
| ddFont | string | "" |
dd列のフォント（空=テーマ設定） |
| ddFontWeight | string | "" |
dd列のフォント太さ（空=デフォルト） |
| dtAlignPc | string | "" |
dt列の文字揃え — PC（left / center / right / 空=デフォルト） |
| dtAlignSp | string | "" |
dt列の文字揃え — スマホ |
| ddAlignPc | string | "" |
dd列の文字揃え — PC |
| ddAlignSp | string | "" |
dd列の文字揃え — スマホ |
| dtTextColor | string | "" |
dt列の文字色（空=デフォルト） |
| ddTextColor | string | "" |
dd列の文字色（空=デフォルト） |
| defaultPcClm1 | boolean | false |
PC時にデフォルトで1列表示にするか |
| defaultSpClm1 | boolean | false |
スマホ時にデフォルトで1列表示にするか |
| rows | array | [{dtText, ddText, ...}] |
行データ配列。各行に dtText, ddText, pcClm1（PC1列表示）, spClm1（SP1列表示）, bgColor, textColor |
テーブル 03 セル統合（lw-pr-table-3）
セル結合に対応した本格的な比較表。ヘッダー行・行ヘッダー列の個別非表示、セルごとの背景色・アウトライン色指定、デザインパターン切替が可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| columnCount | number | 4 |
列数 |
| colWidthPc | array | [200, 200, 200, 200] |
各列の幅（px）— PC |
| colWidthSp | array | [120, 120, 120, 120] |
各列の幅（px）— スマホ |
| gapSize | number | 2 |
セル間の隙間（px） |
| hideMainHead | boolean | false |
ヘッダー行を非表示にするか |
| hideRowHead | boolean | false |
行ヘッダー列を非表示にするか |
| headers | array | ["", "プラン1", "プラン2", "プラン3"] |
ヘッダー行のテキスト配列 |
| headerBgColors | array | — | 各ヘッダーセルの背景色配列 |
| headerOutlineColors | array | — | 各ヘッダーセルのアウトライン色配列 |
| headerOutlineWidths | array | — | 各ヘッダーセルのアウトライン太さ配列 |
| rows | array | — | 行データの配列（セル結合情報を含む） |
| fontFamilyMainHead | string | "" |
ヘッダー行のフォント |
| fontWeightMainHead | string | "600" |
ヘッダー行のフォント太さ |
| fontSizeMainHead | number | 16 |
ヘッダー行のフォントサイズ（px）— PC |
| fontSizeMainHeadSp | number | 14 |
ヘッダー行のフォントサイズ（px）— スマホ |
| lineHeightMainHead | number | 1.6 |
ヘッダー行の行間 |
| mainHeadBgColor | string | "var(--color-main)" |
ヘッダー行の背景色 |
| mainHeadTextColor | string | "#ffffff" |
ヘッダー行の文字色 |
| fontFamilyRowHead | string | "" |
行ヘッダー列のフォント |
| fontWeightRowHead | string | "600" |
行ヘッダー列のフォント太さ |
| fontSizeRowHead | number | 16 |
行ヘッダー列のフォントサイズ（px）— PC |
| fontSizeRowHeadSp | number | 14 |
行ヘッダー列のフォントサイズ（px）— スマホ |
| lineHeightRowHead | number | 1.6 |
行ヘッダー列の行間 |
| rowHeadBgColor | string | "var(--color-main)" |
行ヘッダー列の背景色 |
| rowHeadTextColor | string | "#ffffff" |
行ヘッダー列の文字色 |
| fontFamilyCell | string | "" |
セルのフォント |
| fontWeightCell | string | "400" |
セルのフォント太さ |
| fontSizeCell | number | 16 |
セルのフォントサイズ（px）— PC |
| fontSizeCellSp | number | 14 |
セルのフォントサイズ（px）— スマホ |
| lineHeightCell | number | 1.6 |
セルの行間 |
| cellBgColor | string | "#ffffff" |
セルの背景色 |
| cellTextColor | string | "#333333" |
セルの文字色 |
| cellPaddingY | number | 16 |
セルの上下パディング（px） |
| mainHeadPaddingY | number | 16 |
ヘッダー行の上下パディング（px） |
| rowHeadPaddingY | number | 16 |
行ヘッダー列の上下パディング（px） |
| designPattern | string | "" |
デザインパターン（空=デフォルト） |
| textAlignMainHead | string | "center" |
ヘッダー行の文字揃え |
| textAlignRowHead | string | "center" |
行ヘッダー列の文字揃え |
| textAlignCell | string | "center" |
セルの文字揃え |
| verticalAlignMainHead | string | "center" |
ヘッダー行の縦揃え |
| verticalAlignRowHead | string | "center" |
行ヘッダー列の縦揃え |
| verticalAlignCell | string | "center" |
セルの縦揃え |
ビフォーアフターブロック
全3種（有料2 + プレミアム1）。施工事例やダイエット実績など、変化を視覚的に伝えるブロック。
どれを使えばいい？
| やりたいこと | おすすめブロック |
|---|---|
| 矢印付きの縦並びBefore/After | ビフォーアフター 01（有料） |
| スライダーで画像を重ねて比較させたい | ビフォーアフター 02（有料） |
| Before/Afterに説明文も付けたい | ビフォーアフター 03（プレミアム） |
有料ビフォーアフター（2種）
ビフォーアフター 01（paid-block-before-after-1）
Before画像とAfter画像を矢印で繋ぐ基本型。ラベルテキスト・背景色・矢印色をカスタマイズ可能。画像の影付けにも対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| beforeImageUrl | string | URL | Before画像のURL |
| beforeImageAlt | string | "" |
Before画像のalt属性 |
| beforeText | string | "Before" |
Beforeラベルのテキスト |
| afterImageUrl | string | URL | After画像のURL |
| afterImageAlt | string | "" |
After画像のalt属性 |
| afterText | string | "After" |
Afterラベルのテキスト |
| beforeTextBgColor | string | "#e64343" |
Beforeラベルの背景色 |
| afterTextBgColor | string | "#e64343" |
Afterラベルの背景色 |
| arrowBgColor | string | "#e64343" |
矢印の背景色 |
| maxWidth | number | 800 |
最大幅（px） |
| aspectRatioHeight | number | 800 |
画像のアスペクト比（高さ基準値） |
| hasImageShadow | boolean | false |
画像に影を付けるか |
ビフォーアフター 02（paid-block-before-after-2）
スライダー式の画像比較ブロック。中央のバーをドラッグして、2枚の画像を重ねて比較できる。複数アイテム対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| beforeLabel | string | "before" |
Beforeラベルのテキスト |
| afterLabel | string | "after" |
Afterラベルのテキスト |
| labelColorBefore | string | "rgba(209,77,77,0.85)" |
Beforeラベルの背景色 |
| labelColorAfter | string | "rgba(77,209,77,0.85)" |
Afterラベルの背景色 |
| maxWidth | number | 1280 |
最大幅（px） |
| aspectRatioH | number | 800 |
アスペクト比（高さ基準値） |
| items | array | 2アイテム | 比較データの配列。各要素に imgUrl（画像URL）を含む |
プレミアムビフォーアフター（1種）
ビフォーアフター 03（lw-pr-before-after-3）
ビフォーアフター01の上位版。画像の下に説明テキストを追加できる。施工内容や効果の詳細を文章で補足したい場合に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| beforeImageUrl | string | URL | Before画像のURL |
| beforeImageAlt | string | "" |
Before画像のalt属性 |
| beforeText | string | "Before" |
Beforeラベルのテキスト |
| beforeDescription | string | "" |
Before画像の説明文 |
| afterImageUrl | string | URL | After画像のURL |
| afterImageAlt | string | "" |
After画像のalt属性 |
| afterText | string | "After" |
Afterラベルのテキスト |
| afterDescription | string | "" |
After画像の説明文 |
| beforeTextBgColor | string | "#e64343" |
Beforeラベルの背景色 |
| afterTextBgColor | string | "#e64343" |
Afterラベルの背景色 |
| arrowBgColor | string | "#e64343" |
矢印の背景色 |
| maxWidth | number | 800 |
最大幅（px） |
| aspectRatioHeight | number | 800 |
アスペクト比（高さ基準値） |
| hasImageShadow | boolean | false |
画像に影を付けるか |
ユーティリティ・特殊ブロック
全12種。レイアウト補助、装飾、特定業種向けなど、カテゴリに収まらない汎用ブロック群。
どれを使えばいい？
| やりたいこと | おすすめブロック |
|---|---|
| セクション間に余白を入れたい | Lw スペーサー（無料） |
| 背景画像/動画付きのセクションを作りたい | コンテナブロック 01（無料） |
| 再利用可能なパーツを埋め込みたい | マイパーツ（無料） |
| アニメーション付きのグラデーションテキスト | グラデーションテキスト 01（プレミアム） |
| 枠線・背景付きのコンテナで囲みたい | 枠 01（プレミアム） |
| 水平線（区切り線）を入れたい | Border 01（プレミアム） |
| 複数カラムのレイアウトを組みたい | Column 01（プレミアム） |
| 営業日カレンダーを表示したい | カレンダー 1（プレミアム） |
| 会社の沿革（タイムライン）を作りたい | 沿革 01（有料） |
| リンクカード一覧を背景画像付きで表示したい | リンクリスト 2（有料） |
| 店舗情報カードを表示したい | 店舗一覧用 1 shin（テンプレート） |
無料ユーティリティ（3種）
Lw スペーサー（lw-space-1）
レスポンシブ対応のスペーサー。PC・タブレット・スマホそれぞれの高さを個別指定できる。セクション間の余白調整に使う。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| pcHeight | number | 80 |
PC時の高さ（px） |
| tbHeight | number | 64 |
タブレット時の高さ（px） |
| spHeight | number | 40 |
スマホ時の高さ（px） |
コンテナブロック 01（lw-bg-1）
背景画像・動画・オーバーレイ付きの全幅コンテナ。内部にブロックを配置してセクションを構成する。フォーカルポイント、フィルター、レスポンシブパディングなど高機能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| backgroundType | string | "image" |
背景タイプ（image / video） |
| imagePc | string | "" |
背景画像URL — PC |
| imageSp | string | "" |
背景画像URL — スマホ（空=PC画像を使用） |
| focalPointPc | object | {x: 0.5, y: 0.5} |
画像のフォーカルポイント — PC（0〜1） |
| focalPointSp | object | — | 画像のフォーカルポイント — スマホ |
| videoUrl | string | "" |
背景動画のURL |
| videoSpeed | number | 1 |
動画の再生速度（1=通常） |
| focalPointVideoPc | object | — | 動画のフォーカルポイント — PC |
| focalPointVideoSp | object | — | 動画のフォーカルポイント — スマホ |
| isFullWidth | boolean | false |
全幅表示にするか |
| maxWidth | number | 1120 |
コンテンツの最大幅（px） |
| minHeightPc | string | — | 最小高さ — PC |
| minHeightTb | string | — | 最小高さ — タブレット |
| minHeightSp | string | — | 最小高さ — スマホ |
| contentAlignHorizontalPc | string | — | 内部コンテンツの水平配置 — PC |
| contentAlignVerticalPc | string | — | 内部コンテンツの垂直配置 — PC |
| contentAlignHorizontalTb | string | — | 内部コンテンツの水平配置 — タブレット |
| contentAlignVerticalTb | string | — | 内部コンテンツの垂直配置 — タブレット |
| contentAlignHorizontalSp | string | — | 内部コンテンツの水平配置 — スマホ |
| contentAlignVerticalSp | string | — | 内部コンテンツの垂直配置 — スマホ |
| innerPaddingTopPc | number | — | 内側上パディング — PC |
| innerPaddingBottomPc | number | — | 内側下パディング — PC |
| innerPaddingLeftPc | number | — | 内側左パディング — PC |
| innerPaddingRightPc | number | — | 内側右パディング — PC |
| innerPaddingTopTb | number | — | 内側上パディング — タブレット |
| innerPaddingBottomTb | number | — | 内側下パディング — タブレット |
| innerPaddingLeftTb | number | — | 内側左パディング — タブレット |
| innerPaddingRightTb | number | — | 内側右パディング — タブレット |
| innerPaddingTopSp | number | — | 内側上パディング — スマホ |
| innerPaddingBottomSp | number | — | 内側下パディング — スマホ |
| innerPaddingLeftSp | number | — | 内側左パディング — スマホ |
| innerPaddingRightSp | number | — | 内側右パディング — スマホ |
| filterTypePc | string | — | オーバーレイのタイプ — PC（color / gradient） |
| filterTypeTb | string | — | オーバーレイのタイプ — タブレット |
| filterTypeSp | string | — | オーバーレイのタイプ — スマホ |
| filterColorPc | string | — | オーバーレイの色 — PC |
| filterColorTb | string | — | オーバーレイの色 — タブレット |
| filterColorSp | string | — | オーバーレイの色 — スマホ |
| filterGradientPc | string | — | オーバーレイのグラデーション — PC |
| filterGradientTb | string | — | オーバーレイのグラデーション — タブレット |
| filterGradientSp | string | — | オーバーレイのグラデーション — スマホ |
| opacityPc | number | 0.5 |
オーバーレイの不透明度 — PC（0〜1） |
| opacityTb | number | 0.5 |
オーバーレイの不透明度 — タブレット |
| opacitySp | number | 0.5 |
オーバーレイの不透明度 — スマホ |
マイパーツ（lw-my-parts-embed）
登録済みの「マイパーツ」を埋め込むブロック。ヘッダー・フッター・共通セクションなど、サイト全体で再利用するパーツの表示に使う。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| partsId | integer | 0 |
埋め込むマイパーツのID |
| partsCat | integer | 0 |
マイパーツのカテゴリID |
| showPreview | boolean | false |
エディター上でプレビュー表示するか |
プレミアムユーティリティ（5種）
グラデーションテキスト 01（lw-pr-text-1）
アニメーションするグラデーションテキスト。スライドアニメーションでグラデーションが動き続ける演出ができる。キャッチコピーやセクション見出しに効果的。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| text | string | "SLIDE ANIMATION" |
表示テキスト |
| tagName | string | "h2" |
HTMLタグ（h1〜h6 / p / span） |
| textAlignPc | string | "left" |
テキスト配置 — PC |
| textAlignSp | string | "" |
テキスト配置 — スマホ（空=PC値を継承） |
| fontSet | string | "" |
フォントファミリー（空=テーマ設定） |
| fontWeight | string | "" |
フォント太さ（空=デフォルト） |
| fontSizePc | number | 1 |
フォントサイズ（rem）— PC |
| fontSizeTab | number | null |
フォントサイズ（rem）— タブレット（null=PC値を継承） |
| fontSizeSp | number | null |
フォントサイズ（rem）— スマホ（null=PC値を継承） |
| lineHeightPc | number | 1.5 |
行間 — PC |
| lineHeightTab | number | null |
行間 — タブレット（null=PC値を継承） |
| lineHeightSp | number | null |
行間 — スマホ（null=PC値を継承） |
| gradientPreset | string | "preset-blue" |
グラデーションプリセット名 |
| gradientColor1 | string | "#3b82f6" |
グラデーション色1 |
| gradientColor2 | string | "#06b6d4" |
グラデーション色2 |
| gradientColor3 | string | "#3b82f6" |
グラデーション色3 |
| gradientAngle | string | "270" |
グラデーションの角度（deg） |
| animationPattern | string | "lw-pr-text-1-gradient-slide-anime-1" |
アニメーションパターン名 |
| animationTime | number | 3 |
アニメーション時間（秒） |
| animationEasing | string | "linear" |
アニメーションのイージング関数 |
枠 01（lw-pr-waku-1）
汎用コンテナブロック。パディング・ボーダー・背景（色/グラデーション/画像）・エフェクト・アスペクト比・リンク化など、あらゆるスタイリングに対応。インナーブロックを配置してカード風UIやセクション枠を作る。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| waku1JustifyContentPc | string | "center" |
コンテンツの水平配置 — PC |
| waku1JustifyContentSp | string | "" |
コンテンツの水平配置 — スマホ（空=PC値を継承） |
| waku1MaxWidthPc | number | 1300 |
最大幅（px）— PC |
| waku1MaxWidthSp | number | -1 |
最大幅（px）— スマホ（-1=PC値を継承） |
| waku1PaddingTopPc | number | 24 |
上パディング（px）— PC |
| waku1PaddingRightPc | number | 24 |
右パディング（px）— PC |
| waku1PaddingBottomPc | number | 24 |
下パディング（px）— PC |
| waku1PaddingLeftPc | number | 24 |
左パディング（px）— PC |
| waku1PaddingTopSp | number | -1 |
上パディング（px）— スマホ（-1=PC値を継承） |
| waku1PaddingRightSp | number | -1 |
右パディング（px）— スマホ（-1=PC値を継承） |
| waku1PaddingBottomSp | number | -1 |
下パディング（px）— スマホ（-1=PC値を継承） |
| waku1PaddingLeftSp | number | -1 |
左パディング（px）— スマホ（-1=PC値を継承） |
| waku1BorderWidthPc | number | 2 |
枠線の太さ（px）— PC |
| waku1BorderWidthSp | number | -1 |
枠線の太さ（px）— スマホ（-1=PC値を継承） |
| waku1BorderStylePc | string | "solid" |
枠線のスタイル — PC（solid / dashed / dotted / none） |
| waku1BorderStyleSp | string | "" |
枠線のスタイル — スマホ（空=PC値を継承） |
| waku1BorderColorPc | string | "var(--color-main)" |
枠線の色 — PC |
| waku1BorderColorSp | string | "" |
枠線の色 — スマホ（空=PC値を継承） |
| waku1BorderRadiusPc | array | [8, 8, 8, 8] |
角丸（px）— PC [左上, 右上, 右下, 左下] |
| waku1BorderRadiusSp | array | [] |
角丸（px）— スマホ（空=PC値を継承） |
| waku1BgTypePc | string | "color" |
背景タイプ — PC（color / gradient / image） |
| waku1BgTypeSp | string | "" |
背景タイプ — スマホ（空=PC値を継承） |
| waku1BgColorPc | string | "#ffffff" |
背景色 — PC |
| waku1BgColorSp | string | "" |
背景色 — スマホ（空=PC値を継承） |
| waku1BgGradientPc | string | グラデーション値 | 背景グラデーション — PC |
| waku1BgGradientSp | string | "" |
背景グラデーション — スマホ（空=PC値を継承） |
| waku1BgOpacityPc | number | 100 |
背景の不透明度（%）— PC |
| waku1BgOpacitySp | number | -1 |
背景の不透明度（%）— スマホ（-1=PC値を継承） |
| waku1BgBlendModePc | string | "normal" |
背景のブレンドモード — PC |
| waku1BgBlendModeSp | string | "" |
背景のブレンドモード — スマホ（空=PC値を継承） |
| waku1BgImagePc | string | "" |
背景画像URL — PC |
| waku1BgImageSp | string | "" |
背景画像URL — スマホ |
| waku1ImageEffect | string | "none" |
画像エフェクト（none / grayscale / sepia / blur など） |
| waku1MinHeightPc | number | -1 |
最小高さ（px）— PC（-1=自動） |
| waku1MinHeightSp | number | -1 |
最小高さ（px）— スマホ（-1=自動） |
| waku1AspectRatioPc | number | 0 |
アスペクト比 — PC（0=なし） |
| waku1AspectRatioSp | number | -1 |
アスペクト比 — スマホ（-1=PC値を継承） |
| waku1LinkUrl | string | "" |
枠全体のリンク先URL（空=リンクなし） |
| waku1LinkNewTab | boolean | false |
リンクを新しいタブで開くか |
> 画像エフェクトの詳細: waku1ImageEffect を "none" 以外に設定すると、背景画像にCSSフィルターが適用される。grayscale（白黒）、sepia（セピア）、blur（ぼかし）、brightness（明るさ）、contrast（コントラスト）、saturate（彩度）、invert（反転）、hueRotate（色相回転）、opacity（透明度）から選択可能。
Border 01（lw-pr-border-1）
水平線（区切り線）ブロック。セクション間の区切りに使う。最大幅・太さ・スタイル・色・配置をPC/SP個別に設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mtPc | number | 0 |
上マージン（px）— PC |
| mbPc | number | 0 |
下マージン（px）— PC |
| mtSp | number | -1 |
上マージン（px）— スマホ（-1=PC値を継承） |
| mbSp | number | -1 |
下マージン（px）— スマホ（-1=PC値を継承） |
| maxWidthUnitPc | string | "%" |
最大幅の単位 — PC（% / px） |
| maxWidthPc | number | 100 |
最大幅 — PC |
| maxWidthUnitSp | string | "" |
最大幅の単位 — スマホ（空=PC値を継承） |
| maxWidthSp | number | -1 |
最大幅 — スマホ（-1=PC値を継承） |
| borderWidthPc | number | 1 |
線の太さ（px）— PC |
| borderWidthSp | number | -1 |
線の太さ（px）— スマホ（-1=PC値を継承） |
| borderStylePc | string | "solid" |
線のスタイル — PC（solid / dashed / dotted） |
| borderStyleSp | string | "" |
線のスタイル — スマホ（空=PC値を継承） |
| borderColorPc | string | "var(--color-main)" |
線の色 — PC |
| borderColorSp | string | "" |
線の色 — スマホ（空=PC値を継承） |
| alignPc | string | "center" |
配置 — PC（left / center / right） |
| alignSp | string | "" |
配置 — スマホ（空=PC値を継承） |
Column 01（lw-pr-column-1）
レスポンシブ対応のマルチカラムレイアウトブロック。PC/スマホで列数を切り替え、各アイテムにパディング・ボーダー・背景・角丸を個別設定可能。カード一覧やグリッドレイアウトに使う。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| columnsPc | number | 3 |
PC時の列数 |
| columnWidthsPc | array | [1, 1, 1] |
PC時の各列のfr比率 |
| columnsSp | number | 2 |
スマホ時の列数 |
| rowGapPc | number | 8 |
行間の隙間（px）— PC |
| columnGapPc | number | 8 |
列間の隙間（px）— PC |
| rowGapSp | number | — | 行間の隙間（px）— スマホ |
| columnGapSp | number | — | 列間の隙間（px）— スマホ |
> ラッパー（外枠）のスタイル属性: パディング（上下左右 PC/SP）、ボーダー（幅・スタイル・色 PC/SP）、角丸（PC/SP）、背景色（PC/SP）などを設定可能。属性名は wrapper プレフィックスで統一。
> アイテム（各カラム）のスタイル属性: パディング（上下左右 PC/SP）、ボーダー（幅・スタイル・色 PC/SP）、角丸（PC/SP）、背景色（PC/SP）などを設定可能。属性名は item プレフィックスで統一。
> 属性数が69と非常に多いため、主要属性のみ記載。実際の設定はエディターのサイドバーパネルで視覚的に操作する。
カレンダー 1（lw-pr-calendar-1）
営業日・診療時間などの週間スケジュールをテーブル形式で表示するブロック。病院・美容院・店舗サイトに最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| colorTableItemBd | string | "var(--color-main)" |
セルのボーダー色 |
| colorTableHeadItemBg | string | "var(--color-main)" |
ヘッダー行の背景色 |
| colorTableHeadItemText | string | "#ffffff" |
ヘッダー行の文字色 |
| colorTableBodyItemText | string | "#000000" |
本体セルの文字色 |
| colorTableBodyItemFirstText | string | "#000000" |
行頭セル（行ラベル）の文字色 |
| fontSet | string | "" |
フォントファミリー（空=テーマ設定） |
| fontWeight | string | "" |
フォント太さ（空=デフォルト） |
| headItems | array | ["営業時間","月","火","水","木","金","土","日"] |
ヘッダー行のラベル配列 |
| bodyRows | array | 2行 | 本体データ配列。各行にセル値の配列（「○」「×」「△」など） |
有料ユーティリティ（2種）
沿革 01（paid-block-history-1）
タイムライン形式の沿革表示ブロック。年号をh3タグで構造化し、月ごとのイベントを時系列に表示する。会社紹介ページの沿革セクションに最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| yearText | string | "2003年" |
年号テキスト |
| yearTag | string | "h3" |
年号のHTMLタグ（h2〜h6） |
| fontYear | string | "" |
年号のフォント（空=テーマ設定） |
| fontWeightYear | string | "" |
年号のフォント太さ（空=デフォルト） |
| colorYear | string | "" |
年号の文字色（空=デフォルト） |
| yearBgColor | string | "" |
年号の背景色（空=透明） |
| pointColor | string | "#ffffff" |
タイムラインのポイント（丸）の色 |
| pointBorderColor | string | "var(--color-main)" |
タイムラインのポイントの枠線色 |
| fontDt | string | "" |
月の項目名（dt）のフォント |
| fontWeightDt | string | "" |
月の項目名のフォント太さ |
| colorDt | string | "" |
月の項目名の文字色 |
| fontDd | string | "" |
イベント内容（dd）のフォント |
| fontWeightDd | string | "" |
イベント内容のフォント太さ |
| colorDd | string | "" |
イベント内容の文字色 |
| events | array | [{month, desc} x4] |
イベントの配列。各要素に month（月）と desc（内容） |
リンクリスト 2（paid-block-link-2）
全幅背景画像付きのリンクカード一覧。背景にフィルターをかけた上にリンクカードを並べる。INFORMATIONセクションやニュース一覧に使える。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "INFORMATION" |
セクションのメインタイトル |
| titleBdColor | string | "#da5959" |
タイトル下線の色 |
| subTitle | string | "インフォメーション" |
サブタイトル |
| mainExplanation | string | テキスト | セクションの説明文 |
| fontLi | string | "" |
リンクタイトルのフォント |
| fontColorLi | string | "#fff" |
リンクタイトルの文字色 |
| fontWeightLi | string | "500" |
リンクタイトルのフォント太さ |
| fontLiP | string | "" |
リンク説明文のフォント |
| fontColorLiP | string | "#fff" |
リンク説明文の文字色 |
| fontWeightLiP | string | "400" |
リンク説明文のフォント太さ |
| backgroundColor | string | "rgba(0,0,0,0)" |
セクション全体の背景色 |
| backgroundOpacity | number | 0.5 |
背景の不透明度（0〜1） |
| borderColor | string | "#fff" |
カードの枠線色 |
| borderSize | number | 2 |
カードの枠線太さ（px） |
| bgFilterColor | string | "#000" |
背景フィルターの色 |
| bgFilterOpacity | number | 0.7 |
背景フィルターの不透明度（0〜1） |
| bgImageUrl | string | URL | 背景画像のURL |
| contents | array | [{ttl, text, url, icon, imageUrl} x3] |
リンクカードの配列。ttl=タイトル, text=説明, url=リンク先, icon=アイコン, imageUrl=画像 |
テンプレートユーティリティ（1種）
店舗一覧用 1 shin（shin-gas-station-01-shop-list-1）
ガソリンスタンドテンプレート用の店舗情報カード。店舗名・詳細情報（dt/dd形式）・タグ・画像を1枚のカードにまとめて表示する。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| shopName | string | "ガソリンスタンドセルフ 〇〇店" |
店舗名 |
| details | array | [{dt, dd} x4] |
店舗詳細の配列。dt=項目名（住所・電話など）, dd=内容 |
| tags | string | "セルフ, 軽油, ..." |
タグ（カンマ区切り） |
| imgUrl | string | プレースホルダーURL | 店舗画像のURL |
| imgAlt | string | "" |
画像のalt属性 |
補足情報
レスポンシブ値の継承ルール
多くのプレミアムブロックでは、スマホ用属性に -1（数値）や ""（文字列）を設定すると、PC用の値がそのまま継承される。デバイスごとに変えたい場合のみ個別値を入力する。
| SP属性の値 | 動作 |
|---|---|
-1（数値型） |
PC値を継承 |
""（文字列型） |
PC値を継承 |
null |
PC値を継承 |
| 具体的な値 | スマホ専用値として適用 |
CSS変数について
var(--color-main) はLiteWordのテーマカスタマイザーで設定したメインカラーを参照する。テーマカラーを変更すると、この変数を使っているすべてのブロックの色が自動的に変わる。固定色にしたい場合は #0a71c0 のような16進数カラーコードを直接指定する。
最終更新: 2026-03-15 13:00