WordPress

便利な無料プラグイン「VK Blocks」機能紹介&導入方法 | WordPressおすすめ

WordPressブロックエディタ(Gutenberg)を難しいコードは使わずに簡単にカスタマイズする方法として、無料プラグインVK Blocksで機能を拡張してもっと使いやすくできます。導入自体はとってもカンタンです。

今回は「VK Blocks」がどんな便利な機能があるのかまとめてみました。各項目から使い方もリンクしていますので、まだこのプラグインを知らないという方はぜひチェックしてみてください!

プラグインのインストール方法も画像を使ってわかりやすく解説していきます。

VK Blocksとは?

WordPressのブロックエディタ(Gutenberg)の標準機能を拡張してくれたり、便利なブロックアイテムを追加してくれるプラグインです。どんなテーマを使っていてもOK、難しいコードは必要なく簡単にレイアウトやデザインをカスタマイズできます!

Cinna

難しい操作はありません!すっごく簡単♪

VK Blocksを使った「記事を読みやすくする方法」も公開しているので、こちらの記事も合わせて活用してみてください▼

【WordPress】"吹き出し"も簡単!『VK Blocks』5つのテンプレ使い方WordPressブロックエディタで難しいコードは使わずに簡単に記事を見やすくするための方法STEP2です。今回は簡単で便利な「テンプレブロック」編です。無料プラグインVK Blocksを使うと吹き出しや紹介カードなど便利なテンプレブロックが追加されます!テンプレブロックの設定方法を図解を使って解説していきます。...

それでは、スタートです!

VK Blocksをインストールする方法

まずはインストール方法を解説します。機能まとめを見たい方はもくじで後半にジャンプしてくださいね。

ここから解説の中で使っている画像(図解)はクリックで拡大できます!

プラグイン新規追加メニューへ移動

  1. 左側メニューからプラグインをクリック
  2. 「新規追加」をクリック(②のどちらでもOK)

VK Blocksをインストールして有効化する

インストール手順
  1. 検索ボックスに「VK Blocks」と入力
  2. 「今すぐインストール」をクリック
  3. 「有効化」をクリック

Cinna

とっても簡単ですね!

吹き出しの画像設定をしておく

吹き出し用のキャラクター画像と名前をあらかじめ設定しておくと、記事に挿入するときに簡単に追加することができるので便利です!よく使うキャラクターはここで設定しておきましょう。

VK Blocksの設定画面へ移動

  1. 左側メニューの「設定」にカーソルを合わすと詳細メニュー一覧が表示される
  2. VK Blocksをクリック

吹き出し用の画像と名前を設定

  1. 「選択」をクリックして画像をアップロードもしくは選択
  2. キャラクター名を入力
  3. 「変更を保存」をクリック

VK Blocksでどんなことができるのか紹介!

WordPress 標準ブロックの拡張機能

WordPress標準ブロックの機能をさらに便利に拡張してくれます☻

1. 蛍光マーカー

標準ブロックに蛍光マーカーを簡単に引けるように設定画面が追加されます。段落ブロックや見出しブロックを編集しているときに気軽に使えるのが便利!

\蛍光マーカー基本12色+カスタムカラーも設定できる/

蛍光マーカー  蛍光マーカー
蛍光マーカー  蛍光マーカー
蛍光マーカー  蛍光マーカー
蛍光マーカー  蛍光マーカー
蛍光マーカー  蛍光マーカー
蛍光マーカー  蛍光マーカー

>>蛍光マーカーの使い方を見る

2. 見出しブロック

スタイルを「標準」にした場合はテーマのデザインが適用されます。そして拡張機能として追加で下記のデザインを選択することも可能です!デザインの幅が広がって便利♪

\8種類のデザインが追加される!/

>>見出しの使い方を見る

3. リストブロック

リストブロックは通常は箇条書きで使う「・」か数字を選ぶことができますが、拡張機能で可愛いアイコンが11種類選べるようになります!

\11種類のアイコンが追加される!/

アイコンの色も変更することができます♪

>>リストの使い方を見る

4. 画像ブロック

画像も簡単におしゃれに見せることができます!フォトフレームや流体シェイプは便利です。

\10種類のデザインが追加される!/

>>画像使い方を見る

5. グループボックス

ブロックをグループに変換するだけで簡単にボックスが作れます!

