【WPプラグイン】オシャレで便利なブロックが使える『Useful Blocks』の使い方を徹底解説

どうも、ひろもん(@hiromon_com)です。

私は自分が運営しているサイトやブログのほとんどで『SWELL』を使っているので、記事を作成するときはいつもブロックエディターで記事を作成しています。

ブロックエディターは直感的に使用できるので、非常に使いやすく記事を書くのが楽しいのですが、ブロックエディターの機能を拡張するWordPressプラグインを使用すると、さらに記事作成が捗り便利です。

そこで今回は、普段私が使用しているブロックエディターのブロックを増やしてくれる、WordPressプラグインの『Useful Blocks』の使い方を解説していきます。

もくじ

『Useful Blocks』インストール

『Useful Blocks』は有料版もありますが、無料のままでも使用できるプラグインなので、WordPressの管理画面から簡単にインストールできます。

WordPressプラグインのインストール手順1

[プラグイン]をクリックします。

WordPressプラグインのインストール手順2

[新規追加]をクリックします。

『Useful Blocks』インストール手順

右上の検索ボックスに「Useful Blocks」と入力すると、該当するプラグインが表示されるので、Useful Blocksの右上にある[今すぐインストール]をクリックし、さらに[有効化]をクリックします。

これでインストールは完了です。

『Useful Blocks』の使い方

『Useful Blocks』を有効化すると、ブロックエディターに以下のブロックが追加されます。

有効化で追加されるブロック
  1. CVボックス
  2. 比較ボックス
  3. アイコンボックス
  4. 棒グラフ
  5. 評価グラフ

ブロックは随時追加予定です。

『Useful Blocks』の使い方1

プラグインを有効化すると、ブロックエディターの一番下にブロックが追加されます。

続いて追加されるブロックについて解説していきます。

CVボックス

「CVボックス」は、商品やサービスを紹介したりする時に使えるブロックで、ボタンの色は設定画面のカラーパレットで自由に変更できますが、セットしておけるのは5色までです。

変更できる箇所
  1. ボタンの形(四角/丸)
  2. ボタンの色(セットした5種類)
  3. ボタンの文字(左端の文字やアイコンも変更可能)
  4. ボタンの背景(同色/白/透明)

カラーセットは5種類

  1. 数字のリスト
  2. テキスト
ここに文章を追加可能
  • 下線も付けられる
  • テキスト
背景を白にもできる

以下のように背景に影をつけたり、無くすこともできます。

以下は画像と組み合わせた例です。

  • ブロックエディターが使いやすい
  • ブロックエディター完全対応
  • ページの表示速度が高速化
ブログが楽しくなるWordPressテーマ

比較ボックス

「比較ボックス」は、どんなブログでも役立つ比較表を作成するブロックです。

変更できる箇所
  1. 比較ボックスの色(セットした5種類)
  2. リストアイコン(6種類)

カラーセットは5種類

メリット
デメリット
  • シンプルなリスト
  • テキスト
  • テキスト
  • テキスト
リンゴの成分
バナナの成分
  • 下線あり
  • テキスト
  • テキスト
  • テキスト
商品A
商品B
  • テキスト
  • テキスト
  • テキスト
  • テキスト
良い点
悪い点
  1. 数字のリスト
  2. テキスト
  1. テキスト
  2. テキスト
効果
副作用
  1. 下線あり
  2. テキスト
  • テキスト
  • テキスト

アイコンボックス

「アイコンボックス」は、ポイントや注意点、まとめなどに役立つアイコン付きのボックスが使えるブロックで、キャラクターがコメントをしている風にできます。

変更できる箇所
  1. ボックスの色(セットした5種類)
  2. アイコンの位置(4種類)
  3. リストアイコン(6種類)

カラーセットは5種類

ワンポイントアドバイス

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

左上
テキスト

テキストテキスト

テキスト

テキストテキスト

注意点
  • リストも可能
  • テキスト
  • テキスト
右上
テキスト

テキストテキスト

棒グラフ

「棒グラフ」は、見た目がキレイな棒グラフを簡単に使えるブロックで、わざわざ画像でグラフを挿入しなくてもいいので、ものすごく便利です。

変更できる箇所
  1. グラフの色(セットした5種類)
  2. タイトルの有無
  3. タイトル下の線の有無
  4. 背景の有無
  5. グラフの残りの部分の有無
  6. 左のラベルの位置(上部/内部)
  7. 右のラベルの位置(左寄せ/右寄せ)

カラーセットは5種類

タイトルに下線あり
左のラベル(上部)
タイトルなし
右のラベル(左寄せ)
タイトルに下線なし
左のラベル(内部)
タイトル
右のラベル(右寄せ)
グラフの残り部分なし
アンケート結果
非常に良い
70%
良い
13%
普通
10%
悪い
2%
非常に悪い
5%

