リストブロック
リスト系ブロック — 詳細マニュアル
> 箇条書き・特徴紹介・リンク集・カード型一覧など、項目を並べて見せるブロック群。全12種。
設定手順
リスト系ブロックの基本的な使い方を以下の手順で説明します。
-
リストブロックを挿入する
- エディタ上部の「＋」（ブロック挿入）ボタンをクリック
- 検索バーに「リスト」「List」「インフォリスト」などと入力して検索
- カテゴリ「LiteWord」からも選択可能
- 使いたいリストブロックをクリックして挿入
-
リスト項目を編集する
- 挿入されたブロック内の各テキスト（タイトル・説明文・番号など）を直接クリックして編集
- 項目の追加・削除はサイドバーの「項目」セクションで行う
- 項目数はブロックごとに自由に増減可能
-
サイドバーで表示設定を調整する
- ブロックを選択した状態で右サイドバーの「ブロック」タブを開く
- カラム数: List 04やPR List 06など対応ブロックでは、PC/SPごとのカラム数を設定
- アイコン: チェックアイコンの色変更、またはカスタムアイコン画像のアップロード（List 04, PR List 07）
- フォント: テキストの書体・太さ・サイズを調整
- 色: テキスト色・ボーダー色・背景色を変更
-
背景・装飾を設定する（対応ブロックの場合）
- 背景画像: List 02やLink List 01では、セクション全体の背景画像を設定可能
- フィルター: 背景画像の上にオーバーレイを重ねて可読性を確保
- ボーダー: 枠線の太さ・色・スタイル（solid/dashed/dotted）を調整
- 角丸: カードの角の丸みを設定
-
リンクを設定する（リンク対応ブロックの場合）
- Link List 01: 各ボタンにリンクURLとアイコンを設定
- インフォリスト 1/2/4 shin: 各項目にリンク先URLを設定
- リンクの設定はサイドバーの各項目内で行う
-
プレビューで確認して公開する
- エディタ右上の「プレビュー」→「新しいタブでプレビュー」で実際の表示を確認
- カラム表示がPC/スマホで意図通りか確認する
- 問題がなければ「公開」または「更新」をクリック
無料リストブロック（5種）
List 01（lw-list-1）— 6属性
番号付きのシンプルなリスト。各項目に番号とテキストが表示され、ボーダーで区切られる。手順説明やポイント整理に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| contents | array/query | 3件 | リスト項目の配列。各項目に番号とテキストを設定 |
| noFontSet | string | "" |
番号部分のフォント書体。空欄でテーマデフォルト |
| noFontWeight | string | "" |
番号部分のフォントウェイト（太さ） |
| textFontSet | string | "" |
テキスト部分のフォント書体 |
| textFontWeight | string | "" |
テキスト部分のフォントウェイト |
| borderColor | string | var(--color-main) |
各項目を区切るボーダーの色 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
| number | string/number | 表示する番号 |
使いどころ： 「3つのメリット」「5つのステップ」など、番号付きで順番のある情報を整理したい時に。
List 02（lw-list-2）— 8属性
背景画像付きのリスト。SVGチェックアイコンが各項目に付き、サービスの強みや機能を印象的に見せる。背景画像の上にグラデーションオーバーレイを重ねる構成。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| backgroundImage | string | "" |
セクション背景画像のURL。空欄で背景色のみ |
| bgGradient | string | var(--color-main) |
背景画像がない場合のグラデーション/背景色 |
| filterOpacity | number | 0.8 |
背景画像の上に重ねるオーバーレイの透過度（0〜1） |
| titleText | string | "機能紹介" |
セクションの見出しテキスト |
| fontLi | string | "" |
リスト項目テキストのフォント書体 |
| fontWeightLi | string | "" |
リスト項目テキストのフォントウェイト |
| colorLiSvg | string | var(--color-accent) |
チェックアイコン（SVG）の色 |
| contents | array/query | 3件 | リスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
| borderColor | string | 各項目のボーダー色（個別設定可能） |
使いどころ： トップページの「当社の特徴」「選ばれる理由」など、背景で雰囲気を出しつつ項目を並べたい時に。
List 03（lw-list-3）— 5属性
SVGチェックアイコン付きのシンプルなリスト。装飾を抑えた軽い雰囲気の箇条書き。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| fontLi | string | "" |
リスト項目テキストのフォント書体 |
| fontWeightLi | string | "" |
リスト項目テキストのフォントウェイト |
| colorLiSvg | string | var(--color-main) |
チェックアイコン（SVG）の色 |
| borderColor | string | var(--color-main) |
各項目を区切るボーダーの色 |
| contents | array/query | 4件 | リスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
使いどころ： 記事内の補足リスト、サービスの対応項目一覧など、シンプルに項目を並べたい場面に。
List 04（lw-list-4）— 17属性
最もカスタマイズ性が高い無料リスト。カード型表示、カスタムアイコン、カラム分割、ボーダーの細かい制御が可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| fontLi | string | "" |
リスト項目テキストのフォント書体 |
| fontWeightLi | string | "" |
リスト項目テキストのフォントウェイト |
| sizeLi | string | "size_m" |
テキストサイズのクラス名（size_s / size_m / size_l 等） |
| textColor | string | "" |
テキストの色。空欄でテーマデフォルト |
| colorLiSvg | string | var(--color-main) |
デフォルトアイコン（SVG）の色 |
| iconUrl | string | "" |
カスタムアイコン画像のURL。設定するとSVGの代わりに表示 |
| iconSize | number | 1.2 |
アイコンのサイズ（em単位） |
| iconPositionTop | boolean | false |
trueでアイコンをテキストの上に配置（デフォルトは左横） |
| borderColor | string | var(--color-main) |
カードの枠線の色 |
| borderWidth | number | 2 |
カードの枠線の太さ（px） |
| borderStyle | string | "solid" |
枠線のスタイル（solid / dashed / dotted） |
| borderRadius | number | 0.5 |
カードの角丸（em単位） |
| maxWidth | number | 800 |
リスト全体の最大幅（px） |
| bgColor | string | "#fff" |
カードの背景色 |
| colClass | string | "clm_1" |
カラム数クラス（clm_1 / clm_2 / clm_3 / clm_4） |
| noBorder | boolean | false |
trueで枠線を非表示にする |
| contents | array/query | 4件 | リスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
使いどころ： サービス一覧をカード型で並べたい時、アイコン付きの特徴リスト、カラムで見せたい一覧表示に。
Link List 01（lw-link-list-1）— 21属性
リンクボタンをグリッド状に並べるナビゲーションブロック。背景画像付きのセクション内にアイコン付きボタンを配置。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| MaxWidth | number | 800 |
リスト全体の最大幅（px） |
| BtnGap | number | 12 |
ボタン同士の間隔（px） |
| BtnClm | number | 2 |
PC表示時のカラム数 |
| BtnClmSp | number | 1 |
スマホ表示時のカラム数 |
| backgroundSwitch | boolean | true |
背景画像/色の使用ON/OFF |
| backgroundImage | string | "" |
セクション背景画像のURL |
| bgGradient | string | var(--color-main) |
背景のグラデーション/色 |
| colorLiBgOpacity | number | 100 |
ボタン背景色の不透明度（0〜100） |
| filterOpacity | number | 0.9 |
背景オーバーレイの透過度 |
| ListBorderRadius | number | 2 |
ボタンの角丸（px） |
| hideTitle | boolean | false |
trueでセクションタイトルを非表示 |
| titleText | string | "Information" |
セクションの見出しテキスト |
| titleBottomText | string | "" |
タイトル下のサブテキスト |
| fontLi | string | "" |
ボタンテキストのフォント書体 |
| fontWeightLi | string | "" |
ボタンテキストのフォントウェイト |
| colorLiSvg | string | "#ffffff" |
ボタン内アイコンの色 |
| colorLiBg | string | var(--color-main) |
ボタンの背景色 |
| colorLiText | string | "#ffffff" |
ボタンのテキスト色 |
| colorLiBorder | string | "#ffffff" |
ボタンの枠線色 |
| ListBorderSize | number | 2 |
ボタンの枠線の太さ（px） |
| contents | array/query | 4件 | リンクボタンの配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | ボタンに表示するテキスト |
| link | string | リンク先URL |
| icon | string | ボタン内に表示するアイコン |
使いどころ： トップページの「メニュー」「サービス一覧」へのナビゲーション、情報カテゴリへの導線に。
プレミアムリストブロック（3種）
List 05（lw-pr-list-5）— 9属性
中央に画像、左右にリスト項目を配置する2カラム構成。対比や比較を視覚的に見せるレイアウト。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| leftItems | array | ["テキスト", "テキスト", "テキスト"] |
左側に表示するリスト項目の配列 |
| rightItems | array | ["テキスト", "テキスト", "テキスト"] |
右側に表示するリスト項目の配列 |
| imageUrl | string | "https://placehold.co/800x320" |
中央に表示する画像のURL |
| imageAlt | string | "" |
画像の代替テキスト（SEO・アクセシビリティ） |
| bgColor | string | "#f7f7f7" |
セクション全体の背景色 |
| textColor | string | var(--color-main) |
テキストの色 |
| listFontSet | string | "" |
リスト項目のフォント書体 |
| listFontWeight | string | "" |
リスト項目のフォントウェイト |
| listColumns | number | 2 |
リストの表示カラム数 |
使いどころ： サービスの特徴を左右に分けて画像と一緒に紹介、ビフォー/アフターの対比、商品写真の周りにポイントを配置。
PR List 06（lw-pr-list-6）— 30属性
画像カードをグリッド状に並べるリスト。各カードにラベル・タイトル・説明文を設定でき、レスポンシブ対応のカラム設定が細かく可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| columnsPC | number | 4 |
PC表示時のカラム数 |
| columnsSP | number | 2 |
スマホ表示時のカラム数 |
| rowGapPc | number | 32 |
PC時の行間隔（px） |
| rowGapSp | number | -1 |
SP時の行間隔。-1でPC値を継承 |
| columnGapPc | number | 8 |
PC時の列間隔（px） |
| columnGapSp | number | -1 |
SP時の列間隔。-1でPC値を継承 |
| imageAspectRatio | string | "9/6" |
カード画像のアスペクト比 |
| fontTitle | string | "" |
タイトルのフォント書体 |
| fontWeightTitle | string | "" |
タイトルのフォントウェイト |
| colorTitle | string | "" |
タイトルの文字色 |
| fontSizeTtlPc | number | 18 |
PC時のタイトルフォントサイズ（px） |
| fontSizeTtlTb | number | -1 |
タブレット時のタイトルサイズ。-1でPC値を継承 |
| fontSizeTtlSp | number | -1 |
SP時のタイトルサイズ。-1でPC値を継承 |
| alignTtlPc | string | "center" |
PC時のタイトル配置（left / center / right） |
| alignTtlSp | string | "" |
SP時のタイトル配置。空欄でPC値を継承 |
| marginTopTtlPc | number | 12 |
PC時のタイトル上マージン（px） |
| marginTopTtlSp | number | -1 |
SP時のタイトル上マージン。-1でPC値を継承 |
| fontDescription | string | "" |
説明文のフォント書体 |
| fontWeightDescription | string | "" |
説明文のフォントウェイト |
| colorDescription | string | "" |
説明文の文字色 |
| fontSizePPc | number | 14 |
PC時の説明文フォントサイズ（px） |
| fontSizePTb | number | -1 |
タブレット時の説明文サイズ。-1でPC値を継承 |
| fontSizePSp | number | -1 |
SP時の説明文サイズ。-1でPC値を継承 |
| alignPPc | string | "left" |
PC時の説明文配置 |
| alignPSp | string | "" |
SP時の説明文配置。空欄でPC値を継承 |
| showLabel | boolean | true |
カードにラベルを表示するかどうか |
| labelBgColor | string | var(--color-accent) |
ラベルの背景色 |
| labelTextColor | string | "#fff" |
ラベルの文字色 |
| labelFontSizePc | number | 17 |
PC時のラベルフォントサイズ（px） |
| labelFontSizeSp | number | -1 |
SP時のラベルサイズ。-1でPC値を継承 |
items（カード配列）：
| フィールド | 型 | 説明 |
|---|---|---|
| imageUrl | string | カード画像のURL |
| label | string | 画像上に表示するラベルテキスト |
| title | string | カードのタイトル |
| description | string | カードの説明文 |
レスポンシブ値について： -1 が設定されている項目はPC値を自動継承します。デバイスごとに異なるサイズにしたい場合のみ明示的に値を設定してください。
使いどころ： メニュー一覧、施工事例ギャラリー、スタッフ紹介など、画像付きの一覧を整然と並べたい時に。
PR List 07（lw-pr-list-7）— 22属性
グループ化されたリスト。複数のリストグループをカスタムカラム幅で横並びに配置。グリッドの細かい間隔制御とレスポンシブ対応。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| fontLi | string | "" |
リスト項目テキストのフォント書体 |
| fontWeightLi | string | "" |
リスト項目テキストのフォントウェイト |
| fontSizePc | number | 16 |
PC時のフォントサイズ（px） |
| fontSizeSp | number | -1 |
SP時のフォントサイズ。-1でPC値を継承 |
| textColor | string | "" |
テキストの色 |
| colorLiSvg | string | var(--color-main) |
アイコン（SVG）の色 |
| iconUrl | string | "" |
カスタムアイコン画像のURL |
| iconSize | number | 1.2 |
アイコンのサイズ（em単位） |
| bgColor | string | "#fff" |
各グループの背景色 |
| colClass | string | "clm_1" |
カラム数クラス（clm_1 / clm_2 / clm_3 / clm_4） |
| columnWidths | array | [1, 2] |
PC時の各カラムの幅比率（例: [1,2]で1:2の比率） |
| columnWidthsSp | array | [] |
SP時のカラム幅比率。空配列でPC値を継承 |
| innerRowGapPc | number | 20 |
PC時のグループ内の行間隔（px） |
| innerColumnGapPc | number | 20 |
PC時のグループ内の列間隔（px） |
| innerRowGapSp | number | -1 |
SP時のグループ内行間隔。-1でPC値を継承 |
| innerColumnGapSp | number | -1 |
SP時のグループ内列間隔。-1でPC値を継承 |
| rowGapPc | number | 20 |
PC時のグループ間の行間隔（px） |
| columnGapPc | number | 20 |
PC時のグループ間の列間隔（px） |
| rowGapSp | number | -1 |
SP時のグループ間行間隔。-1でPC値を継承 |
| columnGapSp | number | -1 |
SP時のグループ間列間隔。-1でPC値を継承 |
| listGroups | array | 2グループ | リストグループの配列 |
listGroups の各グループ：
| フィールド | 型 | 説明 |
|---|---|---|
| contents | array | グループ内のリスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
使いどころ： 料金プランの比較、カテゴリ分けした特徴一覧、サイドバーとメインコンテンツのような幅比率の異なるリスト配置に。
テンプレートリストブロック（4種）
> テンプレート専用ブロックは「shinシリーズ」に含まれるリストです。テンプレートを有効化すると使用可能になります。
インフォリスト 1 shin（shin-gas-station-01-list-1）— 1属性
番号・画像・テキスト・リンクを組み合わせた情報リスト。各項目ごとに色やリンク先を個別設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| contents | array/query | 3件 | リスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目の見出しテキスト |
| textColor | string | テキストの色（項目ごとに個別設定） |
| number | string/number | 表示する番号 |
| p_text | string | 説明文（見出し下のサブテキスト） |
| image | string | 項目に表示する画像URL |
| url | string | クリック時のリンク先URL |
使いどころ： サービス紹介のステップ説明、画像付きの詳細リスト、各項目にリンクを持たせたナビゲーションリストに。
インフォリスト 2 shin（shin-gas-station-01-list-2）— 5属性
背景画像付きのカードスライダー。番号入りのカードが横にスライドし、各カードに画像・テキスト・ボタンを配置。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| bgImage | string | picsum画像URL | セクション全体の背景画像URL |
| filterColor | string | "rgba(0,0,0,0.5)" |
背景画像のオーバーレイ色（rgba形式） |
| topTitleSub | string | "私たちの会社について" |
セクション上部のサブタイトル |
| topTitleMain | string | "Company" |
セクション上部のメインタイトル |
| items | array/query | 3件 | スライダーカードの配列 |
items の各カード：
| フィールド | 型 | 説明 |
|---|---|---|
| itemImage | string | カードに表示する画像URL |
| no | string/number | カードに表示する番号 |
| sub | string | カードのサブテキスト |
| main | string | カードのメインテキスト |
| description | string | カードの説明文 |
| btnLabel | string | ボタンのラベルテキスト |
| url | string | ボタンのリンク先URL |
使いどころ： 会社紹介の「3つの強み」、サービス内容のスライド形式での紹介に。背景画像で雰囲気を演出しつつカードで情報を整理。
インフォリスト 3 shin（shin-gas-station-01-list-3）— 7属性
シンプルなスタイル付きリスト。背景色とボーダーで整えた落ち着いたデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| fontLi | string | "" |
リスト項目テキストのフォント書体 |
| fontColorLi | string | var(--color-main) |
リスト項目テキストの色 |
| fontWeightLi | string | "600" |
リスト項目テキストのフォントウェイト |
| backgroundColor | string | "#FAFAFA" |
リスト全体の背景色 |
| borderColor | string | var(--color-main) |
ボーダーの色 |
| borderSize | number | 0 |
ボーダーの太さ（px）。0で非表示 |
| contents | array/query | 3件 | リスト項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| text | string | 項目のテキスト |
使いどころ： 営業時間、取扱サービス一覧など、装飾を抑えたシンプルなリスト表示に。背景色でエリアを分けたい時に。
インフォリスト 4 shin（shin-gas-station-01-list-4）— 13属性
ステップ形式の情報リスト。各項目に番号バッジ・画像・タイトル・説明文・リンクを設定可能。手順やフローの説明に特化。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| fontLi | string | "" |
タイトルのフォント書体 |
| fontColorLi | string | var(--color-main) |
タイトルの文字色 |
| fontWeightLi | string | "600" |
タイトルのフォントウェイト |
| fontLiP | string | "" |
説明文のフォント書体 |
| fontColorLiP | string | var(--color-black) |
説明文の文字色 |
| fontWeightLiP | string | "400" |
説明文のフォントウェイト |
| stepFont | string | "" |
ステップ番号バッジのフォント書体 |
| stepFontColor | string | "#fff" |
ステップ番号バッジの文字色 |
| stepFontWeight | string | "600" |
ステップ番号バッジのフォントウェイト |
| backgroundColor | string | "#FAFAFA" |
リスト全体の背景色 |
| borderColor | string | var(--color-main) |
ボーダー/ステップバッジの色 |
| borderSize | number | 0 |
ボーダーの太さ（px）。0で非表示 |
| contents | array/query | 3件 | ステップ項目の配列 |
contents の各項目：
| フィールド | 型 | 説明 |
|---|---|---|
| image | string | ステップに表示する画像URL |
| ttl | string | ステップのタイトル |
| text | string | ステップの説明文 |
| url | string | 「詳しくはこちら」等のリンク先URL |
使いどころ： 「ご利用の流れ」「お申し込み手順」「施工プロセス」など、ステップバイステップで説明したい情報に最適。
どれを使えばいい？ — リスト選びガイド
用途別おすすめ
| 用途 | おすすめブロック | ティア |
|---|---|---|
| シンプルな番号付きリスト | List 01 | 無料 |
| チェックアイコン付き箇条書き | List 03 | 無料 |
| 背景画像付きの特徴紹介 | List 02 | 無料 |
| カード型でカラム配置 | List 04 | 無料 |
| リンクボタンのグリッドナビ | Link List 01 | 無料 |
| 中央画像＋左右リスト | List 05 | プレミアム |
| 画像カードの一覧グリッド | PR List 06 | プレミアム |
| グループ分けしたリスト | PR List 07 | プレミアム |
| 画像・番号付きの情報リスト | インフォリスト 1 shin | テンプレート |
| スライダー形式の紹介 | インフォリスト 2 shin | テンプレート |
| 装飾控えめなシンプルリスト | インフォリスト 3 shin | テンプレート |
| ステップ/手順の説明 | インフォリスト 4 shin | テンプレート |
カスタマイズ性で選ぶ
| レベル | ブロック | 属性数 |
|---|---|---|
| 最小（すぐ使える） | インフォリスト 1 shin | 1 |
| シンプル | List 03 | 5 |
| 標準 | List 01 / List 02 | 6〜8 |
| 高い | List 04 / List 05 | 9〜17 |
| 非常に高い | Link List 01 / PR List 07 | 21〜22 |
| 最大 | PR List 06 | 30 |
ティア別まとめ
- 無料（5種）： 基本的なリスト表示はすべてカバー。List 04が最も万能。
- プレミアム（3種）： 画像カードグリッド（PR List 06）やグループ化（PR List 07）など高度なレイアウトが必要な場合に。
- テンプレート（4種）： shinテンプレートと統一されたデザインで使いたい場合に。ステップ説明やスライダーなど特化型。
よくある質問
Q: リストの項目数は変更できますか？
A: はい、すべてのリストブロックで項目の追加・削除が可能です。右サイドバーの項目リストで「追加」ボタンを押すか、不要な項目を削除してください。
Q: カラム数を変更したらスマホで崩れました。
A: カラム数はPC用とSP用を別々に設定してください。スマホでは1〜2カラムにするのが一般的です。対応ブロック（List 04, PR List 06, Link List 01等）のサイドバーで確認できます。
Q: チェックアイコンを別のアイコンに変えたいです。
A: List 04とPR List 07では「カスタムアイコン画像のURL」に画像を設定すると、デフォルトのSVGチェックアイコンの代わりにその画像が表示されます。
Q: 背景画像付きリスト（List 02）で文字が読みにくいです。
A: 「フィルター透過度」の値を上げてください（0.8〜0.9推奨）。オーバーレイが濃くなり、白文字が読みやすくなります。
Q: リスト項目にリンクを付けたいです。
A: Link List 01を使うと各項目にリンクURLを設定できます。通常のList 01〜04にはリンク機能がないため、リンク導線が必要な場合はLink List 01またはテンプレートのインフォリスト 1/4 shinを使ってください。
最終更新: 2026-03-15 13:00