【使い方紹介】Lightning VK Blocks / VK Block Patterns

今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」で使える「VK Blocks」および「VK Block Patterns」の使い方を説明していきます。
 

無料テーマのLightningっていうテーマを使っているんですけど、VK Blocksの使い方を知りたくって・・

VK Blocksを利用すると、ホームページで多彩なデザイン・レイアウトを作ることができます。今回はVKBlocksの使い方を説明していきますね。

■Lightning オプションプラグイン VK Blocksのデモ(動画解説版)

(※)本記事は2022年5月に更新しています。記事執筆以降で、仕様変更や機能の追加や削除などがあったり、画面が異なっている場合などもあり得ますのでご了承ください。最新の正確な情報・利用ルールは公式サイトをご確認ください。

VK Blocks / VK Block Patternsをインストールする

まだVK Blocksをインストールしていない方は、はじめにVK Blocksをインストールしてください。

プラグイン＞新規追加を選択します。

 

VK Blocksを検索して今すぐインストールします。

 

VK Blocksを有効化します。

 

つぎに、VK Block Patternsをインストールしていきます。
先程と同様にプラグイン＞新規追加を選択します。

 

VK Block Patternsを検索して今すぐインストールします。

 

VK Blocksを有効化します。

 

以上で、VK BlocksとVK Block Patternsのインストール・有効化は完了です。

投稿や固定ページのブロックエディターで、VK Blocksやブロックパターンが利用できるようになりました。
 
■VK Blocks

 

■VK Block Patterns(よく使うブロックを組み合わせてまとめたパターン)

 

VK Blocksの主なブロック

ここでは、よく使うVK Blocksについていくつかご紹介します。
 

漫画のような吹き出しを作る VK Blocks「フキダシ」

VK Blocks「フキダシ」を利用すると、下記のような吹き出しを使った漫画のようなやりとりを簡単にページ上に作ることができます。

吹き出しブロックを利用すると、ブログ記事の中で以下のような会話の再現などを表現することができます。

なお吹き出しの設定項目では、画像や吹き出しの背景色や枠線の色を変えたり、吹き出しの位置や吹き出しのタイプを変更する事が可能です。

記事内に吹き出しを入れてあげると一気にブログが見やすくなるので、使用してあげると良いでしょう。

画像はアイコンに近いくらいの正方形の小さい画像がおすすめです。本例では300pxの正方形の画像を利用しています。

スタッフ紹介に役立つレイアウトを作る VK Blocks 「スタッフ」

VK Blocks「スタッフ」を利用すると、下記のようなスタッフ紹介に便利なレイアウトをページ上に作ることができます。

 

ブロックエディター 上で、VK Block＞スタッフを選択します。
<

スタッフブロックが挿入されるので、画像やテキストを入力します。

 

スタッフ情報が出来上がりました。右側のメニューから簡単なレイアウトの調整もできます。スタッフ紹介・お客様の声紹介などに役立つブロックです。

 
 

枠線ボックスブロック

枠線ボックスブロックを利用すると、補足やポイントなど目立たせたい場合に便利です。

こちらのブロックを使用すると、注目されやすい以下のようなボックスを作成する事ができます。

また設定項目では、枠線ボックスのスタイルの変更や色の変更、見出し箇所に付けたいアイコンの設定等を行うことが可能です。

枠線ボックスブロックの中には任意のブロックを追加する事ができるので、目立たせたい情報を入れるようにすると良いでしょう。
 

背景枠を作るVK Blocks 「アラート」

VK Blocks「アラート」を利用すると、下記のような背景枠を作ることができます。お知らせ・注意事項・警告などで目立たせる場合に便利です。

こちらのブロックは利用することで、以下のような注釈や注意などの4つのステータスがある色付きボックスを作成する事ができます。

ややこしい設定項目などが無くシンプルなブロックですが、ブログなどで役に立つブロックです。
 

ボタンを作るVK Blocks 「ボタン」

