「Useful Blocks」の使い方を徹底解説!オシャレで便利なブロックが使える!

  • URLをコピーしました!

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

当ブログで使用しているWordPressテーマ「SWELL」は、ブロックエディターに完全対応しており非常に便利なため、私はいつもブロックエディターで記事を作成しています。

使用できるブロックの種類はテーマごとに異なっており、中には使用できるブロックを増やせるプラグインまで存在します。

そこで今回は、ブロックエディターで使用できるブロックを増やしてくれる、WordPressプラグイン「Useful Blocks」について徹底解説します。

この記事でわかること
  • 「Useful Blocks」の使い方
  • 「Useful Blocks」のメリット・デメリット
  • 「Useful Blocks Pro」の紹介
もくじ

「Useful Blocks」の使い方

「Useful Blocks」の使い方

インストール方法

「Useful Blocks」は無料プラグインのため、WordPressの管理画面からインストールできます。

STEP
プラグインの[新規追加]をクリック
プラグインのインストール手順1

プラグインにカーソルを合わせるとサブメニューが表示されるので、[新規追加]をクリックします。

STEP
検索ボックスに「Useful Blocks」と入力
プラグインのインストール手順2

右上の検索ボックスに「Useful Blocks」と入力すると、該当するプラグインが表示されます。

STEP
[今すぐインストール]をクリック
プラグインのインストール手順3

[今すぐインストール]をクリックするとインストールが開始されます。

STEP
[有効化]をクリック
プラグインのインストール手順4

インストール完了後、[有効化]をクリックして完了です。

追加ブロックの紹介

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

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

CVボックス

「CVボックス」は、画像・リスト・ボタン・背景色などがセットになっているブロックです。

変更できる箇所
  • 画像の有無
  • 全体の配色
  • リストのアイコン(4種類)
  • リスト下線の有無
  • ボタンの形(四角/丸)
  • ボタン左のアイコン(3種類)
  • ボタン右のアイコン(2種類)
  • ボタンの文字
  • ボタンの背景(同色/白/透明)

カラーセットは4種類

  • ポイント1
  • ポイント2
  • ポイント3
シンプルで美しいテーマ
  • 特徴1
  • 特徴2
  • 特徴3
画像なしパターン
  • メリット1
  • メリット2
  • メリット3
機能性が高いテーマ
  • 口コミ1
  • 口コミ2
  • 口コミ3
背景を白にもできる

上記はテキトーに作成したサンプルですが、各パーツの色やアイコンなどをいろいろと変更できます。

比較ボックス

「比較ボックス」は、比較表を作成するブロックです。

変更できる箇所
  1. 比較ボックスの色(5種類)

カラーセットは5種類

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

アイコンボックス

「アイコンボックス」は、アイコン付きのボックスが使えるブロックで、キャラクターがコメントをしている風にできます。

変更できる箇所
  • ボックスの色(5種類)
  • アイコンの位置(4種類)

カラーセットは5種類

メリット
  • テキスト
  • テキスト
  • テキスト
左上
ワンポイントアドバイス

テキストテキスト

改善点

テキストテキスト

デメリット
  • テキスト
  • テキスト
  • テキスト
右上
まとめ

テキストテキスト

棒グラフ

「棒グラフ」は、棒グラフが使えるブロックで、わざわざ画像でグラフを挿入しなくてもいいので便利です。

変更できる箇所
  1. 全体の配色(5種類)
  2. タイトルの有無
  3. タイトル下の線の有無
  4. 背景の有無
  5. グラフの色

カラーセットは5種類

タイトルに下線あり
ラベル1
ラベル2
ラベル3
ラベル1
ラベル2
ラベル3
タイトルに下線なし
ラベル1
ラベル2
ラベル3
ラベル1
ラベル2
ラベル3
アンケート結果
非常に良い
50%
良い
25%
普通
10%
悪い
10%
非常に悪い
5%
背景色なし+グラフの右側透明
非常に良い
50%
良い
25%
普通
10%
悪い
10%
非常に悪い
5%

評価グラフ

評価グラフは、商品やサービスなどの評価を表すのに活用できます。

変更できる箇所
  1. 全体の配色(5種類)
  2. アクティブポイントの位置

カラーセットは5種類

5段階評価
1
2
3
4
5
年代
10代
20代
30代
40代
50代
使いやすさ
悪い
1
2
3
4
5
良い
混み具合
少ない
1
2
3
4
5
多い
まずい
1
2
3
4
5
おいしい
価格
安い
500円
600円
700円
800円
900円
高い
駅からのアクセス
近い
5分
10分
15分
20分
25分
遠い

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

「Useful Blocks」のレビュー

「Useful Blocks」のレビュー

実際に「Useful Blocks」を使った上でのメリット・デメリットを紹介します。

メリット

「Useful Blocks」のメリット
  • グラフをその場で作成・修正できる
  • オシャレ感が出る

通常サイトにグラフを使用するには、外部ツールで作成し画像として記事に挿入するしかありませんが、「Useful Blocks」を使えばカンタンなグラフに限られますが、エディター上で作成できます。

またデータの更新や修正もエディター上ですぐに行えるので、画像として挿入するグラフと比べて手間がかかりません。

また見た目もキレイなデザインなので、サイトにオシャレ感がでます。

デメリット

「Useful Blocks」のデメリット
  • とくになし

「Useful Blocks」は無料プラグインですし、利用することで何か不利益になるということはありません。

要望・改善点

「Useful Blocks」への要望・改善点
  • グラフの種類を増やしてほしい

個人的にはレーダーチャートや積み上げ棒グラフなどがあれば、今よりもかなり使い勝手がよくなるかと思いますが、アップデート頻度があまり高くないプラグインなので、実装されることはないと思います。

こんな人におすすめ

「Useful Blocks」がおすすめな人
  • 比較表を使いたい方
  • グラフを使いたい方
  • この記事を読んで使ってみたいと思った方

「Useful Blocks」はサイト運営する上で、絶対に必要というプラグインではないため、ここまで解説記事を読んでみて、少しでも自分のサイトで使ってみたいと思った方だけ使ってみたらいいと思います。

「Useful Blocks Pro」で機能拡張

「Useful Blocks」は無料版でも十分便利ですが、さらに機能が充実した有料版の「Useful Blocks Pro」もあります。

「Useful Blocks Pro」は使用できるブロックが増えるわけではなく、無料版で使用できるブロックの色やアイコンなどをカスタマイズできるようになります。

まずは無料版を使ってみて、カスタマイズしたくなったら有料版を検討してみてください。

STEP
公式サイトで購入する

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

私が購入したときはリリース直後だったため980円でしたが、今は機能が増えて値上がりしています。

STEP
必要事項を入力し料金を支払う

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

必要事項を入力し[\1,200 を支払う]をクリックして購入完了です。

STEP
「Useful Blocks Pro」をダウンロードする

購入時に入力したメールアドレス宛に、ダウンロードリンクが記載されたメールが届くので、「Useful Blocks Pro」をダウンロードしインストールします。

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

まとめ

「Useful Blocks」は、ブロックエディターで使用できるブロックを増やしてくれるプラグインですが、比較表や棒グラフなどを使用しない方にはあまり使い道がありません。

あくまでもこの記事で紹介したブロックを使いたいと思った方だけ、使ってみてください。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

トップへ
もくじ
閉じる