Wordpressテーマを「ZEEN」に変更しました!

【WordPress】ブログ記事を読みやすくするリストとボックスの話

こんにちは。

今日は、ブログを書くうえで役に立つ、特に、Wordpressの「無料テーマ」を使ってブログを書いている人にとって使えるかも知れないお話です。

ブログ執筆をサポートするさまざまなパーツ

ブログは写真やイラストを挿入したり、最近では動画を埋め込んだりしてリッチな情報を綴れるので上手に構成すれば読む人がより内容を理解しやすくなりますが、その、”上手に”というところが簡単ではないですね。

他にも、表を入れたり、吹き出しでお話しするようなパーツを入れたりできるので工夫の仕方は増えましたが、そんな中で今日取り上げるのは、「リスト」と「ボックス」です。

リストは、その名の通り、箇条書き的な感じで単語や文を並べるやつで、ボックスは多くの場合リストを囲ったり、文章を囲って強調させる目的で挿入します。

リストの例

  • りんご味のバナナ
  • 炭酸のぬけたコーラ
  • 噛みごたえのないグミ

↑こういうやつですが、リストは大きく分けて、数字がつくタイプと、そうじゃないタイプがあります。また、見出し部分の装飾のやり方で使い方が変わってきます。

確かに強調はされているな

せっかくだから、よりメリハリあるデザインにしたいなって思うのだよ

上のリストは、ボックスに入っていますが、よりクリーンでシンプルに見せたい場合、

  • りんご味のバナナ
  • 炭酸のぬけたコーラ
  • 噛みごたえのないグミ

↑こんな感じでリストだけの表示にする見せ方もあります。用途次第でデザインの方向性はいく通りも考えられます。

また、ボックスに入れる場合もそのデザインによって見せ方がさまざまです。

ボックスのあるなしで全然イメージ違うな

あまり強調されすぎても良くない場合があるので、使い方は本当に工夫次第ってやつなんよな

デフォルトで用意されているリスト

ちなみに、Wordpressに初期から備わっているリストだと、以下の様な感じです。

  • あいうえお
  • かきくけこ
  • サシスセソ
  1. いちばん
  2. にばん
  3. さんばん

流石にこれは質素かもしれん…

まあ、とても質素というか、シンプルやんね

これがあかん、ってわけではないのです。海外のブログとかだと割とこんな感じでシンプルなものも多いです。が、個人的にはちょっと殺風景というか、読みやすさとかを考えた時、もう少しデザインに力を入れてもいいんじゃないかな、というふうに思うわけです。

日本製の有料テーマとかだとリスト用の装飾パーツはかなり幅広く用意されているので、少なくとも日本の方が読む時、リストが見やすいと意味があるのではないかと考えます!

Leoが使っているリストとボックス

では、このLEOLOGで現在ボクが使っているリストやボックスについての紹介を続けていきましょう。

現在このブログでは「ダークモード」が備わっているため、デザインするときの手間が1.5倍程度あるのですが、よりカッコイイデザイン、そして、読みやすい装飾パーツを使いたいという思いから、ちょっとだけ時間を投資して色々作っています!

ドヤりタイムが始まるわけか

ドヤるつもりはないwww

基本の2つ

  • アイウエオ
  • かきくけこ
  • サシスセソ
  1. いちばん
  2. にばん
  3. さんばん

先に紹介したシンプル(質素)な箇条書きデザインと、数字付きデザインを、ボックス付きで用意したのがこれです。背景を白にして、囲いをつけるデザインだったり、背景をもっと優しい色にするデザインだったり、本当に方向性はさまざまです。

アイコン付きボックス

続いては、アイコンをくっつけることでボックスに書かれている内容がイメージしやすいようなボックスを作りました。

こんな感じのボックスです。
こんな感じのボックスです。

個人的にはカワイイ寄りのデザインですが、アイコンにより、わかりやすさも演出できていて、今後も使えると思っています。

たくさんのパターンを作っていますが、詳しくは別の記事で紹介しているのでそちらをご覧ください。

ちなみに…

こんな感じのボックスです。

今LEOLOGでは積極的に使っていないけど、↑こんなデザインのボックスもよく見るデザインです。

ほんまに、色々あるんやなぁ

吹き出し付きのボックス

今度はアイコンではなく、吹き出し内に文字を入れています。ボクは、以下のようないくつかを作りましたが、のちに紹介する、吹き出しの中身を変えられるタイプの方が使い勝手がいいかも知れないと最近思っています。

 ブログ冒頭に入れたいボックス

見かけたことがある人もいると思いますが、「この記事を読むとわかるコト」というボックスと、「この記事を読むべき人」というリスト。記事の冒頭に入れておくと親切なやつです。

  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3

はいはい、確かによく見るやつや

記事の途中にも入れられるボックス

こちらは逆に記事の途中に入れても使えるタイプと、後者は記事の最後に「まとめ」的な感じで使う想定で作りました。

  • ✖️○△な人
  • ???な人
  • アイウエオサシスセソ
  • かきくけこたちつてと
  • まみむめも

関連記事などを入れるボックス

続いては、「関連記事」「参考記事」などをまとめる用のボックスです。

↑関連記事のリンクを入れるボックス。

