WPプラグインUseful Blocksが侮れない!使い方を解説

今回はSWELL開発者、了さんとぽんひろさんが共同で開発された「Useful Blocks」について解説します!

Useful Blocksはコードが書けなくても、ブロックを選択するだけでおしゃれなブロックを配置することができしまう。

そんなプラグインです。

これもUseful Blocksだよ~
ーこの記事で分かることー
  • Useful Blocksがどんなプラグインなのか
  • Useful Blocksで使えるスタイル
  • Useful Blocksのインストールから購入方法

またUseful Blocksを知らない方が多かったので、Useful Blockでできること・導入方法も解説します。

オウスケ

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

目次

Useful Blocksとは?

Useful Blocks公式サイト



Useful Blocksは、ブログデザイナーぽんひろさん(@ponhiroo)・WordPressテーマSWELL開発者、了さん(@ddryo_loos)のお二人によって作られたプラグインです。

Useful Blocksはブログデザイナーぽんひろさんが公開していた、「コピペできるブログカスタマイズ」の内容をプラグインにしたもの。

コードを書くことができれば使えるのですが、コードを書けない人にとっては少し難易度がありました。

そんなコードが書けないという方に向けて作られた「Useful Blocks」は簡単にデザインを追加することができます。

オウスケ

僕もコードが苦手なので助かります…

「Useful Blocks」には無料版とPro版(有料)があり、値段は1,200と一回購入してしまえば複数サイトで制限がなく使用することが可能。

無料版
Pro版(1,200円)
  • カラーセット5色
  • 基本スタイル変更
  • 基本設定
  • カラーセット5色
  • 基本スタイル変更
  • 基本設定
  • アイコン設定
  • コンテンツを自由に配置(比較表)
  • 画像挿入(CVボタン)
  • 棒グラブ

上の表のように、無料版で出来ることもあります。

しかも、値段が1,200円とそこまで高くないのでPro版(有料)をオススメします。

Useful Blocksについて質問!

Useful Blocksの値段は??

無料版と有料版があり、有料版は1,200円(税込み)です。

支払い方法は?

クレジットカードのみです。

他のサイトでも利用できますか?

制限がないため、複数サイトでも使えます。

その他の質問はUsuful Blocks公式サイトよりどうぞ。

Useful Blocksでできることは?

Useful Blocks

Useful Blocksで出来ることは主に4つ!

できることが5つになりました!

  1. アイコンボックス
  2. CVボックス
  3. 比較ボックス
  4. 棒グラフ
  5. 評価グラフ ←NEW!

一つずつ画像付きで紹介しますね!

追記:1/16に評価グラフが追加されました!

ぽんひろさん

(なんか良い感じな予感がしますね…!!)

❶:アイコンボックス

1つ目のアイコンボックスはとても使いやすく、記事の随所で役立つはずです。

アイコンボックス①
  • これはUseful Blocksのリストです
  • リンゴ
  • ゴリラ
  • ラッパ
あ~~~
吹き出しの位置も変えられるのか…
アイコンボックス②

上のようなアイコンを4つまで設定することが可能。

またアイコンの位置も「左・右・左上・右上」と変更することができます。

実際の例として、リード文(冒頭文)で使っています。

この記事で分かること
  • Useful Blocksについて
  • Useful Blocksで出来ること
  • Useful Blocksのインストール方法

見出しを作るように、アイコンボックスもあっという間に作ることができます。

アイコンを使うときは背景に注意

アイコンボックスを使うときはアイコンの背景が透過でないと浮いてしまいます!

※アイコンの背景が浮いてみえます
違和あるね…

アイコンを背景透過したい方は、バナー工房という無料サイトで背景透過ができます。

バナー工房で背景透過

ワンクリックで背景透過できるのでぜひ使ってみてください。

>>バナー工房公サイトへアクセスする

❷:CVボックス

CVボックスとは以下のようなものです。

  • ブロックエディタに完全対応
  • 表時速度が高速かつ、デザインもおしゃれ
  • 他テーマからの移行も簡単
悩んでいる人

