今回はSWELL開発者、了さんとぽんひろさんが共同で開発された「Useful Blocks」について解説します!
Useful Blocksはコードが書けなくても、ブロックを選択するだけでおしゃれなブロックを配置することができしまう。
そんなプラグインです。
またUseful Blocksを知らない方が多かったので、Useful Blockでできること・導入方法も解説します。

実際に導入してみて使いやすかったので実例付きで紹介します!
Useful Blocksとは?

Useful Blocksは、ブログデザイナーぽんひろさん(@ponhiroo)・WordPressテーマSWELL開発者、了さん(@ddryo_loos)のお二人によって作られたプラグインです。
Useful Blocksはブログデザイナーぽんひろさんが公開していた、「コピペできるブログカスタマイズ」の内容をプラグインにしたもの。
コードを書くことができれば使えるのですが、コードを書けない人にとっては少し難易度がありました。
そんなコードが書けないという方に向けて作られた「Useful Blocks」は簡単にデザインを追加することができます。

僕もコードが苦手なので助かります…
「Useful Blocks」には無料版とPro版(有料)があり、値段は1,200円と一回購入してしまえば複数サイトで制限がなく使用することが可能。
上の表のように、無料版で出来ることもあります。
しかも、値段が1,200円とそこまで高くないのでPro版(有料)をオススメします。
Useful Blocksについて質問!
その他の質問はUsuful Blocks公式サイトよりどうぞ。
Useful Blocksでできることは?

Useful Blocksで出来ることは主に4つ!
できることが5つになりました!
- アイコンボックス
- CVボックス
- 比較ボックス
- 棒グラフ
- 評価グラフ ←NEW!
一つずつ画像付きで紹介しますね!
追記:1/16に評価グラフが追加されました!
(なんか良い感じな予感がしますね…!!)
❶:アイコンボックス
1つ目のアイコンボックスはとても使いやすく、記事の随所で役立つはずです。
実際の例として、リード文(冒頭文)で使っています。
見出しを作るように、アイコンボックスもあっという間に作ることができます。
アイコンを使うときは背景に注意
アイコンボックスを使うときはアイコンの背景が透過でないと浮いてしまいます!
アイコンを背景透過したい方は、バナー工房という無料サイトで背景透過ができます。

ワンクリックで背景透過できるのでぜひ使ってみてください。
❷:CVボックス
CVボックスとは以下のようなものです。

こんなボックスも作れてしまうのか…
僕はSWELLのレビュー記事にCVボックスを使っています。
アイコンボックスに比べたら使う頻度は少ないですね。
ただ、デフォルトの色など変更することが出来るため、使い方は無限にあるはずです。
❸:比較ボックス
【比較ボックス】は商品を比べて紹介するときに役立ちます。
商品を比べるときって、ついつい長文になってしまいますよね。
そんなときにズバっと表にまとめられるとインパクト大です。
例として、ブログ界隈で人気の「沈黙のWebライティング・新しい文書の教室」という本を比較してみます。
ザっと作ってみましたがどうでしょうか。

文章の中にこのような表があると注目を集めることができるはずです。
Pro版(有料)を購入すると、商品リンクや画像の挿入をすることができるようになりました。
❹:棒グラフ
最後に棒グラフの機能について。
割とポップなので、使うサイトは限られるかなと思います。
デザインが苦手という方でも、カラーの色を変更して落ち着いた色にしては活用してみてはいかかでしょうか。
❺:評価グラフ
次回アップデートで「評価グラフ」が追加されます。
実際に使っている動画があるので下記ツイートをご覧ください。
実際に使ってみた!
まだ使い方が難しいですがこんな感じになります。
タイトルやカラーも変更できますよ。

Useful Blocks無料版のインストール
注意:Pro版(有料)を使う方も無料版をインストールする必要あり。

では、インストール方法を説明していきます。
画像付きのインストール方法はこちらのUseful Blocks公式サイトからどうぞ。
❶WordPress設定→プラグイン→新規追加
❷検索バーより「Useful Blocks」で検索
- 追記「ponhiro」と検索してもプラグインが表示されました
❸インストール→有効

無料版だけ使いたいという方はここで終わりです!
Useful BlocksPro版(有料)の購入・インストール方法
続いてPro版(有料)の購入・インストール方法を説明します。
- ダウンロードをクリック→クレジット情報を入力
- ダウンロードリンクから【zipファイル】をダウンロード
- WordPress管理画面のプラグイン→新規追加
- 画面上の【プラグインのアップロード】をクリック
- 先ほどダウンロードした【zipファイル】をアップロード
- 今すぐインストール→有効化

これで使えるようになりました!
Useful Blocksの設定画面
Useful Blocksがダウンロードできたら、WordPress管理画面の左に「Useful Blocksメニュー」が表示されるようになります。
このメニューからは【比較ボックス・棒グラフ・アイコンボックス・CVボックス】のカラーを変更することが可能。

ぜひ、あなたのブログデザインに合う色をカスタマイズしてみてください!
まとめ:Useful Blocksで記事執筆を楽しもう!

Useful Blocksはどのテーマでも使うことができます。
勘違いされる方が多いのですが、SWELL以外のテーマでも基本的に使えてしまうんです
まとめると…
- ブログのテーマに関係なく使える
- WordPressバージョン5.4以上
- 更なるアップデートでスタイルが追加予定
- Pro版(有料)は1,200円
- 支払いはクレジットカードに限定

SWELLを使っている方には特にオススメです!
現在は4つのブロックですが、これからのアップデートでもっと使いやすくなるはずです。
今回は以上です。
質問はこちらへお願いします。