【Useful Blocks】レビュー記事にも最適!便利でかわいいブロックエディター専用プラグイン
![【Useful Blocks】レビュー記事にも最適!便利でかわいいブロックエディタ専用プラグイン](https://webnote-plus.com/wp-content/uploads/2021/03/3f47d0b99667d4a160bc17d47bbe5b9d.png)
ブロックエディター(Gutenberg)を使われている方におすすめのプラグイン『Useful Blocks』をご紹介します。
記事作成で大活躍する、オシャレで実用的なブロックスタイルを追加してくれるブロックエディター(Gutenberg)専用のプラグインです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
上記のボックス装飾もUseful Blocksの機能です…!
WordPress標準のコアブロック、各テーマで用意されたブロックも良いけど、もっと記事の中にアクセントがほしい方や、記事内でグラフなどを使って視覚的な表現をしたい方にとてもおすすめのプラグインです。
ブロックエディターにおすすめのプラグインをまとめました。
![](https://webnote-plus.com/wp-content/uploads/2021/03/363bc714d911ed15ac9c5b0ddb195d8e-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/03/363bc714d911ed15ac9c5b0ddb195d8e-300x169.png)
オシャレでかわいいブロックを追加できるUseful Blocks!
![プラグイン『Useful Blocks』](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-04_22h41_55.jpg)
![プラグイン『Useful Blocks』](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-04_22h41_55.jpg)
『Useful Blocks』は記事作成に役立つブロックが使えるようになるブロックエディター(Gutenberg)専用のプラグインです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
デザインもとってもオシャレでかわいい…!
ブログのカスタマイズでおなじみのぽんひろさんと、WordPressテーマSWELLの開発者、了さんが共同で開発されています。
まずは、Useful Blocksの基本情報を一覧で見てみましょう。
項目 | 説明 |
---|---|
プラグイン名 | Useful Blocks |
開発者 | ぽんひろさん(@ponhiroo) 了さん(@ddryo_loos) |
金額 | 通常版:無料 Pro版:¥1,200円 ※買い切り型 |
公式サイト | https://ponhiro.com/useful-blocks/ |
デザイン面も機能面も素晴らしいプラグインですが、Pro版でも1,200円というとても良心的な価格になっています。
そして、無料版でも十分すぎる機能が使えます。
ちなみに、リリース当初は980円でした。今後さらに機能が拡張されていくと、もう少し値上がりする可能性もあるかもしれません。
ブロガーさん、アフィリエイターさんにはぜひ導入して見てほしいプラグインです。
Useful Blocksは、どのテーマでも使用することができます。
SWELLの了さんが開発に携わっているので、SWELL専用のプラグインと勘違いされる方も多いようです。
Useful Blocksで使えるブロック【簡単で便利!】
Useful Blocksで使えるブロックスタイルを紹介していきます。
2021年2月時点で、以下のブロックが使用可能です。
- 比較ボックス
- CVボックス
- アイコンボックス
- 棒グラフ
- 評価グラフ
![Useful Blocks](https://webnote-plus.com/wp-content/uploads/2021/03/Useful-Blocks-1024x576.jpg)
![Useful Blocks](https://webnote-plus.com/wp-content/uploads/2021/03/Useful-Blocks-1024x576.jpg)
どれもデザインがオシャレなのに加えて、記事の中でかなり重宝するブロックです。
それぞれ、無料と有料でできることも含めてご紹介していきます。
CVボックス
![Useful BlocksのCVボックス](https://webnote-plus.com/wp-content/uploads/2021/03/48fa29242243b544ff60274061273706-1024x576.jpg)
![Useful BlocksのCVボックス](https://webnote-plus.com/wp-content/uploads/2021/03/48fa29242243b544ff60274061273706-1024x576.jpg)
CVボックスは、おすすめしたい商品などを画像や説明分と合わせて商品リンクを作成することのできるブロックです。
レビュー記事など、読者の視線を集める商品リンクを設置したいときにすごく有効だと感じます。
サイドバーのパネルから以下のような項目が設定できます。
![CVボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/7ece35b0336a18a2f4fe24da00cea564-1024x576.jpg)
![CVボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/7ece35b0336a18a2f4fe24da00cea564-1024x576.jpg)
Pro版では、以下のような追加機能が設定できるようになります。
- ボタンリンクの強調部分をアイコンに変更
- リスト部分のアイコンを変更
- 補足部分にアイコンを追加
- 商品画像の追加
- カラーセットの変更
詳細の機能や使い方は公式サイトに詳しく記載されています。
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/cv-box.jpg)
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/cv-box.jpg)
比較ボックス
![Useful Blocksの比較ボックス](https://webnote-plus.com/wp-content/uploads/2021/03/ec9e65af9df4e5fb21c4b930296ed49d-e1615731371743.jpg)
![Useful Blocksの比較ボックス](https://webnote-plus.com/wp-content/uploads/2021/03/ec9e65af9df4e5fb21c4b930296ed49d-e1615731371743.jpg)
比較ボックスは、その名の通り複数の項目を比較するときに役立つブロックです。
商品のメリットとデメリットを並べて表示したり、2つの商品の特徴を並べて表示することができます。
サイドバーのパネルから以下のような項目が設定できます。
![比較ボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/b5a5f4f80cf1464a88179bbf43232616-1024x576.jpg)
![比較ボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/b5a5f4f80cf1464a88179bbf43232616-1024x576.jpg)
Pro版では以下の機能が追加されます。
- コンテンツ内にテキストや画像の挿入
- リストのアイコンの変更
- カラーの変更
詳細の機能や使い方は公式サイトに詳しく記載されています。
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/compare-box.jpg)
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/compare-box.jpg)
アイコンボックス
アイコンボックスは、ボックスの中や外にお好きなアイコンを配置することができるブロックです。
![Useful Blocksのアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/03/2e775663f4d438bee63001ce2fc42233-1024x576.jpg)
![Useful Blocksのアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/03/2e775663f4d438bee63001ce2fc42233-1024x576.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
僕はアイコンボックスが大好きです…!
サイドバーのパネルから以下のような項目が設定できます。
![アイコンボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/1025eb7b1f8cf74f89ca4a4c9b79b65c-1024x576.jpg)
![アイコンボックスのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/1025eb7b1f8cf74f89ca4a4c9b79b65c-1024x576.jpg)
Pro版では以下のような機能が追加されます。
- アイコンの配置場所の追加
- ふきだしの種類の追加
- カラーセットの変更
詳細の機能や使い方は公式サイトに詳しく記載されています。
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/icon-box.jpg)
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/icon-box.jpg)
棒グラフ
![Useful Blocksの棒グラフ](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-05_00h55_29-1024x626.jpg)
![Useful Blocksの棒グラフ](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-05_00h55_29-1024x626.jpg)
棒グラフはその名のとおり、横棒グラフを簡単に作成することができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
これは本当にすごい…!
複数項目の数値を比較したいときなどにとても便利で大活躍するブロックです。
サイドバーのパネルから以下のような項目が設定できます。
![棒グラフのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/c1a2071248e41024c67da834239a8a83-1024x576.jpg)
![棒グラフのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/c1a2071248e41024c67da834239a8a83-1024x576.jpg)
Pro版では以下のような機能が追加されます。
- グラフの右側部分の背景削除
- 左右の項目ラベルの位置変更
- 棒グラフの色変更
- 背景色変更
- カラーセットの変更
詳細の機能や使い方は公式サイトに詳しく記載されています。
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/bar-graph.jpg)
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2020/10/bar-graph.jpg)
評価グラフ
![Useful Blocksの評価グラフ](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-05_01h00_41-1024x394.jpg)
![Useful Blocksの評価グラフ](https://webnote-plus.com/wp-content/uploads/2021/03/2021-03-05_01h00_41-1024x394.jpg)
評価グラフは、特定の項目を段階的に評価したいときにおすすめのブロックスタイルです。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
これも便利でオシャレ…!
無料版でも十分すぎるほどおしゃれで高機能な評価グラフを作成できます。
サイドバーのパネルから以下のような項目が設定できます。
![評価グラフのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/8c9c6f3a898e230811171952393ab8e0-1024x576.jpg)
![評価グラフのサイドバー](https://webnote-plus.com/wp-content/uploads/2021/03/8c9c6f3a898e230811171952393ab8e0-1024x576.jpg)
Pro版では以下のような機能が追加されます。
- 段階数の変更
- 評価グラフにアイコン追加
- 評価グラフに画像追加
- カラーセットの変更
詳細の機能や使い方は公式サイトに詳しく記載されています。
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2021/01/rating-graph.jpg)
![](https://ponhiro.com/useful-blocks/wp-content/uploads/2021/01/rating-graph.jpg)
オシャレで高機能なブロックで楽しく記事を書きましょう!
とっても実用的で、デザインもオシャレでかわいいブロックプラグイン『Useful Blocks』をご紹介しました。
ブロガーさん、アフィリエイターさんの記事作成にはきっと役立つプラグインです。
また、ブロックエディター(Gutenberg)専用のプラグインなので、今後のWordPress本体の開発方針ともマッチしています。
まだ新しいプラグインなので、今後のブロックの追加も大いに期待できるのではないでしょうか。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
開発者のお2人はお忙しいとは思いますが…。
気になった方は、ぜひ公式サイトで詳しい内容を見てみてください。
最後まで読んでいただきありがとうございました。
プラグインの関連記事
ブロックエディターにおすすめのプラグインまとめ↓↓
![](https://webnote-plus.com/wp-content/uploads/2021/03/363bc714d911ed15ac9c5b0ddb195d8e-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/03/363bc714d911ed15ac9c5b0ddb195d8e-300x169.png)