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

Useful Blocks

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

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

夢のコラボですねぇ。

プラグイン「Useful Blocks」

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

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

やっぱりイイわぁ!

私はぽんひろさんのデザインセンスの大ファンです。

サムネイルを見ているだけで楽しい! そんなサイト、なかなかないでしょ。

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

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

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

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

PRO版のみの機能
  • 部位カラー変更
  • アイコン設定
  • コンテンツ自由配置(比較表)
  • 画像挿入(CVボタン)

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

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

目次

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

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

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

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

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

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版にアップグレードするとそれらを自由に変更できるようになります。

CVボックスのカラー設定画面
Useful Blocksの設定画面

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

Useful Blocksの使い方

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

STEP
ブロックメニューから呼び出す
Useful Blocks
STEP
元デザインを編集

呼び出したボックスを選択し、右のブロック設定画面で編集。

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

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

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

アイコンボックス紹介
  • これは楽しいなぁ~
  • Useful Blocks中で一番お気に入り
  • アイコンはボックス上とボックス内の左右
  • 可愛いアイコンが目を引きます
  • 思わずリストを読んでしまう
  • 多用しそうで怖い
こんなに楽しいアイコンボックス
こんなに楽しいアイコンボックス
アイコンボックス紹介
  • これは楽しいなぁ~
  • Useful Blocks中で一番お気に入り
  • アイコンはボックス上とボックス内の左右
  • 可愛いアイコンが目を引きます
  • 思わずリストを読んでしまう
  • 多用しそうで怖い

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

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

背景透過の無料素材イラストは「イラストレイン」がおススメ。

可愛いイラストがどっさり。

イラストレイン

イラストレイン

手持ちの画像を切り抜く(背景透過)なら「removebg」が便利!

removebg

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

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

Useful Blocks CVボックス

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

Useful Blocks CVボックス ボタン設定項目
設定できる項目

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

テーマ「SWELL」
  • SWELLブロックエディタは最高に使いやすい
  • 高速表示&メッチャおしゃれ
  • アップデートで機能がどんどん追加される
テーマを買ったら予想外のオマケの嵐!
SWELLにしてから記事がどんどん書ける

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

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

Useful Blocks CVボックス オレンジ
丸ボタン・リンク先ナシ
Useful Blocks CVボックス ピンク
丸ボタン・白抜き矢印
Useful Blocks CVボックス グリーン
テキスト矢印・角丸ボタン
Useful Blocks CVボックス ブルー
テキストコメントマーク・角丸ボタン・電球マーク

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

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

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

比較ボックス

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

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

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

これ、いいですねぇ。

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

Useful Blocks 比較ボックス

Useful Blocksの詳細

  • WordPressのバージョン5.4以上
  • どんなテーマでも使える
  • 今後もスタイルを追加予定
PRO版
  • 使用メディアに制限なし
    「一粒で二度おいしい」どころじゃない
  • サポート用のSlackコミュニティに参加できる
  • 機能追加にあわせて料金を変更
    最初に買った方がお得!
  • PRO版は980円
  • 支払いはクレジットカードのみ
目次
閉じる