初心者さんUseful Blocksの使い方がわからない
このような疑問にお答えします。
Useful Blocksの使い方はとてもかんたん。
投稿画面で呼び出し、好きなボックスやグラフを選ぶだけです。
まずUseful Blocksの概要を解説し、次に使い方や導入方法を紹介。
この記事を読めば、Useful Blocksを自由自在に使えるようになりますよ！
SWELLのおすすめプラグインはこちら
\いますぐダウンロード/
Useful Blocksとは
| プラグイン名 | Useful Blocks |
|---|---|
| 作成者 | ぽんひろ（デザイン） 了（開発） |
| 説明 | WordPress「グーテンベルク」専用プラグイン |
| 対応テーマ | すべてのWordPressテーマ |
| 推奨動作環境 | WordPressバージョン5.4以上 |
| サポート | あり |
Useful Blocksは有名ウェブデザイナー「ぽんひろ氏」と、SWELL開発者の「了さん」が共同開発しています。
特徴
Useful Blocksの特徴は4つあります。
- ブロックエディタ（Gutenberg）専用プラグイン
-
Useful Blocksはワードプレスの新エディタ「グーテンベルク」専用です。
- 豊富なブロックスタイル
-
「比較ボックス」や「棒グラフ」など、かゆいところに手が届く便利なブロックがあります。
使用例
- すべてのWordPressテーマで使える
-
ブロックエディタに対応していれば、すべてのワードプレステーマで利用可能です。
- PRO版（1,200円/税込）は細かなデザイン設定もOK
-
各部位のカラー変更、画像の挿入など細かい設定が可能。
無料版とPRO版の比較
無料版とPRO版の違いは以下のとおりです。
| 無料 | PRO | |
|---|---|---|
| カラーセット5色 | ||
| 基本スタイル変更 | ||
| 基本設定 | ||
| 部位カラー変更 | ||
| アイコン設定 | ||
| コンテンツ自由配置 （比較表） | ||
| 画像挿入 （CVボタン） | ||
| パターン変更 （アイコンボックス） | ||
| アイコン画像設定 （アイコンボックス） | ||
| 棒グラフ配置変更 （棒グラフ） | ||
| 棒グラフカスタムカラー （棒グラフ） |
Useful Blocksの使い方
Useful Blocksの使い方を解説します。
PRO版｜スタイル設定
Useful Blocksの「PRO版」を購入すると、スタイル設定を自由に変更可能。
有料（PRO版）にすると「Useful Blocks」の設定画面下に【変更を保存】が表示されます。
無料版には表示されません。
投稿画面で呼び出し
投稿画面で使うときはブロックメニューから呼び出します。
右サイドバーで挿入したボックス、グラフの編集をすれば完了です。
Useful Blocksの導入方法
Useful Blocksのダウンロード、インストール方法です。
無料版
WordPressのダッシュボードを開きます。
PRO版
「ダッシュボード」>「プラグイン」>「インストール済みプラグイン」
無料版が「有効化」されていないとプロ版を利用できません。
Useful Blocksのウェブサイトに遷移したら「ダウンロード」をクリック。
クレジットカード情報を入力し「1,200円を支払う」をクリック。
無料版、PRO版どちらも有効化されいればOK
Useful Blocksのスタイル一覧
Useful Blocksのスタイル一覧を解説します。
比較ボックス
Useful Blocksの比較ボックスは、配色5パターンから選択可能。
PRO版
PRO版では右サイドバーに機能が2つ追加されます。
- コンテンツ自由配置
-
右サイドバー【コンテンツ制限の解除】の「ブロックを自由に配置できるようにする」をオンにすればOK
和食中華和食は、カラフルな料理と優れた技術で、美味しさと楽しさがいっぱい。日本の素晴らしい食文化を味わおう！
中華料理は濃厚でコクがあり、さまざまな味が楽しめるよ。炒め物や麺、点心など、バラエティ豊かな料理だよ！
画像やテキストなど、リスト以外のコンテンツを入力可能。
- リストアイコン変更
-
リストを選択し右サイドバーの「アイコン設定」からどうぞ。
リスト項目に下線をつけたいときは「リストの下に点線をつける」をオン。
和食中華リストアイコンのパターンを変更できます。
PRO版｜カラー変更
PRO版では「セパレート」の配色が変更可能。
「ダッシュボード」>「Useful Blocks」>「カラーセット」
CVボックス
「無料版」のCVボックスは以下のようなデザインです。
スタイル
背景
カラーセット
リンクの入れ方
リンクボタンをクリックすると、右サイドバーにリンク設定が表示されます。
PRO版
PRO版では右サイドバーに機能が5つ追加されます。
- 強調にアイコンを入れる
-
右サイドバー【ボタン設定】からアイコン3種類より選択可能。
- ボタン右端のアイコンを変更
-
右サイドバー【ボタン設定】の「ボタンの右端に表示するアイコン」から選択してください。
- リストのアイコンを変える
-
リストをクリックし、右サイドバー【Usefulリスト】の「アイコン設定」から選択。
「リストの下に点線をつける」もお好みでどうぞ。
- 補足にアイコンを入れる
-
補足をクリックし、右サイドバー【CV テキスト】の「アイコン設定」から選択可能。
「スタイル設定」もデザインにあわせてご利用ください。
国内No.1のWordPressテーマ - 画像を入れる
-
画像をアップロードすると、右サイドバーに【CV画像】が表示されます。
ブロック下の余白量、ALT、画像サイズが設定可能。
国内人気 No.1のWordPressテーマ
アイコンボックス
アイコンボックスは配色5パターンから選択可能。
PRO版
PRO版では右サイドバーに機能が3つ追加されます。
- アイコンセット
-
アイコンは4つ登録可能。
登録は「ダッシュボード」>「Useful Blocks」からどうぞ。
- アイコンの位置
-
右サイドバー「アイコンの位置」から4パターン選択可能。
「上下中央に合わせる」はオンにしておくといいですよ。
- ふきだしスタイル
-
ふきだしスタイルは2種類から選べます。
PRO版｜カラー変更
PRO版ではオリジナルカラーを変更可能。
「ダッシュボード」>「Useful Blocks」>「カラーセット」
PRO版｜アイコン画像設定
アイコンを4つ登録できます。
「ダッシュボード」>「Useful Blocks」>「Icon image」
画像一つをアップロードしたら下部の「変更を保存」をクリック。
4つ同時にアップロードはできません。
棒グラフ
棒グラフも配色5パターンから選択可能。
タイトル設定
グラフ設定
グラフの色
PRO版
PRO版では右サイドバーに機能が4つ追加されます。
- グラフの右背景非表示
-
「グラフ右側に色を付ける」のオンオフが可能です。
- 左側のラベル位置変更
-
「左側のラベル位置変更」を上部、内部から選択可能。
- 右側のラベル位置変更
-
「右側のラベルの位置」も左寄せ、右寄せから選べます。
- 棒グラフの色変更（管理画面で4色設定可能）
-
棒グラフをクリックすると色を変更できます。
4色の変更は「ダッシュボード」>「Useful Blocks」からどうぞ。
PRO版｜カラー変更
オリジナルカラー、グラフカラーを変更できます。
「ダッシュボード」>「Useful Blocks」>「カラーセット」
評価グラフ
評価グラフも配色5パターンから選択可能。
PRO版
PRO版では右サイドバーに機能が3つ追加されます。
- 段階数変更
-
グラフの段階数を3、5より選べます。
- アクティブポイントの形状変更
-
アクティブポイントの形状を3種類から選択可能です。
1,000円
PRO版｜カラー変更
PRO版ではオリジナルカラーを変更可能。
「ダッシュボード」>「Useful Blocks」>「カラーセット」
まとめ｜Useful Blocksの使い方
今回は「Useful Blocks」の使い方をまとめました。
ポップでかわいいブロックばかりですね。
今後もスタイルを追加していくそうなので楽しみ！
気になる方は、まず無料版をダウンロードしてみてはいかがでしょうか。
\いますぐダウンロード/
あわせて読みたい
