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

Useful Blocks

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

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

夢のコラボですねぇ。

プラグイン「Useful Blocks」

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

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

やっぱりイイわぁ!

テーマSWELLの素晴らしさはこのサイト運営ですごくわかっています。

テーマSWELLについて書いた記事はこちら

SWELL

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

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

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

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

ブロック化された今回のプラグインはものすごく簡単に使えます。

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

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

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

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

記事の内容(もくじ)

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

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

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

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

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

全てがものすごく可愛いぽんひろさんのページ。

自サイトに取り入れたいと思うブロガーも多いと思います。私もその一人!

色や項目の選定、ページへのなじみ加減、好みのデザイン、編集作業までも楽しい嬉しいそんなプラグインです。

Useful Blocks 5つのデザイン

CVボックス

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版だと自由にブロックを配置できます。

これ、いいですねぇ。

Useful Blocks 比較ボックス

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

比較ボックスの横幅を広く

ただ、比較ボックスの横幅が600pxにしていされているのがちょっと残念でもあります。

リストの文言はなるべく1行に収めたいと思っているので、下記のように幅いっぱいのサイズにCSSを追加しました。

.pb-compare-box{max-width:100%;}

CSSの追加は…

左メニュー → 外観 → カスタマイズ → 追加CSS

アイコンボックス

アイコンボックス

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

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

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

背景透過のイラスト

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

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

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

イラストレイン

イラストレイン

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

removebg

棒グラフ

Useful Blocks 棒グラフ

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

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

我が家の夕食
和食
45%
洋食
25%
中華
12%
ナゾの料理
18%

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

Useful Blocks 棒グラフ

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

Useful Blocks 棒グラフ

評価グラフ

評価グラフ

こんなに可愛いグラフが簡単に出来ます。

カラーは、背景・テキスト・ラベル・ポイントの4項目が指定できます。

評価グラフ

インストールと使い方

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
ブロックメニューから呼び出す
STEP
元デザインを編集

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

ポチポチと選んでいくだけで、おしゃれで訴求力満点のボックスができます。

Useful Blocksの詳細

  • WordPressのバージョン5.4以上
  • どんなテーマでも使える
  • 今後もスタイルを追加予定
PRO版
  • 使用メディアに制限なし
  • サポート用のSlackコミュニティに参加できる
  • 機能追加にあわせて料金を変更
  • PRO版は1,200円
  • 支払いはクレジットカードのみ
記事の内容(もくじ)