VK Blocks「ボタン」を利用すると、下記のようなボタンを作ることができます。

 

VK Blocks＞ボタンを選択します。

 

ボタンのブロックが挿入されるので、ボタンの文字とリンク先のURLを入力します。

 

右側のメニューからボタンのレイアウトや色・サブテキストなどが入力できます。

 
 

新FAQブロック

VK Blocks「新FAQブロックを利用すると、下記のようなQ＆Aを作ることができます。よくある質問を作る際に便利です。

こちらのブロックを使用すると、以下のようなFAQリストを作成することができます。

また「新FAQブロック」のスタイルは右側サイドバー「ブロック」タブから変更することが可能です。

Pro版(※)では、折りたたみ形式(アコーディオンメニュー)にすることもできます。

「旧FAQブロック」と「新FAQブロック」の違いは何ですか？

「新FAQブロック」では質問エリアにも自由なブロックを入力することができるように改良されています。その為、必要に応じて画像ブロックを挿入したりすることも可能です。

手順・流れを作るVK Blocks 「フロー」

VK Blocks「フロー」を利用すると、下記のような、手順・流れ(フロー)を作ることができます。

 

VK Blocks＞フローを選択します。

 

フローの雛形が挿入されるのでテキストや画像を入力していきます。複数フローブロックを挿入して作っていきます。

 

フローを何回か挿入して、手順などを作っていくことができます。末尾のフローは、下矢印を消すことができます。

 

画像と文章がセットのレイアウトVK Blocks 「PR Content」

VK Blocks「PR Content」を利用すると、下記のような、画像と文章・ボタンなどをセットにしたレイアウトを作ることができます。

 

VK Blocks＞PR Contentを選択します。

 

PR Contentが挿入されます。テキストや画像などを入力していきます。

 

画像やタイトル・テキストを入力しました。左側メニューからレイアウトやボタンの設定も可能です。

 

縦余白を作るVK Blocks レイアウト「レスポンシブスペーサー」

VK Blocks レイアウト「レスポンシブスペーサー」を利用すると、下記のようにブロック間の縦余白をデバイス(ブラウザ幅)ごとに設定することができます。

VK Blocks レイアウト＞レスポンシブスペーサーを選択します。

 

レスポンシブスペーサーが挿入されます。デバイス（ブラウザ幅)ごとに、「大・中・小・またはカスタムから」縦幅の余白を自由に設定することができます。

 
 

VK Block Patternsの概要

VK Block Patternsは、ブロックパターンといういくつかのよく使うブロックの組み合わせを登録したものです。VK Blocksに加えて、VK Block Patternsをインストール・有効化すると、独自のブロックパターンを利用できたり登録して利用することが可能になります。
 
■VK Block Patterns

 

VK Block Patternsにあらかじめて登録されているパターンを利用するには、ブロック追加時に「パターン」タブをクリックします。

 
WordPressデフォルトで備わっているパターンやVK Block Patternsにあるパターンなど、いくつかのパターンがあります。

 
ここでは会社案内を選択してみます。

 
会社案内のパターンをクリックすると、本文に会社案案内のパターンが挿入されました。画像やテキストを変更することで、一からレイアウトを作らなくても楽にページを作成することができるようになります。

VK Blocks Proの機能紹介

有料版のLightning G3 Pro(※)を導入すると「VK Blocks Pro」が利用できるようになります。

「VK Blocks Pro」は「Lightning G3 Pro Pack」に含まれているプラグインの1つで、インストール＆有効化する事で、では、「投稿一覧」や「タイムライン」、「ステップ」、「Outer」など無料では使えないブロック(VK Blocks Pro)を利用することができます。

以下がVK Blocksの無料版と有料版で使用できるカスタムブロックになります。

ステップ要素ブロック(Pro版のみ)

1つ目に紹介するブロックは、ステップ要素ブロックです。

