ぽんひろさんのあのカスタマイズがUseful Blocksプラグインで超簡単

今日、3つ目のブロック（アイコンボックス）が追加されました。
SWELL同様、怒涛の機能追加となるのかしら？

「Useful Blocks」はSWELL開発者の了さんとWebデザイナーのぽんひろさんが共同開発したプラグインです。

夢のコラボですねぇ。

プラグイン「Useful Blocks」

WEB業界でぴかぴかセンスが光るおふたり。

考える間もなくインストールして使い始めました。

やっぱりイイわぁ！

Useful Blocksは元々ぽんひろさんが公開されている「コピペでできるブログカスタマイズ」内の3つ（現在）です。

HTMLとCSSのコピペで実現できるのですが、はやり結構な手間。HTMLやCSSがわからない方には結構ツライ。

ブロック化された今回のプラグインはものすごく簡単で自由自在です。

自由自在というのはPRO版を購入するのが前提です（わずか980円）。

自由自在の要素はこのPRO版で追加される部分にあります。

この記事はすべて「Useful Blocks PRO版」の内容です。

「Useful Blocks」は本当にユースフル！

今回提供されているのは「CVボックス」「比較ボックス」「アイコンボックス」です。

説明ページにジャンプするとセンス抜群のわかりやすい説明があります。

なので、私のこの記事は不要な気もしますが、書きたいので書きます（いつものスタイル）。

それはともかく、ブログ運営でマネタイズを考えている場合は「CVボックス」と「比較ボックス」は威力を発揮します。

もちろん自力で制作できますが、自然な印象で訴求するのは結構難しいです。

色や項目の選定、ページへのなじみ加減、好印象を残すデザイン、そして何より分かりやすさ。

それを編集画面であっさりプレビューしながら作れるので、ものすごく時短になります。

WordPressのデザインでテーマを買うように、購入した機能（プラグイン）を元にゴニョゴニョ自分好みに変えた方が得策と思うのです。

インストールと使い方

Useful Blocks無料版のインストール

通常のプラグインのインストールと同じやり方です。

1. プラグイン → 新規追加
2. 検索窓に「Useful Blocks」と入力
3. 選択 → インストール
4. 有効化

PRO版を使う際も無料版の有効化が必要です。

Useful Blocks PRO版 購入からインストール

ダウンロードページ

1. 「購入してダウンロード」をクリック
2. クレジットカード情報を入れる
3. 購入後のページ下部「ここをクリック」でダウンロード
4. プラグイン → 新規追加
5. 「プラグインのアップロード」をクリック
6. ダウンロードしたZIPファイルをアップロード
7. 「今すぐインストール」
8. 有効化

Useful Blocks PRO版 設定画面

Useful Blocks無料版を有効化すると左側の管理メニューに「Useful Blocks」のメニューが追加されます。

メニュー「Useful Blocks」をクリックすると、「CVボックス」と「比較ボックス」の基本カラーが一覧（だけ）できます。

PRO版にアップグレードするとそれらを自由に変更できるようになります。

その他のPRO版オプションはブロックを呼び出した時、サイドの「ブロック」にそれそれ表示されます。

Useful Blocksの使い方

他のブロック同様、ブロックメニューに追加されるので、それを呼び出すだけです。

元デザインを呼び出してポチポチと選んでいくだけで、おしゃれで訴求力満点のボックスができます。

すっごく可愛い「アイコンボックス」

3つ目は「アイコンボックス」でした。超かわいい！

ブロックを呼び出せばすぐ直感的にやり方がわかるので、説明は割愛します。

アイコンは背景透過でないと、画像が浮きます（白背景の枠が見えるのはちょっとねぇ）。

自然なのに目を引く「CVボックス」

CVボックスを呼び出すと、下記が挿入されます。

画像、コピー、ボタンなどそれぞれの設定

CVボックスを実際に作ってみた！

実際のCVボックスです。オンマウスやクリックで動作確認できます。

下記はデフォルトのカラーです（PRO版のカラー設定をしていない状態）。

すごくキレイな色の組み合わせなので、カラーはこのまま使おうと思っています。

商品やサービスの違いを瞬時に伝える「比較ボックス」

商品やサービスの内容を比較し、印象づけるのに表組はとても効果的です。

文章でダラダラ書いてもあまり読まれないですが、表にまとめるとパッと目が追ってしまいます。

それが比較表になっていたら、自然と読み比べるという流れに…。

無料版は表の内容がリストのみですが、PRO版だと自由にブロックを配置できます。

これ、いいですねぇ。

画像やボタンなどを配置したら比較ブックスが比較CVボックスに化けますから…。

Useful Blocksの詳細

• WordPressのバージョン5.4以上
• どんなテーマでも使える
• 今後もスタイルを追加予定