お洒落なボックス作りが楽チンぽん!おすすめプラグインUseful Blocks

ゆーずふる

サイト構成に欠かせない「ボックス」。

だけどテーマに付属してるボックスでは、シンプルofシンプルでちょっと味気ない。

そんな時、お洒落で便利なボックスがボタンひとつで設置できるとすごく助かりますよね!

カスタマイズに時間を取られなくて済む分、記事作成も捗ります。

この章は

①CSSやHTMLの知識に自信がない
②コピペOKのサイト様からもらったコードを貼り付けても、思うように反映されない
③CSSファイルの中がごちゃごちゃになると把握できない

など、カスタマイズに不安を抱える方向けの記事になってます。

でも大事なのは記事よね?ボックスとかリストとか、そんなの必要ないんじゃ

yuppi
yuppi

その「大事な記事」を読みやすくするためには適度にボックスを使った方が効果的なの

文字だらけの文章だとその圧迫感でお腹がいっぱいになり、読み辛さを感じる人は少なくありません。

同時に、改行だらけの文章が苦手な人も。

文字だけでもダメ、改行を使ってもダメなら他の方法を考えるしかない。

そこで「ボックス」や「リスト」の出番なのです。

Useful Blocksとは

大人気有料スキン「SWELL」開発者の様と、SWELLやCocoonなどで大活躍のぽんひろ様が開発された痒い所に手が届くWordPressプラグイン。

これがあれば、難しいCSSやHTMLは必要無し!初心者でも簡単にお洒落なボックスやリストが作れちゃうんです。

Useful Blocksで出来ること

リストのアイコン変更や色変え、位置調整などを自分の思うままにできる有料版もありますが、無料版でもボタンひとつで5個のデザインボックスが設置できちゃいます。

①比較ボックス
男の言い分
女の言い分
  • 先に結論言えよ
  • 何でもいいって言ったくせに後から文句言うな
  • 感情論多過ぎ
  • まずは過程が大事でしょ
  • だってその時は何でも良かったんだもん
  • 感情的になってない!
アイコンボックス
上司という迷路から上手く抜け出すコツ
  • 人間だと思っちゃダメ
  • 崖から突き落とす場面を想像しながら話を聞く
  • 上司のデスクにブロッコリーをばら撒く

※上手くいかなかった場合、全て自己責任となります

たまにはいいかも
評価グラフ
性癖レベル
純粋
無事
まだ無事
普通
やや異常
危険
末期
体臭レベル
薔薇
石鹸
柑橘
無臭
汗臭
ニンニク
下水
棒グラフ
社内の人気投票
受付のA子
125票
掃除のパート主婦
98票
秘書課のB男
75票
警備員のおじさん
70票
社長の愛人
2票
CVボックス
  • 生まれてきた事に感謝できる
  • 世界一幸せな気分に浸れる
  • もう振り向かない
夢と希望しかない花園のテーマ。今が旬!

これら全部、クリック(タップ)だけで出来るんです。

私は文字を打っただけ。

CSSやHTMLを使わずにここまで出来るの、凄くないですか?

内容はふざけてますが(どうしても血が騒いでしまって)、真面目に使えばかなり出来の良いページになります。

私が見本を見せたことでUseful Blocksのイメージが崩れちゃうといけないので、正しい使用例は下記リンクをご参照ください。

参考リンク
Useful Blocks | 痒いところに手がとどくWordPressブロックプラグイン
WordPressプラグイン。記事作成で痒いところに手が届くブロックを集めたグーテンベルク専用プラグインです。
目次へ戻る

ダウンロードの手順

WordPressなら、テーマ関係なくプラグインを入れるだけで利用できます。

ダウンロードの手順
  • Step1
    ダッシュボードに行く

  • Step2
    プラグインのタブから新規追加をクリック

    プラグインのタブは、ダッシュボードメニューの下の方に。

  • Step3
    右上にある検索窓にponhiroと入力

    すると一覧でUseful Blocksが出てきます。

  • Step4
    今すぐインストールをクリック→有効化

    有効化しないと使えないので忘れずに。

  • Step5
    お疲れ様でした♪

    これで使えるようになります。

    ※手順にすると4ステップにもなりますが、実際はプラグインをダウンロードして有効化するだけの簡単作業です。

 戻る前にインストール済みプラグインのページへ行き、右端にある自動更新有効化もクリックしておきましょう

目次へ戻る

使い方

手順①
記事を編集する時の画面上にあるここ
ゆーずふる3
手順②
Useful Blocksのアイテムだけオレンジ色になってるから分かりやすい
ゆーずふる2
目次へ戻る

アイテム1・比較ボックス

色を変えたい場合は、右の窓にあるカラーをポチっ!で変更できます
ゆーずふる4

あとはタイトルリスト部分に文字を入力していけばOK。

1行目のリストを入力し終えたら、キーボードのEnterを押すだけで好きなだけリストを増やせます。

目次へ戻る

アイテム2・アイコンボックス

ゆーずふる5
こちらはリスト型にするやり方です
ゆーずふる6
ゆーずふる7
目次へ戻る

アイテム3・評価グラフ

文字を入力するのは青色で囲ってある8か所
ゆーずふる8
ゆーずふる9
目次へ戻る

アイテム4・棒グラフ

文字を入力するのは「テキスト」と書かれてる部分。全体の色も変えれます
ゆーずふる10
右窓の①~③は、左画像の①~③の部分を指してます
棒グラフ全体をクリックすると、この右窓が出没
ゆーずふる11

ゆーずふる12
目次へ戻る

アイテム5・CVボックス

アフィリエイトや、ボタンクリックを促進したい時などに
ゆーずふる13

左にあるCVボタン(緑色)をポチっとすると、この右窓が出没
目次へ戻る

まとめ

文字で説明するとごちゃついて、何だか大変そうに見えてしまいますが、あれこれ考えず直感的に使えるのが最大の魅力です。

実際触ってみていただければ、その魅力が伝わるかと思います。

無料なのでリスクもありませんし、気になった方はぜひ1度お試しください。

yuppi
yuppi

それではまた♪

-see you-

コメント

タイトルとURLをコピーしました