WordPressテーマ「Lightning有料版」を購入すると、ブロックエディター拡張プラグイン「VK Blocks Pro」がセットで付いてきます。
今回はこのプラグインの秀逸なブロックをご紹介。
種類が多いので、代表的なブロックのみ数回に分けて解説します。
また、解説用も兼ねてデモページも作っています。
ちなみに、同じベクトル社の有料テーマ「Katawara」でも、「VK Blocks Pro」は無料で付いてきます。
単体売りはしていないプラグイン
「VK Blocks Pro」は単体売りはしてません。
あくまでも「Lightning有料版」や「Katawara」とセットのみの販売です。
このプラグインで使えるブロックには以下のものがあります。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206d.png)
右上に「Pro」と記載されたブロックが「VK Blocks Pro」によるもの。
それ以外は無料版の「VK Blocks」でも使えます。
では、個別に解説していきましょう。
目次ブロック
目次はプラグイン「Table of Contents Plus」で入れる人も多いと思います。
ですが、「VK Blocks Pro」にもしっかり目次専用のブロックが付いてます。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206q.png)
ブロックを入れると、ページ内の見出し(h要素)を自動的に識別して表示してくれます。
画面右側のブロック設定欄
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206r.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206z5.png)
デモページでの表示はこちら。
目次ブロックはプラグイン「Table of Contents Plus」のものと比べると、シンプルな感じです。
ステップブロック
手順の流れ説明などでよく使います。
他の有料テーマでもよく見かるタイプのブロックです。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206e.png)
ブロックの初期状態
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206f.png)
画面右側のブロック設定欄
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206g.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206i.png)
デモページでの表示はこちら。
タイムラインブロック
ステップと性質が似てますが、こちらは時間経過のパターン。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206h.png)
ブロックの初期状態
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206j.png)
画面右側のブロック設定欄
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206k.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206l.png)
デモページでの表示はこちら。
カードブロック
カード型のレイアウトに、カラムごとに画像・見出し・文章・リンクURLが配置できるブロックです。
「VK Blocks Pro」のブロックの中で、個人的に一番好きです。
これと「Outerブロック(その2で解説)」は使い勝手が良くて重宝します。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206m.png)
ブロックの初期状態
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206n.png)
画面右側のブロック設定欄
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206o.png)
メッチャ長いです。
詳細な設定が可能です。
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206p.png)
デモページでの表示はこちら。
画像箇所のCSSは、
background-size: cover;
background-position: center 50%;
になっています。
横並びボタンブロック
ボタンを横に並べてくれます。
他のテーマでは見たことが無いです。
有りそうで無い稀少ブロックで、けっこう重宝します。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206s.png)
ブロックの初期状態
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206t.png)
画面右側のブロック設定欄
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206u.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206v.png)
デモページでの表示はこちら。
横並びに何個でもボタンを追加できます。
他テーマだと「カラム」ブロック使って横並びにするしかないのですが、「VK Blocks Pro」だと楽勝で良いです(^^)v
投稿リストブロック
投稿やカスタム投稿のページを一覧表示します。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206w.png)
画面右側のブロック設定欄
これも設定がメチャクチャ細かいです。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206x.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206y.png)
デモページでの表示はこちら。
WordPress固有の「最新の投稿ブロック」に比べると、明らかにこちらのほうが柔軟で使いやすいです。
- カード型での表示が可能
- カスタム投稿も表示可能
- カテゴリーも表示
選択投稿リストブロック
これ、前記の「投稿リストブロック」と名前が似通ってますが、サイト内の任意のページを投稿リストのように表示させるブロックです。
固定ページや投稿・カスタム投稿の、任意の個別ページを表示させます。
あくまでもサイト内のページのみで外部ページは選択不可です。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206z.png)
ブロックの初期状態
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206z2.png)
画面右側のブロック設定欄
これの設定もけっこう長いです。
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206z3.png)
実際の表示
こんな感じで表示されます↓
![](https://souken-blog.com/wp-content/uploads/2023/02/sblog20230206z4.png)
デモページでの表示はこちら。
![](https://souken-blog.com/wp-content/uploads/2022/09/sblog-prf005.png)
私も最近は同テーマを使う制作案件が多いです。
![](https://souken-blog.com/wp-content/uploads/2023/01/99999.png)
君のブログはLightning関連の記事は多いし、仕事でもLightningで儲けてるわけで、もう名古屋方面に足向けて寝れないだろ?
![](https://souken-blog.com/wp-content/uploads/2022/09/sblog-prf005.png)
・・・おっしゃるとおりです(^_^;)
Lightning有料版はコーポレート型テーマの中では人気なだけあって、ブロックが充実してるな。