【プラグイン】Useful Blocks の使い方|無料版と有料版との違いを解説

「Useful Blocks の使い方が知りたい。」
「無料版と有料版との違いを詳しく知りたい。」

このような疑問にお答えします。

前からずっと欲しくて買うタイミングを逃していたWordPressのプラグインUseful Blocks!

先日、無料版を試した後に有料版をとうとう購入しました。

今回、実際に使用した体験をもとに、WordPressのプラグイン『Useful Blocks の使い方』を画像付きで分かりやすく解説しています。

Useful Blocks があまりにも良かったので、勢いで記事を作成しました!

この記事を読むと分かること
  • Useful Blocks の使い方
  • 無料版と有料版との違い
  • Useful Blocksとはそもそも何か
  • ダウンロード・購入の手順
目次

Useful Blocks の使い方|無料版、有料版との違い

公式サイト:Useful Blocks | 痒いところに手がとどくWordPressブロックプラグイン

Useful Blocks の使いを解説していきます。

ダウンロードの手順は記事後半。

STEP
ブロックエディターを開く

「+」ボタンをクリック、ブロックエディターを開く

STEP
USEFUL BLOCKS から選択

「USEFUL BLOCKS」から使いたいをブロックを選ぶ

無料版と有料版との違いを比べながら、それぞれのブロックを紹介していきます。

CV ボックスの使い方

CV ボックスでは、外部リンクなどへの誘導に使うボックスが簡単に作成可能です。

色は5色から選択可能、背景も3つから選べます。

カラフルで視認性がいいので、サイトの回遊率が上がりSEOの効果があると感じました。

CV ボックス【無料版】

Useful Blocks CVボックス選択画面
CVボックスの基本設定
  • リスト作成可能
例1 空白にしたり、ボーダーにできます
  • リスト
  • ↑リストの下に点線もつけられます。
例2 ↑ボタンは丸くしたり、ボタン下にテキストリンクも表示可能

CV ボックス【有料版】

無料版だと選べるアイコンがひとつだけです。

Pro版だと、CV ボックスのアイコンを数種類から選択可能です。

Useful Blocks CVボックスアイコンの設定
Usefulリストのアイコン
Useful Blocks CVボックスアイコンの設定
CVボタンのアイコン
Useful Blocks CVボックスアイコンの設定
CVテキストのアイコン

Pro版活用例

  • 質問
  • お仕事の相談
営業時間:10:00〜17:00

Pro版は、アイコンを選べることでよりデザインに個性を出すことができます。

比較ボックスの使い方

比較ボックスを使うと、読者がより商品・サービスの比較がしやすいです。

WordPress標準の表よりもかなり見やすいです!

比較ボックス【無料版】

Useful Blocks 比較ボックス
A社
B社

リストが表示されるので、箇条書きを使うと比較に便利です。

比較ボックス【有料版】

有料版でできること
  • リスト意外にも自由なコンテンツの配置が可能
  • 数種類のアイコンを選択可能
Useful Blocks 比較ボックス コンテンツ制限の解除
コンテンツ制限の解除
比較ボックスのアイコン

Pro版活用例

比較ボックス
自由度が高い

Pro版だとリスト以外にテキストを入力したり

ふきだしも配置可能。

  • 画像も挿入できます

アイコンボックスの使い方

アイコンボックスを使うと、ボックス内に画像とテキストどちらも表示が可能です。

記事内にプロフィールを入れたい時に使えます!

アイコンボックス【無料版】

Useful Blocks アイコンボックス
アイコンボックス
自由テキスト

自由テキスト

自由テキスト

活用例

この記事のライター

当サイトの助手でありライター。ブログ歴1年。3サイト運営しながらライティングやSEO対策について日々研究しています。

画像変更可能

アイコンボックス【有料版】

有料版でできること
  • 4種類のアイコンを登録して簡単に呼び出せる
  • アイコンの配置を変更可能
Useful Blocks アイコンボックス Pro版
アイコンセット
Pro版はこんなこともできます
アイコンボックスPro版の例①

ボックス上に画像を表示可能!

アイコンボックスPro版の例②
  • ここにUsefulリストを表示可能。
左に配置も可能!

