友達は少ない方がいいんじゃない??

おしゃべり孤独ブロガーのおじゅんが、仕事や生活や下ネタについて語る。自営をしてたので、その話も。友達は少ないです。

すぐに使える!!ブログ記事を見やすくするテクニック4選

f:id:oshaberiitboy:20160707015221j:plain

どうも、おしゃべり孤独ブロガーのおじゅん( @Jumsei )です。

 

このブログを始めて約2ヶ月。

 

他のブロガーさんの記事を参考に、

見やすいレイアウトを考えてきました。

 

ここでは、ブログの記事を見やすくするための

テクニックを4つ紹介します。

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

 

 

1.改行は多めに

ブログの内容は普通の本と違って、とにかく「見やすさが第一」です。

そのためにも、改行を多く行うことを心がけましょう。

 

おじゅんは最低でも、文章の終わりで段落を変えています。

見て頂いたらわかる通り、一文の途中でも改行していることも多いです。

 

いいことを書いていても文章がキツキツだと、

それだけで見づらくて読む人が減ってしまいますからね。

 

内容優先だから、文章は詰めて書きたいんだよな。」と

いう方もいらっしゃるでしょう。

 

しかし皆さんがよく読んでいるブログを見ていると、

改行が多く使われているサイトも多いはずです。

 

今やブログはスマホでもパパッと読めるような、

手軽で読みやすい文章が一番の理想です。

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

 

見やすさを最優先で考えましょう。

 

2.文字を大きくする

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

気にならない方もいらっしゃるでしょうが、

おじゅんはずっと見ていたら目が疲れてきます・・・。

 

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

 

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

 

このコードを デザイン>カスタマイズ>デザインCSS

に貼り付けて貰えば、通常よりも文字が大きくなります。

 

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

 

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

nukio0803.hatenablog.com

 

 

3.記事に目次をつける

f:id:oshaberiitboy:20160707004547p:plain

↑これが、おじゅんがよく使う目次のデザインです。

この記事内でも、使ってます。

 

目次があると、気になる項目だけを観れるのでとても便利です。

読者の方は、忙しい人が多いですから。

 

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

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

 

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

<a href="#m1">経済のニュースがよくわかる本</a>

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

<a id="m1">経済のニュースがよくわかる本</a>

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

<h4 id="m1">経済のニュースがよくわかる本</a>

 

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

http://www.shoshinsha.com/hp/ref/html/a_name.html - ページ内ジャンプHTML<a>

 

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

 

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

目次の内容

<div> 

 

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

ただ見出しをつけるだけではなく、レイアウトを少し

オシャレにするだけで、読者の印象はだいぶ変わります。

 

実際、他のブロガーさんでも見出しを

カスタマイズされてる方は多いです。

 

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

さっきと同じく、 デザイン>カスタマイズ>デザインCSS

に貼り付けてください。

 

.entry-content h4 {
font-size:24px;
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #008000;
border-bottom: 1px solid #008000;
}

 

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

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

 

shiromatakumi.hatenablog.com

 

 おわりに

HTMLの知識が必要になる内容もありますが、

基本的にはすぐに行えるテクニックばかりを揃えてます。

 

特に改行に関しては、今すぐにでも取りかかってほしいですね。

 

ではでは!!

 

ブログ飯 個性を収入に変える生き方
インプレス (2013-06-21)
売り上げランキング: 1,511

 

読者になるボタン

↓↓↓↓↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑↑↑↑↑

 

 


▪️プロフィール▪️
管理人:おじゅん
Twitter:@Jumsei
TEL:070-5346-8337
Mail:jumseiya@gmail.com
にほんブログ村 ライフスタイルブログへ
にほんブログ村