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