【WordPressテーマLighting】 VK Blocksの使い方を徹底解説

WordPress

WordPressテーマ Lightning【VK Blocks】の使い方

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

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

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

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

次章の見方について

ホームページ Unavaiable(※)本記事は2020年4月時点のVK Blocksの内容です。

また、記事執筆以降で、仕様変更や機能の追加や削除などがあったり、画面が異なっている場合などもあり得ますのでご了承ください。

最新の正確な情報・利用ルールは公式サイトをご確認ください。

 
 

VK EXUnitをインストールする

はじめに、VK Blocksを利用するためにVK All in one Expansion Unit(以下、VK EX Unit)をインストールしてください。
 

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

VK All in One Expansion Unitを今すぐインストール&有効化します。
VK All in One Expansion Unit
 

インストール後はダッシュボード上部に「EXUnit」という項目が追加されていればOKです。

 

ここでは割愛しますが、EX Unitのついての詳細は「【徹底解説】WordPressテーマLightningの使い方【VK All in one Expansion Unitも解説】」をご参照ください。
 

上記の方法の他に、プラグイン>新規追加より、「VK Blocks」をインストール・有効化して利用することもできます。

 

様々なブロックを提供「VK Blocks / VK Blocks レイアウト」

VK Blocks および VK Blocksレイアウトは、ブロックエディターで利用できるLighting用のブロックです。
 

■VK Blocks
VK Blocks
 

■VK Blocks レイアウト
VK Blocks レイアウト
 

合わせて読みたい記事

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

 
 

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

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

ブロックエディター 上で、VK Block>フキダシを選択します。
VK Blocks フキダシ
 

フキダシが挿入されるので、画像やテキストを入力します。
VK Blocks フキダシ 設定。画像や文字を入力。
 

右側のメニューから背景色や位置も設定できます。なお、画像はアイコンに近いくらいの正方形の小さい画像がおすすめで、本例では300pxの正方形の画像を利用しています。
VK Blocks フキダシ 設定。背景色や位置が設定可能
 
 

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

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

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

スタッフが挿入されるので、画像やテキストを入力します。
VK Blocks スタッフの設定
 

右側のメニューから簡単なレイアウトの調整もできます。スタッフ紹介・お客様の声紹介などに役立つブロックです。
VK Blocks スタッフの設定。
 
 

見出しと文章がセットになったVK Blocks 「見出し」

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

ブロックエディター 上で、VK Block>見出しを選択します。
VK Blocks 見出し
 

見出しブロックが挿入されるので、見出しとサブテキストを入力します。
VK Blocks 見出しのブロックが挿入された
 

右側のメニューから、余白や文字の大きさなどのレイアウトが調整できます。
VK Blocks 見出し 右側のメニューで余白や文字の大きさなどのレイアウトが調整できる
 

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

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

VK Blocks>アラートを選択します。
VK Blocks > アラート
 

背景色のついたブロックが挿入されるのでテキスト文などを自由に入れます。いくつからの色パターンから選択可能です。
VK BLocks Alertの設定。いくつからの色パターンから選択可能
 

■VK Blocks アラートの設定例


 
 

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

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

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

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

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

Q&Aに使える VK Blocks 「質問と回答」

VK Blocks「質問と回答」を利用すると、下記のようなQ&Aを作ることができます。よくある質問を作る際に便利です。
VK Blocks 質問と回答 表示例
 

VK Blocks>質問と回答を選択します。
VK Blocks 質問と回答
 

Q&Aの雛形が挿入されるので質問と回答を入力していきます。
VK Blocks 質問と回答 ブロックが挿入された
 

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

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

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

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

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

■フローの設定例


 
 

3つの丸抜き画像とテキスト VK Blocks 「PR Blocks」

VK Blocks「PR Blocks」を利用すると、下記のような、3つのアイコン・テキストを横並びにすることができます。
VK Blocks > PR Blocksの表示例
 

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

PR Blockが挿入されます。テキストや画像などを入力していきます。画像は右側のメニューから設定可能です。
VK Blocks > PR Blocksが挿入された。画像は右側のメニューから設定可能
 

