WordPressブロックエディタ(Gutenberg)を難しいコードは使わずに簡単にカスタマイズする方法として、無料プラグインVK Blocksで機能を拡張してもっと使いやすくできます。導入自体はとってもカンタンです。
今回は「VK Blocks」がどんな便利な機能があるのかまとめてみました。各項目から使い方もリンクしていますので、まだこのプラグインを知らないという方はぜひチェックしてみてください!
プラグインのインストール方法も画像を使ってわかりやすく解説していきます。
難しい操作はありません!すっごく簡単♪
VK Blocksを使った「記事を読みやすくする方法」も公開しているので、こちらの記事も合わせて活用してみてください▼
それでは、スタートです!
VK Blocksをインストールする方法
まずはインストール方法を解説します。機能まとめを見たい方はもくじで後半にジャンプしてくださいね。
プラグイン新規追加メニューへ移動
- 左側メニューからプラグインをクリック
- 「新規追加」をクリック(②のどちらでもOK)
VK Blocksをインストールして有効化する
インストール手順
- 検索ボックスに「VK Blocks」と入力
- 「今すぐインストール」をクリック
- 「有効化」をクリック
▼
▼
とっても簡単ですね!
吹き出しの画像設定をしておく
吹き出し用のキャラクター画像と名前をあらかじめ設定しておくと、記事に挿入するときに簡単に追加することができるので便利です!よく使うキャラクターはここで設定しておきましょう。
VK Blocksの設定画面へ移動
- 左側メニューの「設定」にカーソルを合わすと詳細メニュー一覧が表示される
- VK Blocksをクリック
吹き出し用の画像と名前を設定
- 「選択」をクリックして画像をアップロードもしくは選択
- キャラクター名を入力
- 「変更を保存」をクリック
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つとして掲載されているのですが、どこが拡張されている部分なのか私には見つけれませんでした、、、基本的には標準と同じようです。
知っている方がいたら教えてほしいです!
VK Blocks 追加ブロック
難しいコードは不要で簡単に設定配置できるブロックが追加できます!
1. PR Block
\アイコンや写真を使った3カラムのPRボックス/
2. 吹き出し
\吹き出しブロックがとっても簡単に作れます/
背景や文字の色も変えれるし、
右側にしたり、画像を丸や四角の枠で囲んだり
もくもくの形にして、枠線を消したり
ゆらゆらだってできる!目も回る〜
3. スタッフブロック
\テンプレにはめるだけ!簡単プロフィール作成/
4. フロー
- 行程を簡単に作れます!
- 料理の作り方とか、作業行程とか便利。
- テンプレにあてはめるだけ!
- 画像も載せて見やすくできる。
5. FAQ
-
Q&Aを作るのは難しいですか?
-
いいえ、とっても簡単です!
\7種類のデザインから選べる!/
6. 見出し
見出しの前後にアイコン
サブテキストをここに追加できる!
標準見出しと違うところは、アイコンを簡単に配置できることとサブテキストを追加できるところです。デザインはテーマによって変わります。
7. ボタン
使い方記事を後日公開予定!
8. 枠線ボックス
\枠や背景の色も変更できる!/
9. アラート
\注意書きやお知らせに便利!/
10. レスポンシブスペーサー
空白の隙間ブロックです。簡単にレスポンシブ設定ができ、スマホ・タブレット・PCでの幅を個別に設定を変えることができるのでとっても便利です!
いかがでしたか?便利なブロックやデザインが無料で使えるのでぜひ活用してください!
▼VK Blocksの機能を使いながら簡単にサイト型ホームページが作れるWordPressテーマ
▼VK Blocksを使った「記事を見やすくする方法」もぜひご活用ください!