棒グラフの使い方

棒グラフを使うことで、より分かりやすい文章を作成することができます。

数字で根拠を示せるのが便利です。

棒グラフ【無料版】

Useful Blocks 棒グラフ
棒グラフ
自由テキスト
自由テキスト
自由テキスト
自由テキスト
自由テキスト
自由テキスト
自由テキスト

活用例

〜の調査 
グラフの割合(%)を調整可能
色を薄く表示することも可能
背景色を追加可能
グラフを追加可能

棒グラフ【有料版】

Useful Blocks 棒グラフ Pro版

Pro版活用例

棒グラフPro版の例
グラフ右側の色を消せる
ラベルの位置を「左寄せ」可能
グラフの色を好きに選択

評価グラフ

評価グラフを使うことで、読者が商品やサービスの特徴を視覚的に理解できます。

ランキング記事の作成に便利です。

評価グラフ【無料版】

Useful Blocks 評価グラフ
グラフ設定
自由テキスト
自由テキスト
自由テキスト

活用例

価格
安い
高い
スペック
低い
高い

評価グラフ【有料版】

Useful Blocks 評価グラフ Pro版

Pro版活用例

評価グラフPro版
3段階表示可能
画像に変更可能
アイコンも表示可能

Useful Blocks ダウンロードの手順

Useful Blocks ダウンロードの手順を紹介します。

有料で使う場合も無料版のダウンロードが必要です。

無料版のダウンロード手順

STEP
ダウンロード
Useful Blocks ダウンロード画面

\ 無料でダウンロード/

Useful Blocksを ダウンロード

STEP
プラグインの画面を開く

プラグインをクリック、「新規追加」をクリック

STEP
プラグインをアップロード

プラグインをアップロードをクリック

STEP
ファイルを選択しインストール

ファイルを選択、もしくはzipファイルをドラッグし「今すぐインストール」をクリック

STEP
プラグインを有効化

「プラグインを有効化」をクリック

以上でインストール完了です。お疲れ様でした!

有料版のダウンロード手順

STEP
無料版をインストール、有効化の確認

\ 無料でダウンロード/

※有料版でも無料版のインストールが必要です

STEP
購入ページへ移動
Useful Blocks ダウンロード画面

\ 購入ページ/

公式サイトの「購入してダウンロード」をクリック

STEP
クレジットカード情報などを入力、購入

必要事項を入力

①名前
②メールアドレス
③クレジットカードのカード番号
④「¥1,200を支払う」をクリック

STEP
ダウンロードリンクからZIPファイルをダウンロード
ここをクリックからダウンロード
STEP
プラグイン新規追加を選択
STEP
画面上部のプラグインをアップロードを選択
STEP
ダウンロードしたZIPファイルを選択

ファイルを選択、もしくはzipファイルをドラッグし「今すぐインストール」をクリック

STEP
プラグインを有効化を選択して完了

無料版とPRO版がどちらも有効化されていることを確認!

Useful Blocks とは|動作環境など

プラグイン名Useful Blocks
動作環境WordPressのバージョン4.5以上
価格無料版 0円/有料版 1200円(税込)
支払い方法クレジットカード/デビットカードのみ
出典:Useful Blocks
特徴
有料版について
  • WordPressグーテンベルク専用
  • 直感的な操作で細かいアレンジ
  • HTML・CSSの知識は必要なし
  • 一度購入すれば制限なく利用可能
  • 機能追加に合わせて料金を変更していく予定との記載

Useful Blocks は、ぽんひろさんと了さんが共同で制作したWordPressグーテンベルク専用のプラグインです。

ぽんひろさんがデザイン、了さんが開発。

無料でも使えますが、一部制限があります。

Useful Blocks についてよくある質問

SWELLじゃなくても使える?

基本的にはどのWordPressテーマでも使えます。

Useful Blocks のアフィリエイトはある?

公式サイトには記載がありません。

検索しましたがなさそうです。

複数メディアで利用できる?

可能です。

サポートはある?

購入時にSlackコミュニティーのリンクが送られてきます。

参照:https://ponhiro.com/useful-blocks/

最後まで読んで頂き、誠にありがとうございました。

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

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