【WPプラグイン】便利なブロックスタイルが使える『Useful Blocks』の使い方を徹底解説!

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

ブロックエディターはHTMLタグを知らなくても各ブロックを配置するだけなので、WordPress初心者でも直感的に使用でき記事作成ができます。

そしてWordPressプラグインの中には、使用できるブロックを増やしてくれるブロックエディター専用のプラグインがあり、記事の作成が捗るので非常に便利です。

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

もくじ

『Useful Blocks』インストール

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

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

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

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

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

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

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

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

『Useful Blocks』の使い方

『Useful Blocks』を有効化すると、ブロックエディターのメニューに新たにCVボックス・比較ボックス・アイコンボックスの3つが追加されます。

『Useful Blocks』の使い方1

『Useful Blocks』はまだ新しいプラグインで数は少ないですが、今後色々なブロックが追加予定です。

CVボックス

「CVボックス」は、商品を紹介したりする時に使えるブロックを追加でき、文字を変更したりボタンの前にリストをつけたりできます。

カラーセットは4種類

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

背景は影をつけたり、無くすこともできます。

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

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

無料版では「画像ブロック」と「CVボックス」をグループ化して組み合わせていますが、有料版ならもっと少ない手順で画像を追加できます。

比較ボックス

「比較ボックス」は、比較表に使えるブロックを追加できます。

カラーセットは5種類

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

比較表はどのサイトでも使えるので使い勝手がいいです。

アイコンボックス

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

カラーセットは5種類

ワンポイントアドバイス

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

コメント
テキスト
テキスト
注意点
  • リストも可能
  • テキスト
  • テキスト
コメント
テキスト

記事のポイントの紹介やまとめなどに使えます。

『Useful Blocks』の有料版

ここまで紹介してきた機能は、すべて無料版で使用できる機能ですが、有料版にすると各ブロックのカラーを細かく設定できたりしてさらに便利になります。

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

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

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

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

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

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

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

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

『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. 最下部にも下線がつく
細かいけど線はつけてほしい
  1. 『Useful Blocks』のリストには
  2. 最下部に下線がつかない

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

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

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

『Useful Blocks』の設定2

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

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

まとめ

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

『Useful Blocks』で使えるブロック
  1. CVボックス
  2. 比較ボックス
  3. アイコンボックス

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

ひろもんのアイコン画像ひろもん

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

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

コメント

コメントする

もくじ
閉じる