ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

初心者必見!はてなブログの記事を見やすくするテクニック5選

f:id:oshaberiitboy:20160707015221j:plain

 

「ブログを始めたけど、どんなレイアウトが見やすいのかわからない...」

 

今回は、すぐに使えるはてなブログの記事を見やすくするテクニックを5つ紹介します。

 

はてなブログは初心者にもオススメなブログですが、最初の設定のままだとなんだか味気ないですよね?

 

いろいろなデザインテーマも用意されてますが、「見やすい記事」を意識するならもう1歩先に進む必要があります。

 

そこで他のブロガーさんの記事も参考にしながら、より記事を見やすくするテクニックを考えてきました。

 

どれもすぐに使えるので、試してみてくださいね。

 

 

 

①:改行は多めに

 

ブログは普通の本と違ってとにかく「見やすさが第一」です(もちろん内容も大切ですが)。

 

そのためのコツは、改行を多くすること。

 

いいことを書いていても文章がキツキツだと、それだけで見づらくて読む人が減ってしまいますからね。

 

特に今はスマホからのアクセスが7〜8割ぐらい。ただでさえ画面が狭いのに改行をしないとユーザーはストレスMAXです。

 

  • 改行をしない:いい内容でも見づらさが勝ってしまう
  • よく改行をする:記事に余白ができて読んでもらいやすくなる

 

改行のペースの目安は、1〜2文で1回。ブロガーさんによっては句読点を打つごとに改行する人もいますが、まあだいたいこのぐらいでいいでしょう。

 

「内容優先だから文章は詰めて書きたいんだよな。」...という方もいらっしゃるかも知れません。

 

でも、皆さんがよく読んでいるブログにも思ってるより改行がたくさん使われてるはず。

 

じっくり読みたいなら、それこそネットは紙の本には勝てません。

 

いかにユーザーが見やすい記事にするか?を考えましょう。

 

②:文字を大きくする

 

はてなブログの初期設定では文字のサイズがかなり小さいです。

 

気にならない方もいらっしゃるでしょうが、私はずっと見ていたら目が疲れてきます...。

 

改行の所でも書きましたが、やっぱり記事は見やすいほうがユーザーにも優しいですね。

 

そこで、文字の大きさを変えるコードを載せておきます。

 

 .entry-content {
    font-size:17px;
}

 

このコードを『デザイン > カスタマイズ > デザインCSS』に貼り付けてればデフォルトよりも文字が大きくなります。

 

大きさの目安は、15〜17px辺りでしょうか。

 

こちらの記事も参考になるので、どうぞご覧ください。

 

 

③:記事に目次をつける(追記あり)

 

f:id:oshaberiitboy:20160707004547p:plain

 

目次があると、気になる項目だけチェックできるのでとても便利です。

 

読者の方はじっくり記事を読む暇がない忙しい人が多いですから。

 

目次の設定には、ページ内リンクというテクニックを使います。

 

以下がサンプルコードになります。

 

目次に書くリンク元のコード:

 

<a href="#m1">目次にしたい文章</a>

 

目次のリンク先のコード:

 

<a id="m1">目次のリンク先の文章</a>

 

リンク先のコードが見出し(h4など)の場合:

 

<h4 id="m1">目次のリンク先の見出し</a>

 

ページ内リンクについては、以下のサイトも参考になります。

 

 

ついでに、目次を囲んでいる枠のサンプルコードも載せておきます。

 

<div style="padding: 1px 10px 20px 20px; background-color: #eeeeee; width: 500px; border: 1px solid gray;">

 

目次の内容

 

<div> 

【2018/09追記】

 

...この記事を書いてもう2年以上が経ちました。

 

言ってることをひっくり返して申し訳ないですが、当ブログは早々に目次を削除しています。今後、復活させる予定もありません(笑)

 

目次を作らなくなった理由は2つ。

 

  1. 単純に目次を用意するのがめんどくさい
  2. 目次はなくてもユーザーはどんどんスクロールで読んでくれる

 

「2」に関してですが、当ブログに来てくれる人は「スマホユーザー」がそれぞれ8〜9割ぐらい。

 

 アクセス方法  比率

スマートフォン

80%

パソコン 15%
タブレット

5%

 

スマホなら画面のスクロールであっという間に記事を読み切れてしまうので、むしろ目次はいらないかなーと思ったんです。

 

「おいおい!記事の読みやすさは大事って言ってたじゃないか!」...と言われそうですね。でも、目次が多い記事って、読む気がめっちゃなくなるんですよねえ...。

 

私も目次がビッシリの記事を見ると「うわぁ....」って軽く引いちゃいます。

 

なんか偉そうに語ってるけど、「1」の理由の方が大きいなんて言えない...。

 

④:見出しのデザインをオシャレにする

 

ただ見出しをつけるだけではなく、レイアウトを少しオシャレにするだけで、読者の印象はだいぶ変わります。

 

他のブロガーさんでも見出しをカスタマイズされてる方は多いです。

 

以下、私のはてなブログの見出しのコードを載せておきます。

 

 

/*-- h3見出し --*/
.entry-content h3 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h3::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #FF6633;
z-index: 2;
content: '';
}

 

こちらも『デザイン > カスタマイズ > デザインCSS』に貼り付けてください。

 

見出しに関しては、こちらのサイトもかなり参考になります。

 

 

いろいろな見出しのデザインが載っているので、試してみてくださいね。 

 

⑤:所々にセリフを入れる

 

文章だけで記事を進めると、どうしても単調になってしまいます。

 

そこで所々にセリフを入れてみましょう。

 

セリフがあるだけで華やかになるね!

文章だと難しい内容も、セリフだと伝えやすくなるかも!

 

...こんな感じです。

 

  • セリフがない記事:ずっと文章が続くのでユーザーが飽きる
  • セリフがある記事:所々にセリフがあるので最後までユーザーが読んでくれる

 

私はコチラの記事のコードを参考にして、キャラクター同士をやり取りさせています。

 

 

さらに言うと、「吹き出しがLINEっぽい方がユーザーの興味を引きやすい」と考えたので、上のコードをアレンジさせました。

 

 

どちらもコードを設定するまでがちょっと面倒です。

 

でも1度設定してしまえば、あとはセリフをバンバン入れまくれますよ(笑)

 

おわりに:初心者でもちょっとしたテクニックではてなブログは見やすくなる!

 

f:id:oshaberiitboy:20180917165322p:plain

 

以上、はてなブログで記事をみやすくする方法を紹介しました。 

 

CSSの知識が必要になる内容もありますが、基本的にはすぐに行えるテクニックばかりを揃えてます。

 

みなさんも、ぜひ試してみてください。

 

本日は、以上です!