ブログ運用

【WordPress】プラグイン「Useful Blocks」の紹介&使い方|オシャレなブロックを追加できるプラグイン

本ページには広告が含まれています。

プラグインでいろいろなブロックを使ってみたい

ぱなだ
ぱなだ

Useful Blocksがおすすめ!

WordPressのテーマには元より様々なブロックが用意されていますが、ちょっと趣向を変えて違うブロックを使ってみたくなることもありますよね。

そんな時に気軽に使えるプラグインを見つけました。

それが「Useful Blocks」。

あらゆる記事に自然と溶け込めるブロックで非常に汎用的。

当記事ではそんなUseful Blocksの使い方を紹介していきます。

スポンサーリンク

Useful Blocksとは?

出典:Useful Blocks公式ページ

Useful Blocksとはぽんひろ氏、氏により開発されたWordPressグーテンベルク専用の新たなブロックを追加するプラグインです。

ぱなだ
ぱなだ

ぽんひろ氏はウェブデザイナー、了氏はWordPressテーマSWELLの開発者です。
信頼と実績が十分なのがわかります。

面倒な設定が無くインストールすればすぐに使えるブログ初心者にも扱いやすい仕様です。

無料版とPRO版(有料版)があり無料版では基本的な機能のみ利用可能、PRO版では更に詳細の設定が可能となっています。

スポンサーリンク

どんなデザインがある?

Useful Blocksは見やすい配色シンプルでありながら目を引くデザインが多いです。

例えばこんな感じ↓

  • 速さと安定性重視
  • 収益化・副業をしたい方におすすめ
  • 10日間の無料お試し期間有り
利用満足度No.1レンタルサーバー
ぱなだ
ぱなだ

目立たせながらも読み手のストレスになりにくいデザインです。

ブロックの種類をこの後順番に紹介していきます。

CVボックス

まず最初に紹介するのは「CVボックス」。

無料版↓

  • 箇条書きによる説明を付けられる
  • ボタンと文字でわかりやすい
  • PRO版は画像も挿入可能
オシャレな外部リンクとして最適

ボタンリンクを付与しながら箇条書きの説明付きで商品購入ページ等へ誘導可能。

ユーザーの興味を引きやすい見た目のオシャレなボックスとなっています。

PRO版では画像の挿入、アイコン変更、ボタン左側の文字(無料版で「必見」の部分)などを変更できるようになります。

PRO版↓

  • 箇条書きによる説明を付けられる
  • ボタンと文字でわかりやすい
  • PRO版は画像も挿入可能
オシャレな外部リンクとして最適!

比較ボックス

お次は「比較ボックス」。

無料版↓

その1
その2
  • テキストを入れて
  • 左右を比較可能な
  • 一目でわかるデザイン
  • 有料版ではカラーリングや
  • アイコンなどを
  • 細かく編集できる

レビューなどでよかった点と悪かった点を比較する時なんかでよく見かけるやつですね。

PRO版では比較ボックスの中にブロックを挿入できるため、吹き出しを入れたり画像を挿入することもできます。

PRO版↓

その1
その2
  • テキストを入れて
  • 左右を比較可能な
  • 一目でわかるデザイン

  • 有料版ではカラーリングや
  • アイコンなどを
  • 細かく編集できる

PRO版は更にブロックを挿入可能!

アイコンボックス

吹き出しとテキストを同時に表示する「アイコンボックス」。

無料版↓

見出し・タイトルをここに入れる
  • リストやテキストを追加しながら
  • コメントを付け加えられる
  • アイコンで個性を出せる
一言添えられるのが便利!

こんな感じにキャラクター等のアイコンを添えて簡単なコメントを加えられるボックスです。

オリジナルのアイコンなどを用意すればちょっとしたアクセントになります。

PRO版では吹き出しの形状、アイコンの位置などの変更が可能。

PRO版↓

左上の例
見出し・タイトルここに入れる
  • リストやテキストを追加しながら
  • コメントを付け加えられる
  • アイコンで個性を出せる

記事の最後のまとめなどで活用すると見栄えがよくなりそうです。

棒グラフ

数値比較で使える「棒グラフ」。

無料版↓

好きなくだものアンケート結果
りんご
58%
オレンジ
20%
もも
12%
メロン
10%

バーの濃淡を変えられたりと注目を集める工夫ができます。

テーマによってはグラフや表の機能がそこまで豊富ではないこともあるため人によってはかなり助かるんじゃないかなと思いました。

PRO版ではバー自体の色やラベルの位置を変更できるようになります。

PRO版↓

好きなくだものアンケート結果
りんご
58%
オレンジ
20%
もも
12%
メロン
10%

評価グラフ

レビュー評価などを数値によりわかりやすく表示できる「評価グラフ」。

評価グラフはWordPressバージョン5.6以上でのみ利用可能。

無料版↓

ラーメン屋○○店の年齢層
10代
20代
30代
40代
50代
ラーメン屋○○店の価格
安い
高い
ラーメン屋○○店の接客
悪い
良い

段階別の表示のため視認しやすく読者が一目でどの数値か判断できます。

PRO版は段階数の変更(3段階か5段階)、ドットを任意の画像またはFont Awesomeからクラス指定で変更可能になります。

カラーセットは無料版でも変更できます。

PRO版↓

ラーメン屋○○店の年齢層
10代
20代
30代
40代
50代
ラーメン屋○○店の価格
安い
高い
ラーメン屋○○店の接客
悪い
良い
スポンサーリンク

PRO版では設定画面から詳細設定が可能

PRO版限定の機能として各ブロックのカラーを専用の編集画面から変更を加えられます。
カラーセットでも色は変更できますがより細かく配色を変更したいのであればこちらから。

Useful Brocksのカラー編集画面

因みに無料版でもプレビューだけは可能(実際のブロックに反映はされない)なのでPRO版にするとどんな感じになるのか試すことはできます。

スポンサーリンク

Useful Blocksのインストール方法

Useful Blocksは無料版、PRO版のインストール方法が一部異なるので説明していきます。

無料版のインストール方法

  1. WordPressのプラグインページへ
  2. 「新規追加」をクリック
  3. 「Useful Blocks」で検索
  4. Useful Blocksを「今すぐインストール」
  5. Useful Blocksを「有効化」

無料版はこれで使えるようになります。

PRO版のインストール方法

PRO版のインストールには無料版のインストールが前もって必要です。

  1. Useful Blocksダウンロードページへ移動
  2. 有料版の「購入してダウンロード」をクリック
  3. クレジット情報を入力して購入手続き
  4. zipファイル(useful-blocks-pro.zip)を保存
  5. WordPressのプラグインページへ
  6. 「新規追加」をクリック
  7. 「プラグインをアップロード」をクリック
  8. 先ほどのzipファイルを選択
  9. 「今すぐインストール」をクリック
  10. 「有効化」をクリック

ダウンロードページをスクロールしていくと画像付きでPRO版の導入方法が載っているので、わからない場合はそちらも参考にインストールしてみてください。

ブロック追加プラグイン「Useful Blocks」:まとめ

Useful Blocksは無料版でも十分に使える性能かつ競合も少なくテーマに関係無く導入可能なので気に入る方は結構多いんじゃないかなと思いました。

またPRO版は今のところは1200円(機能追加に伴い価格が上がるようです)とリーズナブルかつ買い切りなので一度買ってさえおけば永久的に有料の機能を使い続けられます。

ご自身のサイトにちょっとした彩りを御求めの方は是非試して頂ければと思います!

コメント

タイトルとURLをコピーしました