このページではLightningテーマにおけるブロックエディタで使う主な各ブロックの使い方サンプルをまとめて掲載しています。
ぜひ、実際の見た目と編集画面での設定など見比べてみて下さい。

見出し

テキストサンプルです。リンクカラーは 外観 > カスタマイズ > Lightning デザイン設定 から指定可能です。

見出し2

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

見出し3

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

見出し4

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

見出し5

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

見出し6

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

リスト

  • リストです。
  • リストです。
  1. 番号リストです。
  2. 番号リストです。

テーブル

スタイル(デフォルト)

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カラムコンテンツで表示すると不自然に表示されます。

待望のスライダーブロック追加

スライダーブロックはインナーブロックになっているのでスライド内の要素は自由に配置可能です。

今まで出来なかったボタンの横並びも

WordPress標準のボタンブロックや、VK Blocks Proのグリッドカラムブロックを利用して
スライド内にボタンを複数配置する事ができます。

スライド内のレイアウトは自由自在

もちろん複数配置可能

スライダーブロックはトップページだけではなく複数のページ複数の箇所に設置可能です。

画面サイズに応じて背景画像と高さをそれぞれ指定できるようになっています。

画面サイズ毎の背景と高さ設定

高さ

画面サイズに応じてスライドの高さを指定できます。

速さ

スライドの切り替え速さを変更できます。

表示枚数

スライドの表示枚数は多くても指定可能です。

表示位置

スライド内のコンテンツが少ない場合も上下中央指定可能です

該当の固定ページはありません。

プラグイン VK Block / VK Blocks Pro について詳細はこちらからご確認ください。

目次

カード(フリー入力)

カードブロック

VK All in One Expansion Unit の 3PR ウィジェットのようなブロックです。

詳しくはこちら
カラム数が自由に!

3PRウィジェットは3列固定でしたが、このカードブロックは画面サイズに列数を制御する事ができます。

詳しくはこちら
順番入れ替えも簡単!

3PRウィジェットと違い、順番を簡単に入れ替え可能です。

詳しくはこちら
カードブロック

VK All in One Expansion Unit の 3PR ウィジェットのようなブロックです。

詳しくはこちら
カラム数が自由に!

3PRウィジェットは3列固定でしたが、このカードブロックは画面サイズに列数を制御する事ができます。

詳しくはこちら
順番入れ替えも簡単!

3PRウィジェットと違い、順番を簡単に入れ替え可能です。

詳しくはこちら
カードブロック

VK All in One Expansion Unit の 3PR ウィジェットのようなブロックです。

詳しくはこちら
カラム数が自由に!

3PRウィジェットは3列固定でしたが、このカードブロックは画面サイズに列数を制御する事ができます。

詳しくはこちら
順番入れ替えも簡単!

3PRウィジェットと違い、順番を簡単に入れ替え可能です。

詳しくはこちら

投稿リスト

節税・税金ニュース
自然災害に備えた「事業継続力強化計画」策定のメリット! 低金利融資・補助金や助成金優遇など多数あり!
補助金
令和6年に新設された両立支援等助成金(育休中等業務代替支援コース)!育児と仕事が両立できる環境作りを支援!
節税・税金ニュース
10月上旬に改定予定!最低賃金はいくらまで上がる?流れをおさえて要対策
節税・税金ニュース
経営者が押さえておくべき税制情報(2024年9月のまとめ)
節税・税金ニュース
2024年版「中小企業白書」が閣議決定! ポイントをチェックして世の中の動向を把握しましょう!
補助金
2024年10月から社会保険の適用拡大!キャリアアップ助成金(社会保険適用時処遇改善コース)で対策を!
2024年10月25日節税・税金ニュース

自然災害に備えた「事業継続力強化計画」策定のメリット! 低金利融資・補助金や助成金優遇など多数あり!

2024年10月18日補助金

令和6年に新設された両立支援等助成金(育休中等業務代替支援コース)!育児と仕事が両立できる環境作りを支援!

2024年10月11日節税・税金ニュース

10月上旬に改定予定!最低賃金はいくらまで上がる?流れをおさえて要対策

アイコンカードブロック

アイコンカード

アイコンカードブロックは PR Blocks の拡張版です。ブロックの数を増やしたりカラム数を自由に指定する事ができます。
ただし、PR Blocks と違って画像は指定できません。

アイコンカード

アイコンカードブロックは PR Blocks の拡張版です。ブロックの数を増やしたりカラム数を自由に指定する事ができます。
ただし、PR Blocks と違って画像は指定できません。

アイコンカード

アイコンカードブロックは PR Blocks の拡張版です。ブロックの数を増やしたりカラム数を自由に指定する事ができます。
ただし、PR Blocks と違って画像は指定できません。

アイコンカード

アイコンカードブロックは PR Blocks の拡張版です。ブロックの数を増やしたりカラム数を自由に指定する事ができます。
ただし、PR Blocks と違って画像は指定できません。

子ページリスト

該当の固定ページはありません。

Outer

※以下は1カラムコンテンツで表示するためのサンプルですので、2カラムコンテンツで表示すると不自然に表示されます。

画像をアップロード

機能は別途プラグイン(無料)で実装

昨今の有料WordPressテーマは非常に多くの機能を含んでいますが、それによってテーマファイルが複雑化してカスタマイズが難しいものが少なくありません。
また、テーマ固有の機能が多いと、将来的にテーマを切り替える時にも大きな障壁となります。テーマ固有のショートコードの利用も同様です。
Lightningでは機能面は多機能統合型プラグイン「VK All in One Expansion Unit」に分割し、テーマファイルのシンプルさを追求する事で、カスタマイズ性と機能性の両面を追求しています。

画像をアップロード

Call To Action として

Outer ブロックと PR Content ブロックの組み合わせで Call To Action としても利用できます。
再利用ブロックに登録して複数のページに配置する事ができます。

Outer ブロックは枠線要素も指定できます。

Outerブロックは背景色/枠の色も指定できるので(区切りを傾斜や波などで指定している場合は無効)、このように項目リストやアラートボックスなどとしても使用できます。

  • 枠線の色
  • 枠線の太さ
  • 角丸の大きさ
  • 枠線の種類( 直線 / 点線 / 二重線など )

ステップ

タイトル、本文などを入力

画像やテキストなどを入れることができます。

STEP
1

ステップ要素を追加

左上のアイコンの下に表示される縦のラインは、物事の順番を表現するのに最適ですが、最後の要素に到達したら非表示にすることもできます。

STEP
2

タイムライン

6:00AM

タイトルや本文などを入力

テキスト テキスト テキスト テキスト テキスト テキスト テキスト

7:00AM

タイムライン要素を追加

テキスト テキスト テキスト テキスト テキスト テキスト テキスト

8:00AM

丸アイコンの色を変更

グリッドカラム

画面サイズ毎に表示カラム数を指定する事ができます。

カラム

カラム

カラム

カラム

カラム

カラム

カラム

カラム

アニメーション

  • アニメーションの速度:「非常に遅い 」「 遅い 」「 標準 」「速い」「非常に速い」から選べます
  • アニメーションの距離:「短い」「標準」「長い」から選べます

フェードイン

スライドアップ

スライド左

スライド右

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事

コメント

この記事へのコメントはありません。

TOP
PAGE TOP