日経新聞で紹介されました！
サイト管理人
このページではLightningテーマにおけるブロックエディタで使う主な各ブロックの使い方サンプルをまとめて掲載しています。
ぜひ、実際の見た目と編集画面での設定など見比べてみて下さい。
- 1. 見出し
- 2. 見出し２
- 2.1. 見出し３
- 2.1.1. 見出し４
- 2.1.1.1. 見出し５
- 2.1.1.1.1. 見出し６
- 3. リスト
- 4. テーブル
- 4.1. スタイル（デフォルト）
- 4.2. スタイル（ストライプ）
- 5. ボタン
- 6. 引用
- 7. 画面サイズ毎の改行指定
- 8. 検索ブロック
- 9. 見出しブロック
- 10. 装飾なし
- 10.1.1. 背景塗り 灰色
- 10.1.2. 二重線 上下線 黒
- 10.1.3. 二重線 下線 黒
- 10.1.4. 直線 上下線 黒
- 10.1.5. 直線 下線 黒
- 10.1.6. 点線 下線 黒
- 10.1.7. 左右線
- 10.1.8. 括弧 黒
- 11. リストブロック
- 12. グループブロック
- 13. 画像ブロック
- 14. 画面サイズによる非表示設定
- 15. 組み合わせ例
- 16. 目次
- 17. カード（フリー入力）
- 18. 投稿リスト
- 19. アイコンカードブロック
- 20. 子ページリスト
- 21. Outer
- 21.1. Outer ブロックは枠線要素も指定できます。
- 22. ステップ
- 23. タイムライン
- 24. グリッドカラム
- 25. アニメーション
見出し
テキストサンプルです。リンクカラーは 外観 > カスタマイズ > Lightning デザイン設定 から指定可能です。
見出し２
これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。
見出し３
これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。
見出し４
これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。
見出し５
これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。
見出し６
これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。
リスト
- リストです。
- リストです。
- 番号リストです。
- 番号リストです。
テーブル
スタイル（デフォルト）
| thead th | thead th |
|---|---|
| th テーブル項目 | td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容 |
| th テーブル項目 | td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容 |
スタイル（ストライプ）
| thead th | thead th |
|---|---|
| th テーブル項目 | td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容 |
| th テーブル項目 | td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容 |
ボタン
引用
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
引用元タイトル
画面サイズ毎の改行指定
画面サイズ毎の改行
xs サイズで改行されます。
画面サイズ毎の改行
sm サイズで改行されます。
画面サイズ毎の改行
md サイズで改行されます。
画面サイズ毎の改行
lg サイズで改行されます。
画面サイズ毎の改行
xl サイズで改行されます。
画面サイズ毎の改行
xxl サイズで改行されます。
検索ブロック
見出しブロック
装飾なし
背景塗り 灰色
二重線 上下線 黒
二重線 下線 黒
直線 上下線 黒
直線 下線 黒
点線 下線 黒
左右線
括弧 黒
リストブロック
- リストアイコン 矢印
- アイコンの色は変更可能です。
- リストアイコン 三角
- アイコンの色は変更可能です。
- リストアイコン チェック
- アイコンの色は変更可能です。
- リストアイコン チェック 四角
- アイコンの色は変更可能です。
- リストアイコン チェック 丸
- アイコンの色は変更可能です。
- リストアイコン 指
- アイコンの色は変更可能です。
- リストアイコン 鉛筆
- アイコンの色は変更可能です。
- リストアイコン 笑顔
- アイコンの色は変更可能です。
- リストアイコン 不満顔
- アイコンの色は変更可能です。
- リストアイコン 数字 丸
- アイコンの色は変更可能です。
- リストアイコン 数字 四角
- アイコンの色は変更可能です。
グループブロック
線の色、背景色は変更可能です。
※線の色は指定色にしか変更できません。
直線
直線
直線 上下
点線
Dashed
二重線
二重線
画像ブロック
画面サイズによる非表示設定
非表示
非表示（ 画面サイズ : Extra Small ）
非表示（ 画面サイズ : Small ）
非表示（ 画面サイズ : Medium ）
非表示（ 画面サイズ : Large ）
非表示（ 画面サイズ : Extra Large ）
組み合わせ例
見出しブロック
- リストブロックの項目
- リストブロックの項目
- リストブロックの項目
- リストブロックの項目
※以下は1カラムコンテンツで表示するためのサンプルですので、2カラムコンテンツで表示すると不自然に表示されます。
待望のスライダーブロック追加
スライダーブロックはインナーブロックになっているのでスライド内の要素は自由に配置可能です。
スライド内のレイアウトは自由自在
もちろん複数配置可能
スライダーブロックはトップページだけではなく複数のページ複数の箇所に設置可能です。
画面サイズに応じて背景画像と高さをそれぞれ指定できるようになっています。
プラグイン VK Block / VK Blocks Pro について詳細はこちらからご確認ください。
目次
カード（フリー入力）
投稿リスト
飲食店必見！コスト削減の新常識グリピカ工法
ホームページを開設しました
飲食店必見！コスト削減の新常識グリピカ工法
ホームページを開設しました
アイコンカードブロック
子ページリスト
Outer
※以下は1カラムコンテンツで表示するためのサンプルですので、2カラムコンテンツで表示すると不自然に表示されます。
機能は別途プラグイン（無料）で実装
昨今の有料WordPressテーマは非常に多くの機能を含んでいますが、それによってテーマファイルが複雑化してカスタマイズが難しいものが少なくありません。
また、テーマ固有の機能が多いと、将来的にテーマを切り替える時にも大きな障壁となります。テーマ固有のショートコードの利用も同様です。
Lightningでは機能面は多機能統合型プラグイン「VK All in One Expansion Unit」に分割し、テーマファイルのシンプルさを追求する事で、カスタマイズ性と機能性の両面を追求しています。
Call To Action として
Outer ブロックと PR Content ブロックの組み合わせで Call To Action としても利用できます。
再利用ブロックに登録して複数のページに配置する事ができます。
Outer ブロックは枠線要素も指定できます。
Outerブロックは背景色/枠の色も指定できるので（区切りを傾斜や波などで指定している場合は無効）、このように項目リストやアラートボックスなどとしても使用できます。
- 枠線の色
- 枠線の太さ
- 角丸の大きさ
- 枠線の種類（ 直線 / 点線 / 二重線など ）
ステップ
タイトル、本文などを入力
画像やテキストなどを入れることができます。
ステップ要素を追加
左上のアイコンの下に表示される縦のラインは、物事の順番を表現するのに最適ですが、最後の要素に到達したら非表示にすることもできます。
タイムライン
タイトルや本文などを入力
テキスト テキスト テキスト テキスト テキスト テキスト テキスト
タイムライン要素を追加
テキスト テキスト テキスト テキスト テキスト テキスト テキスト
丸アイコンの色を変更
グリッドカラム
画面サイズ毎に表示カラム数を指定する事ができます。
カラム
カラム
カラム
カラム
カラム
カラム
カラム
カラム
アニメーション
- アニメーションの速度：「非常に遅い 」「 遅い 」「 標準 」「速い」「非常に速い」から選べます
- アニメーションの距離：「短い」「標準」「長い」から選べます