こちらのブロックは下記のように手順などを示したい際に便利です。

上の例では3つのステップのみを表示していますが、より多くのステップを追加したい場合は、「ステップ要素」ブロックを選択した状態で「+(ステップを追加)」アイコンをクリックしてあげればOKです。

カードブロック(Pro版のみ)

2つ目に紹介するブロックは、カードブロックです。

「カード」を利用すると、以下のような画像・見出し・テキスト・リンクを含んだカード型のレイアウトを作成することができます。

また上の例では3カラムとなっていますが、「カードブロック」を選択した状態で右側サイドバーの「ブロック」タブを開くと、カードの表示タイプや画面サイズ毎のカラム数等の設定が可能です。
 

アニメーションブロック(Pro版のみ)

3つ目のブロックは、アニメーションブロックです。

このブロックを使用すると、スクロール時に要素にフェードインやスライドアップなどのアニメーションを加える事ができるようになります。

なお使い方は簡単で、アニメーションブロック内に動きを加えたい要素を追加し、その後「ブロック」タブから「アニメーションの効果(種類)」や「アニメーションの速度」、「アニメーションの距離」といった設定を行っていきます。

スクロール時にフェードインやスライドアップをさせるといった動きもカスタムブロックで実装できるんですね！

Outerブロック(Pro版のみ)

4つ目のブロックは、Outerブロックです。

こちらのブロックを利用すると以下のように全幅の背景画像や背景色などを設定することができます。

なお使い方は簡単で、追加したOuterブロックの中に任意のブロック(見出し・文章・画像etc)を入れることができます。「ブロック」タブから背景の設定や幅の設定、上下左右の余白の設定等を行っていきます。

スライダーブロック(Pro版のみ)

5つ目のブロックは、スライダーブロックです。

こちらのブロックを利用すると、様々な要素を配置できるスライダーを作成する事ができます。

また、スライダーのエフェクトはスライド以外にもフェードが選択できたり、表示時間や切り替え時間等も細かく設定が可能。

スライドを追加したい場合は、「スライダーブロック」を選択した状態で「スライダーアイテムを追加」をクリックする事で新しいスライドを追加する事ができます。

投稿リストブロック(Pro版のみ)

6つ目のブロックは、投稿リストブロックです。

投稿リスト機能は、投稿一覧の一部を任意のページに埋め込む機能です。下記のように任意の固定ページに投稿一覧の一部を表示することができます。

また投稿タイプ(投稿や固定ページやカスタム分類)やカテゴリー・カスタム分類、表示件数やデバイス幅毎に表示させたいカラム数などを細かく設定することが可能です。

 

■投稿リストの主要な設定項目

オプションプラグイン「VK All in one Expansion Unit」でカスタム投稿タイプを作り、投稿リストで商品一覧や人物一覧などを固定ページ内に表示させることができます。

さらに「表示条件」内にある「オフセット数」を1とすると、新着記事の頭から1つ目の記事を飛ばして投稿一覧を表示させるといった設定も可能なので、2つの投稿一覧ブロックを使って以下のようなレイアウトの投稿一覧を表示させることもできます。

目次ブロック(Pro版のみ)

7つ目のブロックは、目次ブロックです。

こちらのブロックは利用することで、記事の目次を表示することができます。

目次はユーザーの利便性を高める大切な要素ですので、ブログ運営をされる方は忘れずに使用されると良いでしょう。

まとめ VK Blocksを使って多彩なデザイン・レイアウトを作ろう

今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」で使える「VK Blocks」の使い方を説明しました。

また、さらに高機能・魅力的なホームページを作りたい場合、有料版の「Lightning G3 Pro(ライトニングG3プロ)」を利用することでさらにできることが広がります。

Lightning G3 Pro(ライトニングG3プロ)と無料版Lightningの違いについては「【Lightning G3 Pro】無料版の違いやデメリットを解説」でご紹介していますので使い方がわからない方は合わせてご覧ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。