\11種類のスタイル!線や背景色も変更できる/

直線

直線 角丸

点線

Dashed

二重線

ステッチ

シャドウ

info

Success

Warning

Danger

>>グループボックス使い方を見る

6. 画面サイズ毎の改行指定

デバイスのサイズごとに「改行」を入れるかどうかを指定できます。例えば、デスクトップPCで見ているときは改行を入れたいけど、スマホで見ているときは改行を入れたくないというときに使い分けができて便利です。

>>画面サイズ毎の改行指定の使い方を見る

7. 画面サイズによる非表示設定

デバイスのサイズごとに非表示にするブロックを指定できます。例えばこのブロックはスマホでは表示するけどタブレットサイズでは表示しないなどです。

>>画面サイズによる非表示設定の使い方を見る

8. テキストの改行禁止指定

表(テーブル)などを挿入したときに、スマホの幅だと改行されてしまい、パソコンで表示するときと違ってしまうときがあります。その自動改行をしない指示をここで追加できます。

>>テキストの改行禁止指定の使い方を見る

9. 検索ボックス

公式サイトでは検索ボックスが拡張機能の1つとして掲載されているのですが、どこが拡張されている部分なのか私には見つけれませんでした、、、基本的には標準と同じようです。

Cinna

知っている方がいたら教えてほしいです!

VK Blocks 追加ブロック

難しいコードは不要で簡単に設定配置できるブロックが追加できます!

1. PR Block

\アイコンや写真を使った3カラムのPRボックス/

>>PR Blocksの使い方を見る

2. 吹き出し

\吹き出しブロックがとっても簡単に作れます/

Cinna

背景や文字の色も変えれるし、

Cinna

右側にしたり、画像を丸や四角の枠で囲んだり

Cinna

もくもくの形にして、枠線を消したり

Cinna

ゆらゆらだってできる!目も回る〜

>>吹き出しの使い方を見る

3. スタッフブロック

\テンプレにはめるだけ!簡単プロフィール作成/

>>スタッフの使い方を見る

4. フロー

行程を簡単に作れます!
料理の作り方とか、作業行程とか便利。
テンプレにあてはめるだけ!
画像も載せて見やすくできる。

>>フローの使い方を見る

5. FAQ

Q&Aを作るのは難しいですか?

いいえ、とっても簡単です!

\7種類のデザインから選べる!/

>>FAQの使い方を見る

6. 見出し

見出しの前後にアイコン

サブテキストをここに追加できる!

標準見出しと違うところは、アイコンを簡単に配置できることとサブテキストを追加できるところです。デザインはテーマによって変わります。

>>見出しの使い方を見る

7. ボタン

使い方記事を後日公開予定!

8. 枠線ボックス

\枠や背景の色も変更できる!/

>>枠線ボックスの使い方を見る

9. アラート

\注意書きやお知らせに便利!/

>>アラートの使い方を見る

10. レスポンシブスペーサー

空白の隙間ブロックです。簡単にレスポンシブ設定ができ、スマホ・タブレット・PCでの幅を個別に設定を変えることができるのでとっても便利です!

>>レスポンシブスペーサーの使い方を見る

Cinna

いかがでしたか?便利なブロックやデザインが無料で使えるのでぜひ活用してください!

VK Blocks Pro(有料版)ならさらに追加ブロックが増えます♪

▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ

Vektor WordPress Solutions

▲上に戻ってインストール方法をもう一度見る

▼VK Blocksを使った「記事を見やすくする方法」もぜひご活用ください!

【WordPress】『段落・蛍光マーカー・見出し・リスト』ブロック使い方WordPressブロックエディタで難しいコードは使わずに簡単に記事を見やすくするための方法STEP1です。今回は基本の文字の装飾「段落・蛍光マーカー・見出し・リスト」の使い方です。...

▼MeBeはConoHa WINGレンタルサーバーを使用しています😇

ABOUT ME
Cinna
Cinna
8年間働いた会社を辞めて2年間のwebデザイン長期職業訓練[長期高度人材育成コース]へ 2019年入学▶︎2021年終了 訓練終了後フリーランス 退職後にこれまでの生活を見直し、敏感肌、アレルギー体質を改善するため、肌断食と食事と運動による身体メンテナンスを自分の身体で実験中。体験談をレビュー。