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

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

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

夢のコラボですねぇ。

プラグイン「Useful Blocks」

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

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

やっぱりイイわぁ！

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

SWELL

SWELL | シンプル美と機能性の両立 – 圧倒的な使い心地を追求するWordPressテーマ シンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ – 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ…

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

SWELL

＋

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

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

ぽんひろ.com

ぽんひろ.com Webデザイナーが個人で運営するブログ。Web制作、デザイン、WordPressカスタマイズ(Cocoon)、ブログ運営、アフィリエイトに関することを中心に紹介をしていきます！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Useful Blocks 5つのデザイン

CVボックス

CVボックス

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

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

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

• SWELLブロックエディタは最高に使いやすい
• 高速表示＆メッチャおしゃれ
• アップデートで機能がどんどん追加される

好きテーマ「SWELL」

リンク先 : https://swell-theme.com/

テーマを買ったら予想外のオマケの嵐！
SWELLにしてから記事がどんどん書ける

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

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

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

比較ボックス

比較ボックス

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

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

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

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

これ、いいですねぇ。

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

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

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

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

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

CSSの追加は…

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

アイコンボックス

アイコンボックス

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

アイコンボックス紹介

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

こんなに楽しいアイコンボックス

こんなに楽しいアイコンボックス

アイコンボックス紹介

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

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

背景透過のイラスト

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

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

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

イラストレイン

棒グラフ

Useful Blocks 棒グラフ

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

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

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

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

評価グラフ

評価グラフ

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

カラーは、背景・テキスト・ラベル・ポイントの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版にアップグレードするとそれらを自由に変更できるようになります。

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

Useful Blocksの使い方

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

STEP

ブロックメニューから呼び出す

STEP

元デザインを編集

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

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

Useful Blocksの詳細

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