【見やすさUP】そっけない記事をカラフルにする3つ方法【おすすめリンクを紹介】

ブログを毎日更新し続けて2週間が経ちました。

はじめてからというものの、

  • 自分の経験を書く
  • とりあえず毎日書いてみる

ということしか考えずにひたすらブログを書き続けていませんでした。

そんな中、先日こんなツイートを目にしました。




「なるほど、たしかにテキストだけのコンテンツって魅力ないな。ましてや自分の文章力で。」と思い、デザイン面での工夫をしようと考えるに至りました。



ちなみに、以前の自分のブログのデザインはこんな感じ。



  • ただ単に文字を書き連ねているだけ。
  • 強調も黒で太字にしただけ。
  • リストは使っているものの、見やすさUPにはあまり貢献していない。

どうですか?

読みにくいでしょう。笑

先ほどのツイートを見てから、「ウーン、導入の部分でこれだとみんな最後まで読んでくれないよなあ。」なんて思い直しました。



私の理想としては、

引用元:P+ars(パーツ)/【厳選】初めて当ブログ『P+arts』に訪れてくれた人のための10記事


こんな感じにしたかったワケです。


そこで、ブログ記事を見やすくするために、以下の3つを試してみました。

  • 蛍光ペンで線を引いて、見やすさUP
  • リストは色付きの枠線で囲って、見やすさUP
  • 他の記事へのリンクは読みたくなるようなデザインにして、見やすさUP

以下で、ひとつずつ方法を深掘りしていきます。

やり方や参考にしたリンクも含め、丁寧に解説していきますので、どうかお付き合いください。

蛍光マーカーで見やすく

まず、私のブログには「彩り」が足りませんでした。

ですので、蛍光マーカーを引いて鮮やかにしてみようということで、以下の記事を参考にしました。

まずはCSSを追加しよう

では、早速私のブログ(WordPress)にも実装してみよう!

ってことで、まずはリンク先にあるCSSのコードを私のブログに追加することからはじめました。

  1. 「外観」→「カスタマイズ」→「追加CSS」の順にクリック
  2. リンク先のCSSのコードをコピペ
「外観」→「カスタマイズ」をクリック

「追加CSS」をクリック

リンク先のCSSのコードをコピペ

実際に適用させるには?

さて、CSSのコードを入力し終えたら、蛍光マーカーの機能を記事に反映させていきましょう。

ここまで来ればもうカンタンで、先ほど追加したCSSのクラスを適用させたい部分に入れてあげればOKです。

  1. 蛍光マーカーを引きたいブロックを選択
  2. 「詳細設定」→「HTMLとして編集」の順にクリック
  3. 蛍光マーカーを引きたい部分に、クラスを追加
蛍光マーカーを引きたいブロックを選択

「詳細設定」→「HTMLとして編集」の順にクリック

蛍光マーカーを引きたい部分に、クラスを追加

すると…

そっけなかった強調部分が…

カラフルに!

まったく印象が違いますね。笑

無骨で無機質だった文章が、パステルカラーをあしらうことで見やすくカラフルになりました!

枠線で囲って見やすく

次に、そっけないリストを見やすくしていきましょう。

リストに彩りを加えるために、以下の記事を参考にしました。

まずはCSSを追加しよう

先ほどと同様に、CSSを追加していきます。

蛍光マーカーのときと同じ要領で、リンク先のお好きなCSSのコードをあなたのブログに追加してください。

こんな感じになればOK!

実際に適用させるには?

これも先ほどの要領で、枠線で囲いたい部分にクラスを追加してあげればOKです。

今回、リストを囲うための枠線のクラス名は「youten1」としましたので、以下のようにすればよいでしょう。

リストに対して、<div class=’youten1′></div>で挟み込むような感じです。



すると…

そっけなかったリストが…
青色の枠線で囲われたことで見やすさUP!
カラフルで、目を引くデザインに!

こちらもいい感じに仕上がりました!

他の記事へのリンクを見やすく

では最後に、リンクを見やすくさせたいなと思ったので、以下の記事を参考にしました。

まずはCSSを追加しよう

先ほどと同じ要領で、CSSを追加します。

実際に適用させるには?

こちらも先ほどと同じく、強調してあげたいリンクに対してクラスを追加してあげればOK。



クラス名と同時に、リンク先のURLを貼り付けることもお忘れなく。



すると…

無味乾燥な文章に…

カラフルに内部リンクを貼り付けることができました!

見やすさUPのための3つの工夫を試した結果

以上の3つの方法を試してみた結果、以下のような変化が現れました。

Before:控えめに言って読みにくいし、すぐ離脱されそう…。

After:けっこう見やすくなってる?!



どうでしょうか?

自分の中では大きな進歩かなと思っています。

しかし、まだまだ見やすくなる改善の余地はあるかなって思うので、今後もデザインに対して気を配っていければいいなと思っております。

具体的には、キャラクターの吹き出しなどが加えられるともっといいでしょうから、次はこちらにもチャレンジしていきます。



というわけで、今回は以上です。