WordPress【使い方紹介】VK Blocks VK Block Patterns

WordPressプラグイン

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

2020年4月18日

今回は、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 Blocksを有効化します。
VK Blocks 有効化
 

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

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

VK Blocksを有効化します。
VK Block Patternsを有効化
 

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

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

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

合わせて読みたい記事

ここでは割愛しますが、ブロックエディターの使い方を詳しく知りたい方は「【2022年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

 
 

VK Blocksの主なブロック

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

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

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

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

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

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

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

 

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

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

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

 

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

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

枠線ボックスブロック

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

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

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

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

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

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

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

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

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

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

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

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

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

新FAQブロック

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

新FAQブロック

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

PR Contentが挿入されます。テキストや画像などを入力していきます。
VK Blocks > PR Contentが挿入された。画像やタイトル・文章を入力する
 

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


 

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

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


 

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

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

VK Block Patternsの概要

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

VK Blocks Proで使用できるカスタムブロック一覧

■VK Blocks Proでのみ使用できるカスタムブロック

  • アコーディオンブロック(Pro版のみ)
  • アニメーションブロック(Pro版のみ)
  • パンクズリストブロック(Pro版のみ)
  • 横並ぶボタンブロック(Pro版のみ)
  • カードブロック(Pro版のみ)
  • 子ページリストブロック(Pro版のみ)
  • アイコンカードブロック(Pro版のみ)
  • 投稿リストブロック(Pro版のみ)
  • 選択投稿リストブロック(Pro版のみ)
  • ステップ要素ブロック(Pro版のみ)
  • 目次ブロック(Pro版のみ)
  • タイムラインブロック(Pro版のみ)
  • グリッドカラムブロック(Pro版のみ)
  • グリッドカラムカードブロック(Pro版のみ)
  • Outerブロック(Pro版のみ)
  • スライダーブロック(Pro版のみ)

 

(補足)Lightning G3 Proについて

「Lightning G3 Pro Pack」は、無料の人気テーマ「Lightning」に追加する有料のオプションプラグインパックです。

Lightning G3 Pro Packに含まれるもの

Lightning G3 Pro Pack」に含まれるもの

  • Lightning G3 Pro Unitプラグイン
  • VK Blocks Proプラグイン
  • Lightning Proテーマ(旧製品※基本利用しない)

Lightning G3 Proについては下記記事をあわせてご参考ください
【Lightning G3 Pro】無料版の違いやデメリットを解説
【Lightning G3 Pro Unit】有料版のLightningの使い方

 

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

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

ステップ要素ブロック

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

ステップ要素ブロックの使用デモ

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

「ステップを追加」をクリックすることで新しいステップを追加する事が可能

 

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

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

カードブロック

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

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

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

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

アニメーションブロック

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

アニメーションブロックのスライドアップ使用デモ

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

アニメーションブロックの設定デモ

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

 

Outerブロック(Pro版のみ)

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

Outerブロック

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

アウターブロックの使用デモ

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

 

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

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

スライダーブロック

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

 

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

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

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

「スライダーアイテムを追加」をクリックする事で新しいスライドを追加する事が可能
 

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

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

投稿リストブロック

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

投稿リストブロックの使用デモ
 

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

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

  • 表示条件:表示する投稿タイプ(投稿やカスタム投稿、固定ページなど)および、カテゴリー・カスタム分類、表示件数などを選択できます。
  • 表示タイプとカラム:レイアウトのパターンを1つ選択します。ブラウザサイズに応じてカラム(横並びの列数)の変更も可能です。
  • 表示要素:一覧で表示したい表示項目(画像・カテゴリー・抜粋・日付など)を設定します。

 

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

 
(※)【カスタム投稿タイプとは】WordPressカスタム投稿の作り方
 

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

オフセット数を2と設定している為、最新記事の頭から2つの記事を飛ばして投稿一覧を表示する

2つの投稿リストブロックを使って作成できるレイアウト

 

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

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

目次ブロック

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

目次ブロックの使用デモ

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

 

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

VK Blocks
 

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

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

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

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

(関連記事)WordPressでホームページ・ブログを始める方法

下記の記事にWordPressでホームページ・ブログを始める方法をご紹介していますので、WordPressでサイト開設したい方は合わせてご参考ください。

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社
【総まとめ】WordPress(ワードプレス)ホームページ作り方
【WordPressの始め方総まとめ】ワードプレスブログの作り方
【総まとめ版】WordPress(ワードプレス)の使い方
タイプ別WordPressおすすめ有料テーマ8選をご紹介

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

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

詳細はこちら

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

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

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


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPressプラグイン
-, ,