こんなボックスも作れてしまうのか…

僕はSWELLのレビュー記事にCVボックスを使っています。

アイコンボックスに比べたら使う頻度は少ないですね。

ただ、デフォルトの色など変更することが出来るため、使い方は無限にあるはずです。

❸:比較ボックス

【比較ボックス】は商品を比べて紹介するときに役立ちます。

商品を比べるときって、ついつい長文になってしまいますよね。

そんなときにズバっと表にまとめられるとインパクト大です。

例として、ブログ界隈で人気の「沈黙のWebライティング・新しい文書の教室」という本を比較してみます。

  「沈黙のWebライティング」
「新しい文章の教室」
  • SEOについて学べる
  • 検索エンジンに評価される記事を作れる
  • リズム感がある文章が書けるように
  • 記事を書くスピードが速くなる

ザっと作ってみましたがどうでしょうか。

オウスケ

文章の中にこのような表があると注目を集めることができるはずです。

Pro版(有料)を購入すると、商品リンクや画像の挿入をすることができるようになりました。

無料版ではリストしか使うことができないので注意です。

❹:棒グラフ

最後に棒グラフの機能について。

割とポップなので、使うサイトは限られるかなと思います。

こんな感じで使えます
リンゴ
75%
ゴリラ
50%
ラッパ
38%

デザインが苦手という方でも、カラーの色を変更して落ち着いた色にしては活用してみてはいかかでしょうか。

❺:評価グラフ

次回アップデートで「評価グラフ」が追加されます。

実際に使っている動画があるので下記ツイートをご覧ください。

ぽんひろさん

実際に使ってみた!

タイトル
低い
高い
タイトル
低い
高い

まだ使い方が難しいですがこんな感じになります。

タイトルやカラーも変更できますよ。

Useful Blocks無料版のインストール

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

オウスケ

では、インストール方法を説明していきます。

画像付きのインストール方法はこちらのUseful Blocks公式サイトからどうぞ。

❶WordPress設定→プラグイン→新規追加

❷検索バーより「Useful Blocks」で検索

  • 追記「ponhiro」と検索してもプラグインが表示されました

❸インストール→有効

オウスケ

無料版だけ使いたいという方はここで終わりです!

Useful BlocksPro版(有料)の購入・インストール方法

続いてPro版(有料)の購入・インストール方法を説明します。

>>購入・インストールはこちらから

  1. ダウンロードをクリック→クレジット情報を入力
  2. ダウンロードリンクから【zipファイル】をダウンロード
  3. WordPress管理画面のプラグイン→新規追加
  4. 画面上の【プラグインのアップロード】をクリック
  5. 先ほどダウンロードした【zipファイル】をアップロード
  6. 今すぐインストール→有効化
オウスケ

これで使えるようになりました!

Useful Blocksの設定画面

Useful Blocksがダウンロードできたら、WordPress管理画面の左に「Useful Blocksメニュー」が表示されるようになります。

このメニューからは【比較ボックス・棒グラフ・アイコンボックス・CVボックス】のカラーを変更することが可能。

Useful Blocksの管理画面

ぜひ、あなたのブログデザインに合う色をカスタマイズしてみてください!

まとめ:Useful Blocksで記事執筆を楽しもう!

Useful Blocks

Useful Blocksはどのテーマでも使うことができます

勘違いされる方が多いのですが、SWELL以外のテーマでも基本的に使えてしまうんです

まとめると…

  • ブログのテーマに関係なく使える
  • WordPressバージョン5.4以上
  • 更なるアップデートでスタイルが追加予定
  • Pro版(有料)は1,200円
  • 支払いはクレジットカードに限定
オウスケ

SWELLを使っている方には特にオススメです!

現在は4つのブロックですが、これからのアップデートでもっと使いやすくなるはずです。

  • 一度購入すれば制限なく使うことができます。
※お支払いはクレジットカードのみです

今回は以上です。

スポンサーリンク

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

SNSでシェアお願いします
URLをコピーする
URLをコピーしました!

質問はこちらへお願いします。

コメントする

目次
閉じる