ぽんひろさんのカスタマイズがUseful Blocksプラグインで超簡単
「Useful Blocks」はSWELL開発者の了さんとWebデザイナーのぽんひろさんが共同開発したプラグインです。
（とは言っても、SWELL専用のプラグインじゃないです。テーマを選ばず使えます！）
夢のコラボですねぇ。
WEB業界でぴかぴかセンスが光るおふたり。
考える間もなくインストールして使い始めました。
やっぱりイイわぁ！
私はぽんひろさんのデザインセンスの大ファンです。
サムネイルを見ているだけで楽しい！ そんなサイト、なかなかないでしょ。
Useful Blocksは元々ぽんひろさんが公開されている「コピペでできるブログカスタマイズ」内の4つ（現在）です。
HTMLとCSSのコピペで実現できるのですが、はやり結構な手間。HTMLやCSSがわからない方には結構ツライ。
ブロック化された今回のプラグインはものすごく簡単で自由自在です。
自由自在というのはPRO版を購入するのが前提です（わずか980円）。
1200円に値上がりしました。
一度購入すれば以降制限なく使えるので、早く購入した方がお得ですよ～ぉ！
- 部位カラー変更
- アイコン設定
- コンテンツ自由配置（比較表）
- 画像挿入（CVボタン）
自由自在の要素はこのPRO版で追加される部分にあります。
「Useful Blocks」は本当にユースフル！
リリースされた時は「CVボックス」「比較ボックス」の2機能でしたが「アイコンボックス」「棒グラフ」が加わり現在4つ。
最初の2つでもPRO版を買う価値あり！と思っていたんですが、すごい機能が追加されてお得感いっぱい、いや表現の幅が広がります。
Useful Blocksのアップデートで予告通り棒グラフの機能が追加されました。
説明ページにジャンプするとセンス抜群のわかりやすい説明があります。
なので、私のこの記事は不要な気もしますが、書きたいので書きます（いつものスタイル）。
それはともかく、ブログ運営でマネタイズを考えている場合は威力を発揮しますねぇ。
もちろん自力で制作できますが、自然な印象で訴求するのは結構難しいです。
色や項目の選定、ページへのなじみ加減、好印象を残すデザイン、そして何より分かりやすさ。
それを編集画面でプレビューしながらあっさり作れるので、ものすごく時短になります。
WordPressのデザインでテーマを買うように、購入した機能（プラグイン）を元にゴニョゴニョ自分好みに変えた方が得策と思うのです。
インストールと使い方
Useful Blocks無料版のインストール
通常のプラグインのインストールと同じやり方です。
- プラグイン → 新規追加
- 検索窓に「Useful Blocks」と入力
- 選択 → インストール
- 有効化
Useful Blocks PRO版 購入からインストール
- 「購入してダウンロード」をクリック
- クレジットカード情報を入れる
- 購入後のページ下部「ここをクリック」でダウンロード
- プラグイン → 新規追加
- 「プラグインのアップロード」をクリック
- ダウンロードしたZIPファイルをアップロード
- 「今すぐインストール」
- 有効化
Useful Blocks PRO版 設定画面
Useful Blocks無料版を有効化すると左側の管理メニューに「Useful Blocks」のメニューが追加されます。
メニュー「Useful Blocks」をクリックすると、「CVボックス」と「比較ボックス」の基本カラーが一覧（だけ）できます。
PRO版にアップグレードするとそれらを自由に変更できるようになります。
その他のPRO版オプションはブロックを呼び出した時、サイドの「ブロック」にそれそれ表示されます。
Useful Blocksの使い方
他のブロック同様、ブロックメニューに追加されるので、それを呼び出すだけです。
呼び出したボックスを選択し、右のブロック設定画面で編集。
元デザインを呼び出してポチポチと選んでいくだけで、おしゃれで訴求力満点のボックスができます。
自然なのに目を引く「CVボックス」
CVボックスを呼び出すと、下記が挿入されます。
CVボックスを実際に作ってみた！
実際のCVボックスです。オンマウスやクリックで動作確認できます。
下記はデフォルトのカラーです（PRO版のカラー設定をしていない状態）。
すごくキレイな色の組み合わせなので、カラーはこのまま使おうと思っています。
商品やサービスの違いを瞬時に伝える「比較ボックス」
商品やサービスの内容を比較し、印象づけるのに表組はとても効果的です。
文章でダラダラ書いてもあまり読まれないですが、表にまとめるとパッと目が追ってしまいます。
それが比較表になっていたら、自然と読み比べるという流れに…。
無料版は表の内容がリストのみですが、PRO版だと自由にブロックを配置できます。
これ、いいですねぇ。
画像やボタンなどを配置したら比較ブックスが比較CVボックスに化けますから…。
すっごく可愛い「アイコンボックス」
3つ目は「アイコンボックス」でした。超かわいい！
ブロックを呼び出せばすぐ直感的にやり方がわかるので、説明は割愛します。
背景透過のイラスト
アイコンは背景透過でないと、画像が浮きます（白背景の枠が見えるのはちょっとねぇ）。
手持ちの画像を切り抜く（背景透過）なら「removebg」が便利！
棒グラフ
こんな棒グラフがあっという間に作れます。
下記のグラフは棒の色を変えただけの一番単純な表現です。
挿入した棒グラフを選択すると右側にメニューが現れます。下記はグラフ全体を選択している時の画面です。
棒グラフのの1つを選択するとカラーと割合の設定ができます。
Useful Blocksの詳細
- WordPressのバージョン5.4以上
- どんなテーマでも使える
- 今後もスタイルを追加予定
- 使用メディアに制限なし
「一粒で二度おいしい」どころじゃない - サポート用のSlackコミュニティに参加できる
- 機能追加にあわせて料金を変更
最初に買った方がお得！ - PRO版は980円
- 支払いはクレジットカードのみ
