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

4

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

（とは言っても、SWELL専用のプラグインじゃないです。テーマを選ばず使えます！）

夢のコラボですねぇ。

プラグイン「Useful Blocks」

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

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

やっぱりイイわぁ！

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

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

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

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

1200円に値上がりしました。
一度購入すれば以降制限なく使えるので、早く購入した方がお得ですよ～ぉ！

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

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

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

リリースされた時は「CVボックス」「比較ボックス」の2機能でしたが「アイコンボックス」「棒グラフ」が加わり現在4つ。

最初の2つでもPRO版を買う価値あり！と思っていたんですが、すごい機能が追加されてお得感いっぱい、いや表現の幅が広がります。

4つ目のブロック追加が間近なようです。メッチャ楽しみ！
（2020.9.30追記）

Useful Blocksの新ブロック開発中です👏

神ブロックになる予感…🤤 pic.twitter.com/dl0WiRYr0I

— 了🌊SWELL開発者 (@ddryo_loos) September 30, 2020

Useful Blocksのアップデートで予告通り棒グラフの機能が追加されました。

という具合に、機能追加のアップデートが期待できるプラグインです。

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

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

それはともかく、ブログ運営でマネタイズを考えている場合は威力を発揮しますねぇ。

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

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

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

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の使い方

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

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

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

CVボックス

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

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

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

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

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

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

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

比較ボックス

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

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

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

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

これ、いいですねぇ。

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

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

アイコンボックス

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

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

背景透過のイラスト

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

棒グラフ

Useful Blocks 棒グラフ

こんな棒グラフがあっという間に作れます。

下記のグラフは棒の色を変えただけの一番単純な表現です。

挿入した棒グラフを選択すると右側にメニューが現れます。下記はグラフ全体を選択している時の画面です。

棒グラフのの1つを選択するとカラーと割合の設定ができます。

Useful Blocksの詳細

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

4