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

こんにちは。

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

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

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

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

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

リストの例

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

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

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

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

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

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

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

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

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

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

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

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

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

基本の2つ

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

アイコン付きボックス

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

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

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

記事内で装飾に役立つアイコン付き囲いボックスを作ってみた話

ちなみに…

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

吹き出し付きのボックス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アイコン付きのパターン

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

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

中に入れるリスト色々

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

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

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

組み合わせ色々（サンプル）

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

まとめ

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

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

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

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

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

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