評価グラフ

評価グラフは、商品やサービスなどさまざまなものの評価を表せる便利なブロックです。

変更できる箇所
  1. グラフの色(セットした5種類)
  2. グラフの段階(5段階/3段階)
  3. アクティブポイントの形状(ドット/アイコン/画像)
  4. アクティブポイントの場所

※アクティブポイントとはグラフの中で色が付いている箇所でアイコンと画像は好きなものを設定できます。

5段階評価
1
2
3
4
5
年代
10代
20代
30代
40代
50代
3段階評価
1
2
3
絶景スポット
1
2
3
4
5
まずい
1
2
3
4
5
おいしい
価格
安い
500円
600円
700円
800円
900円
高い
駅からのアクセス
近い
5分
10分
15分
20分
25分
遠い

評価グラフは好きなだけ増やせます。

『Useful Blocks』の有料版

ここまで紹介してきた各ブロックは、すべて無料版でも使用できる機能ですが、カラーの変更やアイコンの変更などは機能が制限されているため、すべての機能を使用するには有料版が必要です。

アイコンの移動も有料版の機能です
有料版で増える機能
  • 各ブロックのカラーセットを自由に変更できる
  • リストアイコンが増える
  • CVボックスのボタンアイコンが増える
  • アイコンボックスのアイコンを移動できる
  • アイコンボックスの吹き出しを変更できる
  • アイコンボックスのアイコンを事前にセットしておける
  • などなど他多数

有料版の購入手順は以下です。

『Useful Blocks』の有料版購入手順1

[Useful Blocks]をクリックします。

『Useful Blocks』の有料版購入手順2

[Pro版]をクリックすると公式サイトへ移動します。

『Useful Blocks』の有料版購入手順3

公式サイト下部にある[購入してダウンロード]をクリックします。

私はPRO版を980円で購入しましたが、機能が追加される度に価格が上がっていくそうなので、今のうちに購入しておいた方がいいかもしれません。

『Useful Blocks』の有料版購入手順4

お名前:名前を入力
メールアドレス:メールアドレスを入力
クレジットカード:カード情報を入力

[\980 を支払う]をクリックして購入完了です。

『Useful Blocks』の有料版を有効化

入力したメールアドレス宛にダウンロードリンク付きのメールが届くので、そこからプラグインをダウンロードして、あとはインストール後に有効化します。

有料版は無料版の機能を拡張させる位置づけなので、無料版と有料版両方のプラグインを有効化します。

『Useful Blocks』の設定

『Useful Blocks』の設定は有料版でしか使用できませんが、有料版を購入したら自分好みの設定を行えます。

『Useful Blocks』の設定1

WordPress管理画面のメニューから[Useful Blocks]をクリックして各種設定が行えるので、各ブロックを自分好みのカラーに変更します。

『Useful Blocks』の設定2

アイコン画像タブに切り替えると、アイコンボックスで使用するアイコンをあらかじめ4つ登録しておけるので、アイコンボックスを利用するときにすぐに呼び出せます。

『Useful Blocks』のおしい点

私も『Useful Blocks』を使っていますが、気になる点が2点あります。

『Useful Blocks』のおしい点
  1. リストの最下部に下線がつかない
  2. アイコン画像に謎の余白が入る

最下部のリストに下線がつかない

1点目は細かいことですが、リストの最下部に下線が付かないことです。

WordPressテーマ『SWELL』で使えるリストには、最下部のリストにも下線が付く。

  1. 『SWELL』のリストには
  2. 最下部にも下線がつく

『Useful Blocks』のリストは、最下部に下線が付かない。

  1. 『Useful Blocks』のリストには
  2. 最下部に下線がつかない

気にならない方もいると思いますが、個人的には下線をつけるならすべてにつけて統一して欲しいです。

アイコン画像に謎の余白が入る

2点目はアイコン画像に謎の余白が入ることです。

『Useful Blocks』の設定2

有料版はアイコンボックス用のアイコンを事前に4つ登録しておけますが、なぜかここで画像を登録すると右に謎の余白が入ることがあります。

この余白は不具合なのか、何か条件があるのかわかりませんが、これは至急改善されることを期待しています。

まとめ

ここまで『Useful Blocks』について解説してきましたが、いかがでしたか?

『Useful Blocks』で使えるブロック
  1. CVボックス
  2. 比較ボックス
  3. アイコンボックス
  4. 棒グラフ
  5. 評価グラフ

『Useful Blocks』は、まだ新しいプラグインでおしい点もありますが、これからどんどんアップデートされていくと思いますし、総合的にみると非常に便利なプラグインです。

ひろもん

無料でも使えるプラグインなので、ブロックエディターを使っているなら一度お試しください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

もくじ
閉じる