3つの画像や見出し・文章をそれぞれ入力。
VK Blocks > PR Blocksの設定例。画像や見出し・文章を入力
 

■PR 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 > PR Contentの設定例。左側メニューからレイアウトやボタンの設定などができる
 


 

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

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


 

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

レスポンシブスペーサーが挿入されます。デバイス(ブラウザ幅)ごとに、縦幅の余白を自由に設定することができます。
VK Blocks レイアウト レスポンシブスペーサー が挿入された。
 
 

VK Blocks Proの機能紹介

有料版のLightning Proでは、「投稿一覧」や「タイムライン」、「ステップ」、「Outer」など無料では使えないブロック(VK Blocks Pro)を利用することができます。
 

有料版で利用できるVK Blocksの機能

  • 【VK Blocks】投稿リスト
  • 【VK Blocks】子ページリスト
  • 【VK Blocks】カード
  • 【VK Blocks】タイムライン
  • 【VK Blocks】ステップ
  • 【VK Blocks】目次
  • 【VK Blocksレイアウト】Outer
  •  

    LightningとLightnintProの主な機能の違いとしては下記の通りです。

    機能LightningLightning Pro備考
    VK Blocksブロックエディター利用時に利用できるLightning用ブロック。Proは無料版以上の機能が提供されている。詳細は以下の通り
    スタッフ。スタッフ紹介をする際に便利なレイアウトのブロック。
    ふき出し。漫画のような吹き出しを作るブロック。
    見出し用のブロック。
    アラート。警告や注意・お知らせなどに利用できる背景枠のあるブロック。
    ボタン。ボタンに利用できるブロック。
    質問と回答。Q&Aなどに利用できるブロック。
    フロー。手順などをフローを示す際に使えるブロック。
    PR Blocks。三つの丸アイコン(写真)と文言をセットで表示できるブロック。
    PR Content。写真と画像を横並びに表示できるブロック。
    ×【Pro機能】投稿リスト機能。投稿・カスタム投稿を好きなデザインで一覧表示することができるブロック。
    ×【Pro機能】カード。カードのようなレイアウトを利用できるブロック。
    ×【Pro機能】子ページリスト。固定ページの子ページを一覧表示することができるブロック。
    ×【Pro機能】目次。見出しから目次を自動生成・表示することができるブロック。
    ×【Pro機能】ステップ。手順のようなステップ表示する際に便利なブロック。
    ×【Pro機能】タイムライン。沿革などのような表示する際に便利なブロック。
    VK Blocks レイアウトブロックエディター利用時に利用できるLightning用ブロック。Proは無料版以上の機能が提供されている。詳細は以下の通り
    レスポンシブスペーサー。ブラウザサイズに合わせた高さ(余白)を設定するブロック
    ×【Pro機能】Outer。全幅を設定するブロック

    (※注)2020年4月時点で確認した内容です。
     
    追加機能の更新や仕様変更などのケースもありますので最新の正確な情報はLighting Pro(ライトニング プロ)よりご確認ください。
     

     

    ここでは、有料版でしか使えないVK Blocks機能のいくつかをご紹介していきます。
     

    VK Blocks Pro「投稿リスト機能」

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

    カスタム投稿タイプでも利用できるので、付属の無料オプションプラグイン「VK All in one Expansion Unit」でカスタム投稿タイプを作り、カスタム投稿を投稿リストで表示させることで、商品一覧や人物一覧などを固定ページないに埋め込むという使い方もできます。
     

    VK Block> 投稿リストを選択することで利用できます。
    VK Blocks Pro> 投稿リスト
     

    投稿リストが適用されます。投稿のほか、カスタム投稿も利用できます。また、カテゴリやカスタム分類で一覧表示する対象を絞り込むこともできます。
    VK Blocks Pro> 投稿リストが適用された
     

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

    • 表示条件:表示する投稿タイプ(投稿やカスタム投稿、固定ページなど)および、カテゴリー・カスタム分類、表示件数などを選択できます。
    • 表示タイプとカラム:レイアウトのパターンを1つ選択します。ブラウザサイズに応じてカラム(横並びの列数)の変更も可能です。
    • 表示要素:一覧で表示したい表示項目(画像・カテゴリー・抜粋・日付など)を設定します。
    • 表示させたい投稿タイプのスラッグ:通常(投稿)の場合はそのまま(post)でOK。カスタム投稿タイプの場合は投稿タイプIDを入力します。
    • 非表示:ブラウザサイズに応じて非表示にしたい場合に利用します(使うシーンは稀です)

     


     

    VK Blocks Pro「カード」

    「カード」を利用すると、カードと言われる下記のレイアウトをページないに埋め込み・表示させることができます。
    VK Blocks Pro カードの表示
     

    VK Block > カードを選択することで利用できます。
    VK Blocks Pro >カード
     

    カードが編集画面に表示されます。
    VK Blocks Pro >カードの設定
     

    下記のような画像や文言などを追加することができます。
    VK Blocks Pro >カードの設定
     


     

    VK Blocks Pro「タイムライン」

    VK Blocks Pro「タイムライン」は、下記のようなタイムライン表示をするブロックです。年表や歴史・推移などを示す際に便利です。
    VK Block タイムラインの表示例
     

    VK Blocks> タイムラインを選択することで利用できます。
    VK Block>タイムライン
     

    タイムラインが編集画面に表示されます。
    VK Block タイムラインの設定
     

    タイムラインを作成することができます。
    VK Block タイムラインの設定
     
     

    VK Blocks Pro「ステップ」

    VK Blocks Pro「ステップ」は、下記のようなステップを表示をするブロックです。手順などを示す際に便利です。
    VK Blocks Pro ステップの表示例
     

    VK Blocks > ステップを選択することで利用できます。
    VK Blocks Pro ステップ
     

    ステップが編集画面に表示されます。
    VK Blocks Pro ステップの設定
     

    ステップを作成することができます。
    VK Blocks Pro ステップの設定
     

    VK Blocks Pro「子ページリスト」

    VK Blocks Pro「子ページリスト」は、固定ページで親子関係を設定した「子ページ」の一覧を挿入するブロックです。
    VK Block Pro> 子ページリストが表示された
     

    VK Blocks > 子ページリストを選択することで利用できます。
    VK Block Pro >子ページリスト
     

    子ページの一覧が編集画面に表示されます。初期値は今編集している固定ページの子に属する一覧が表示されます。右側のメニューから設定変更することができます。
    VK Block Pro >子ページリストの設定
     
     

    VK Blocks レイアウト 「Outer」

    VK Blocks レイアウト「Outer(アウター)」を利用すると、下記のように全幅の背景・背景色を設定することができます。
    VK Block レイアウト Outerを利用。コンテンツの外側に背景色や背景画像を設定できる
     

    VK Blocks レイアウト > Outerを選択することで利用できます。
    VK Block レイアウト Outer(アウター)
     

    Outerが挿入されます。
    VK Block レイアウト Outerが挿入された
     

    Outerの中に任意のブロック(見出し・文章・画像etc)を入れることができます。
    VK Block レイアウト Outerに任意のブロックを入れる
     

    Outerの 設定。背景色・背景・全幅・コンテンツ幅などの細かい設定ができます。
    VK Block レイアウト Outerの 設定。背景色・背景・全幅・コンテンツ幅などの細かい設定ができる
     
     

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

    喜んでいる女の子
     

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

    使い方の詳細や最新情報は公式サイト「VK All in One Expansion Unit - WordPressでのサイト構築が飛躍的に楽になる多機能統合型プラグイン」に掲載されていますので下記を参照しながら、設定にチャレンジしてみてください。
     

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

    Lightning Proの使い方を説明した記事を「人気のWordPressテーマLightning Proの使い方を徹底解説」でご紹介していますので使い方がわからない方は合わせてご覧ください。

    【徹底解説】WordPressテーマLightning Proの使い方


     

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

     


    弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

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

    詳細はこちら


     

    検索して記事を見つけたい方はこちら

    検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

    おすすめ記事3選

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

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

    【WordPressホームページの作り方総まとめ 12STEPで解説】

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

    【2020年版WordPress(ワードプレス)の使い方総まとめ】

    今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

    -WordPress
    -, , , , ,

    Copyright© WEBST8のブログ , 2020 All Rights Reserved Powered by AFFINGER5.