↑参考記事のリンクを入れるボックス。

↑参考記事と何が違うか?は置いといて、あわせて読んでほしいリンクを入れるボックスです。

関連記事は内部のやつか、他のところのかがわかりやすくなってるとええなって個人的に思うやで

そういう見せ方もユーザーファーストかも知れんね〜

記事のなかで紹介する自分のブログ内の他の記事はもちろん、参考にさせていただいた記事だったり、引用元の記事などのリンクを紹介する際に使いたいリストです。割と多用することになるやつだと思いますが、ボクは、関連記事だけではなく、参考記事、あわせて読みたいと3つの呼び方で分けていて、それぞれのカラースキームを変えることでデザインは同じ方向性、しかし色合いを分けて明確な違いを演出するやり方を採用してみました。

これらも、元々もっと丸みを帯びたデザインでもっとかわいかったのを少しリデザインしており、今後もっと直線的だったり色味もスマートな感じへと変えていくかも知れません。

って思ってるので、今後のデザインでわかりやすさを考えて作ってみようと思う

ええ心がけやな

タイトルが自由に変えられる噴き出し付きボックス

ここからが、タイトル(吹き出しの中など)が都度変えられるタイプのボックスです。汎用性は高いですが、毎回入力するのを面倒と思う人がいるかも知れません。

かわいい感じのデザインのボックス

ここにリストを挿入する
ここにリストを挿入する
ここにリストを挿入する

最初に作ったのがこちら。結構よく見かけるデザインで、デザイン的にはかわいい感じの方向性。

  • カレーライス
  • すき焼き
  • カルボナーラ(スパゲティ)

リストを入れてみるとこんな感じになります。

スマートでクールなデザインのボックス

  • こちらは直線的で
  • かっこいいイメージ
  • 男性的だったり、クールで洗練された感じ
  • こちらは直線的で
  • かっこいいイメージ
  • 男性的だったり、クールで洗練された感じ

今のところ色合いは1色だけしか作っていませんが、テーマをZEENに変えてから、ブログのデザインテーマをまとめていく中で生まれたデザインで、かつてSANGOに寄せたデザインで運用していたところからの離脱を考えている今、こういうデザイン性は増やしたいかもと思っています。

アイコン付きのパターン

先ほど紹介した、左上にアイコンを付けたボックスですが、その進化版ですね。デザインコンセプトがまだ固まっていないので、ちょっとカワイイ要素もあるこれらは、今後いじっていく可能性がありますが、アイコンがあるとテーマがわかりやすい利点はそのままに、タイトル部分を自由に書き換えられるメリットを追加した感じで、使い勝手が良いのではないかと思っています。

  • あれはああだからこうだ
  • だからこうしてこうなる
  • つまりあれはこうだ
  • インフォメーション
  • ニュース
  • いろんな情報
  1. ナンタラカンタラ
  2. ウンタラカンタラ
  3. アルカンタラ
  • 卓球よりのテーブルテニス
  • カバディっぽいセパタクロー
  • カラオケで1曲も歌わないプレイ
  • 英検1級取得
  • 自転車の修理
  • 九州旅行
  • 寝る
  • 食べる
  • そして、寝る
  • あの辺は結構あれなので注意
  • この辺も結構これなので注意
  • ついでにあれもこんな感じなので注意!

リストを入れていくとこんな感じですが、中に入れるリストも実は、色々用意していて、組み合わせによってまた、アレンジし放題なんです。

中に入れるリスト色々

そんなにいろんな種類はいらないかも知れませんが、例えば、「GOOD」なことをまとめるリストと、「ダメなところ」を紹介するリストだったら違う方向性の方がわかりやすさがあると思います。

  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3
  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3

とりあえず今は、チェックを3色とアローを3色、そしてxを作っています。背景が濃いボックスに入れる想定もあるので文字色が明るいパターンなども用意しなければならないのでちょっと面倒でした。

↑こんな感じでリストがあるボックスが完成します。

組み合わせ色々(サンプル)

  • トイレ掃除
  • お花に水やり
  • 金魚の餌やり
  • 新しいベッドカバー
  • 電動掃除機(ルンバはいや)
  • 無線充電の充電器
  • わかるはずのこと1
  • わかるはずのこと2
  • わかるはずのこと3

時間があり、必要性があればこれらはもっと数を用意できるものなので、今後も記事を書く中で「こんなのあればいいかも!」と思うのがあれば追加していこうと思っています。

なるほどなーちょっと長くて途中寝てたけど勉強なったわ

寝るなよw

まとめ

以上、このブログで多用している装飾用ボックスの紹介記事でした!

有料テーマだとこういうボックス類が文章を書く段階で執筆パネルから呼び出せてそれだけで執筆速度が上がるので、毎日記事を上げるような方々にとっては断然費用対効果があります。

最初は「Cocoon」などの無料テーマで書いてても、いつか有料テーマに移るかも、って思う人はさっさと買っておく方が得かも知れません!

しかし、テーマに依存するショートコードなどが多いので、途中でテーマが変えられなくなるという縛りが生まれてしまいます

なので、自作のボックス類を使うのも”手”です。

どちらが100%の正解というのがない話なので悩む方もいると思いますが、参考にしてもらえたらと思います!

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!