WordPressでは、HTMLなどの専門的な知識が無くても、管理画面から簡単に編集してホームページの作成が出来ますが、もう一歩デザインされたホームページを作ろうとすると、CSSを追加したり、専門的な知識が必要になってきます。
ですが、ちょっとした装飾なら「VK Blocks」プラグインを使うことによって、専門知識がなくても簡単にいろいろなデザインの装飾を付けることが出来ます。
Contents
「VK Blocks」プラグインとは
WordPressでは、テーマ・テンプレートをインストールすることによって、簡単に全体的なレイアウトやデザインを変更することが出来ます。そのテーマ・テンプレートの中でもとても有名なのが、無料ワードプレステーマ「Lightning」になります。
「VK Blocks」は、ワードプレステーマ「Lightning」の付属のプラグインになりますが、「Lightning」以外のテーマでも問題なく使用できております。
「VK Blocks」プラグインをインストールすることで、ワードプレスのブロックエディタ機能を拡張することができ、よりデザインされたホームページを作成することが出来ます。
「VK Blocks」プラグインのインストール
ダッシュボード「プラグイン」＞「新規追加」から、「VK Blocks」と検索して、以下のプラグインを「今すぐインストール」＞「有効化」してください。
「VK Blocks」プラグインの使い方
WordPressでは、基本的にブロックエディタという、文章や画像などのブロックを追加していくように固定ページや投稿ページを編集していきます。
「VK Blocks」によって以下のようなブロックが追加されます。
- FAQ
- 見出し
- PR BLOCK
- アラート
- スタッフブロック
- 吹き出し
- フロー
- ボタン
- レスポンシブスペーサー
- 枠線ボックス
などなど、
さらに、WordPress標準ブロックのスタイル拡張機能があります。
上記のブロックの中で特に使えると思うのが、FAQ、吹き出し、フロー、WordPress標準ブロックのスタイル拡張機能です。
それぞれ、具体的な使い方をご紹介させていただきます。
FAQの使い方
固定ページ/投稿ページの編集画面左上の[+]（ブロックの追加）をクリックし、ブロックの選択部分を下の方にスクロールさせていくと、「VK Vlocks」によっていくつものブロックが追加されています。
FAQブロックには、「旧FAQ」と「新FAQ」がありますが、基本的にはどちらでも構わないと思います（「新FAQ」では質問文の中にさらにブロックを追加できます）。
ブロックを追加すると、Q（質問欄）・A（回答欄）が表示されるので、それぞれに文章を入力するだけで、簡単にデザインされたFAQが出来上がります。
実際の使用例はこちらになります。
-
よくある質問その１
-
よくある質問その１の回答
-
よくある質問その２
-
よくある質問その２の回答
「Q」や「A」のデザインも編集画面右側の「スタイル」で見た目の変更もできます。
吹き出しの使い方
よくアイコンから吹き出しがあって、セリフが書かれているサイトを見かけると思いますが、これも「VK Blocks」で簡単に作成することができます。
こちらもブロックの追加から、「吹き出し」ブロックを選んでクリックします。
「吹き出し」ブロックでは、アイコンと吹き出しの中の文章を設定できます。
さらに編集画面右側から、吹き出しの位置、吹き出しのタイプ、画像スタイル、枠線の有無、吹き出しの色も設定できます。
吹き出しブロックの実際の使用例がこちらになります。
WordPressサイトのデザイン装飾するのって難しいんでしょ？
VB Blocksを使えば簡単ですよ
ちなみにアイコンの画像はこちらのサイトからダウンロードしております。
フローの使い方
こちらは手順や流れを説明するときに使うブロックになります。
こちらもブロックの追加で、「フロー」ブロックをクリックします。
「フロー」ブロックでは、タイトルと説明文、さらに右側に画像を設定できます。
四角い枠の下に三角のマークが表示されるので、「フロー」ブロックを連続で追加することで、手順や流れの説明に使えます。
「フロー」ブロックの実際の使用例はこちらになります。
- 手順その１
- 手順その１の説明文
- 手順その２
- 手順その２の説明文
編集画面右側の矢印の表示の設定で、矢印を表示しないを選択すれば、枠下の三角マークを非表示になりますので、手順の最後は非表示にできます。
WordPress標準ブロックのスタイル拡張機能の使い方
あと、大変便利なのが、ワードプレスの標準ブロックのスタイルを拡張する機能になります。
画像ブロックの拡張
例えば、標準の画像ブロックでは出来ない、いろいろな形で切り取ったり、フォトフレーム風にしたりの加工をすることが出来ます。
ブロックの追加で、画像ブロックをクリックし、画像を追加した際、編集画面右側のスタイルでいろいろなスタイルを選択することが出来ます。
具体的な使用例はこちらになります（液体シェイプ2）。
リストブロックの拡張
箇条書きや番号付きのリストを表示するリストブロックですが、リストの先頭部分は標準では、ドット（丸・点）か数字しか選べません。
こちらも「VK Blocks」で拡張することによって、リストの先頭部分をいろいろと変えることが出来ます。
リストブロックを追加して、それを選択した状態で、編集画面右側のスタイルから、Checkbox、矢印、三角、チェック（標準・四角・丸）、指、鉛筆、笑顔、不満顔、数字（丸・四角）など、いろいろなスタイルに変更することが出来ます。
具体的な使用例はこちらになります（鉛筆）。
- リスト1
- リスト2
- リスト3
文章を蛍光マーカーで強調
さらに便利なのが、段落ブロックで記述した文章を蛍光マーカーで強調することができます。
蛍光マーカーでマークしたいテキストを選択した状態で、ブロックツールの右から２番目「v」（さらにブロックツールを表示）をクリックし、「蛍光マーカー」をクリックします。
強調したいテキスト
標準で黄色いマーカーでマークされます。また、カラーは自由に変更できます。
強調したいテキスト
まとめ
以上、ワードプレスのブロックエディタを拡張するプラグイン「VK Blocks」のご紹介をさせていただきました。
今回ご紹介させていただいた機能以外のもたくさんの機能がありますが、実際のホームページ作成の場面でも良く使う、FAQや吹き出し、フロー、画像のトリミングやリスト表示のデザイン、蛍光マーカーなど、よく使うものをご紹介させていただきました。
ワードプレステーマ「Lightning」の付属品のように、「Lightning」使用時のみ使えると思われている方もいるかもしれませんが、それ以外のテーマでも普通に使えておりますし、「Lightning」同様、日本産のプラグインですので大変使いやすいです。
このように１つインストールするだけで、いろいろ便利な「VK Blocks」は大変お勧めのプラグインです。
