「Useful Blocks」はブログを装飾するブロックプラグインです。
「ぽんひろ.com」×「SWELL」の共同開発で作られたプラグインで、アイコンボックスやグラフなど、5つのボックスが使えます。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
このプラグインは、SWELL以外のWPテーマでもご利用可能ですよ。
PRO版を使うとグラフやボックスなど設定項目が増え、よりオリジナルな装飾ができちゃいます♪
結論、かわいい&オリジナルな装飾をお求めならPRO版は購入して間違いなしのプラグインです。
「Useful Blocks PRO版」でできることを無料版と比較しながら紹介したいと思います。
Useful Blocks プラグインとは
![](https://tumuginote.com/wp-content/uploads/2022/10/Useful-Blocks-2.png)
![](https://tumuginote.com/wp-content/uploads/2022/10/Useful-Blocks-2.png)
Useful Blocks はこんなのあったらいいな♪がつまったプラグインです。
あなたのブログを遊びゴコロをくすぐる5つのブロックが使えるようになります。
- 比較ボックス
- CVボックス
- アイコンボックス
- 棒グラフ
- 評価グラフ
詳しい紹介
- グーテンベルクプラグイン
-
WordPress 5.0から搭載された直感的に記事の作成ができるエディター「グーテンベルク」。
Useful BlocksはWordPressグーテンベルク専用プラグインです。
- 記事作成に役立つ複数のブロック
-
「あったら便利」な記事作成に役立つブロックスタイルが利用できます。
直感的な操作で細かいデザインのアレンジも可能です。
- インストールするだけ!テーマ関係なく使える
-
HTML・CSSの知識がなくても簡単にスタイルの変更が可能です。
WordPressテーマ関係なくプラグインを入れるだけで簡単にご利用いただけます。
- 細かい色変更やアイコンの設定も PRO
-
各部位の細かい色変更やアイコンの設定、変更、画像の挿入などご自身のメディアに合わせてご利用可能です。
PRO版のみになりますが基本スタイルは無料版でも変更可能。
Useful Blocks PRO
Useful Blocksの機能が全部使える有料版。
一度購入すれば、今後機能が追加されてもそのまま利用可能です。
複数のメディアで使用可能なのもうれしい♪
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
2022年10月現在1,200円で販売されていますよ
無料版とPRO版の比較
基本設定以外はPRO版でしか使えません。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
アイコンボックスがかわいすぎて購入を決めました
無料版 | PRO版 | |
---|---|---|
カラーセット5色 | ||
基本スタイル変更 | ||
基本設定 | ||
部位カラー変更 | ||
アイコン設定 | ||
コンテンツ自由配置 (比較表) | ||
画像挿入 (CVボタン) | ||
パターン変更 (アイコンボックス) | ||
アイコン画像設定 (アイコンボックス) | ||
棒グラフ配置変更 (棒グラフ) | ||
棒グラフカスタムカラー (棒グラフ) |
では、各ブロックを紹介していきます♪
比較ボックスの使い方
比較ボックスのデフォルトは、配色センスがたまらなくかわいいです。
こんな感じに、比較したいものを紹介するときに便利なブロックです。
追加設定でカラーの変更とリストの下に線を引くことができます。
カラーの変更
![](https://tubunote.com/wp-content/uploads/2021/09/ub2.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub2.png)
リスト下に点線
![](https://tubunote.com/wp-content/uploads/2021/09/ub10.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub10.png)
こんな感じになります。
夏だけリストの下に点線をつけてみました。
PROでできること
リストのアイコン設定
追加設定でリストアイコンの変更ができます。
リストのアイコン設定
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
コンテンツ自由配置する
テキストも入れられます♪
ああああああああああああああああああああ
\こんにちはー/
![チャコ](https://tumuginote.com/wp-content/uploads/2022/02/9.png)
![チャコ](https://tumuginote.com/wp-content/uploads/2022/02/9.png)
使い方
![](https://tumuginote.com/wp-content/uploads/2022/10/ub1-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/10/ub1-1.png)
- 比較ボックス全体を選択する
- 追加設定の「コンテンツ制限の解除」をクリックする
これで、テキストも画像も入れることができますよ。
入力中はリストの点が残っていますが、実際は表示されません。
カラーを変更する
PRO版だと使っているカラーを好きな色に変えられます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub5.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub5.png)
WordPressの管理画面のサイドバーにあるUseful Blocksをクリック①
カラーセットのタブ②で、変更できます。
ちなみにカラーには「共通カラー」と「オリジナルカラー」が設定できます。
共通カラーを変更すると、すべてのブロックのカラーが変更されます。
そのほかに各ブロックごとにオリジナルカラーが設定できます。
比較ボックスのオリジナルカラー
![](https://tubunote.com/wp-content/uploads/2021/09/ub6.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub6.png)
CVボックスの使い方
わかりやすいように、文字やリンクだけ入れて、何も設定しないとこの状態です。
追加設定で背景・カラーなど変更できます。
背景
![](https://tubunote.com/wp-content/uploads/2021/09/ub7.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub7.png)
こんな感じになりますよ。
カラー
![](https://tubunote.com/wp-content/uploads/2021/09/ub8.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub8.png)
ボタン
![](https://tubunote.com/wp-content/uploads/2021/09/ub9.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub9.png)
ボタンを丸くしたり、ボタンの下にテキストリンクを入れる設定ができます。
強調の部分(必見の部分)の文字も変えたり、無しにすることもできます。
リストの下に点線を入れることができます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub10.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub10.png)
PROでできること
リストのアイコン設定
追加設定から変更できます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
強調にアイコンを入れる
追加設定からできます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub12.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub12.png)
補足にアイコンを入れる
追加設定から補足部分にアイコンを入れることができます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub13.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub13.png)
画像を入れる
使い方
![](https://tubunote.com/wp-content/uploads/2021/09/ub20.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub20.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub21.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub21.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub22.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub22.png)
追加設定から選びましょう。
サイズは4段階選べます。
サンプル
![](https://tumuginote.com/wp-content/uploads/2022/10/ub102-2.png)
![](https://tumuginote.com/wp-content/uploads/2022/10/ub102-2.png)
カラーを変更する
やり方は比較ボックスと同じです。
CVボックス オリジナルカラーはコチラです。
![](https://tubunote.com/wp-content/uploads/2021/09/ub14.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub14.png)
アイコンボックスの使い方
イチオシのアイコンボックス。
アイコンボックスに一目ぼれしたばかりに、購入したといっても過言ではありません。
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749767-1_transparent-1.png)
かわいいからさっそく見てね♪
可愛さをアピールしましたが、PRO版の機能が多いです。
PROでできること
アイコンの位置とふきだしスタイルの選択
追加設定からできます。
サンプルは先に紹介したアイコンボックスで確認くださいませ。
![](https://tubunote.com/wp-content/uploads/2021/09/ub15.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub15.png)
リストのアイコン設定
追加設定からできます。
サンプルは先に紹介したアイコンボックスで確認くださいませ。
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub1-1.png)
カラーを変更する
やり方は比較ボックスと同じです。
アイコンボックスのオリジナルカラーはコチラです。
![](https://tubunote.com/wp-content/uploads/2021/09/ub16.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub16.png)
アイコン画像設定する
PRO版のみアイコン画像を4つまで登録して使うことが可能です。
![](https://tumuginote.com/wp-content/uploads/2022/10/ub100.jpeg)
![](https://tumuginote.com/wp-content/uploads/2022/10/ub100.jpeg)
画像を一つ選択するごとに、下の「保存」を押します。
登録していない画像も、ブロックエディターで選択することができますよ。
棒グラフの使い方
棒グラフは比較記事などにとっても便利ですよね。
無料版の棒グラフは下記の設定が可能です。
- グラフの色を薄くする
- タイトルの非表示
- 背景色の非表示
タイトルを非表示にする設定
背景色を無しにする設定
PROでできること
PRO版でできることはこちら。
オリジナルカラーの設定などは、ワードプレスの管理画面で行っておきます。
あとは、追加設定から変更できますよ。
- グラフの右側の色の部分を非表示にする
- 左側のラベルの位置を変更する
- 右側のラベルの位置を変更する
- グラフの色を一つづつ変える
- グラフの色をカスタムカラーにする
- オリジナルカラーの設定をする
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
![](https://tumuginote.com/wp-content/uploads/2022/02/S__21749766-1_transparent.png)
PRO版だとできることが増えますね
評価グラフの使い方
無料版の評価グラフはこんな感じです。
無料でできるのは、タイトルや「弱い」などの部分を未入力で表示させないことです。
カラーセットの変更も追加設定からできます。
![](https://tubunote.com/wp-content/uploads/2021/09/ub18.png)
![](https://tubunote.com/wp-content/uploads/2021/09/ub18.png)
PROでできること
PRO版でできることはこちら。
オリジナルカラーの設定などは、ワードプレスの管理画面で行っておきます。
あとは、追加設定から変更できますよ。
- 段階数を3段階または5段階に変更できます
- 形状をアイコンに設定できます*1(Font Awesomeから好きなアイコンを設定できます)
- 右側のラベルの位置を変更する
- グラフの色を一つづつ変える
- グラフの色をカスタムカラーにする
- オリジナルカラーの設定をする
*1.Font Awesomeから好きなアイコンを設定できます。
アイコンのclass名(fas fa-paw)を変更してください。
まとめ
Useful Blocks PRO版を購入し、全ブロックを使ってみました。
無料版でも楽しめますが、PRO版だとかゆいところに手が届きます♪
PRO版との比較を、おさらいしてみましょう。
無料版 | PRO版 | |
---|---|---|
カラーセット5色 | ||
基本スタイル変更 | ||
基本設定 | ||
部位カラー変更 | ||
アイコン設定 | ||
コンテンツ自由配置 (比較表) | ||
画像挿入 (CVボタン) | ||
パターン変更 (アイコンボックス) | ||
アイコン画像設定 (アイコンボックス) | ||
棒グラフ配置変更 (棒グラフ) | ||
棒グラフカスタムカラー (棒グラフ) |
PRO版があれば記事が楽しく&かわいくかけること間違いなしですね。
【Useful Blocks PRO版】導入を検討されているなら、購入して間違いないプラグインですよ♪
コメント