こんにちわ!最近モンスターというエナジードリンクを飲み過ぎていつか心臓が爆発してしまうんじゃないかと思ってしまうbehomaです。
皆さんも飲み過ぎに注意しましょう。

前回の記事にありました。

 
ですが、フォントだけでなく昔のブログって文章が詰まっていたり、見出しがなかったり、テキストが右から左で動いたりして非常に可読性が低かったです。

しかし、今のブログは行間や見出しが気にされていて非常に見やすくなっております。今回はこれからブログを始めようと思っている方のために、コピペで出来る簡単ブログ設定をお伝えしたいと思います。

 
スポンサーリンク

 
 

 


・行間を気にしよう


 

ブログなんて好きに書いていいじゃないか!!
 
その通りです。僕もあまり行間なんて気にしていません。しかし、ギチギチに詰まった文章はさすがに読みくいです。逆もしかり。
ある程度いい行間を作り出すことが出来れば読者さんはスラスラと読んでもらえるはずです。
 

・行間ツメツメ

行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。

 

・行間ゆったり

行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。行間を気にすれば世界が変わる。

 
少し大袈裟ですが、行間は詰め過ぎると本当に見にくくなりますので気にしておきましょう。行間は簡単に指定することが出来ます。

line-height:1.5;

 
これでいい感じの行間が出来ます。行間を広げたい場合は1.7や2などに変更、狭めたい場合は1.3などに変更を行って調整をしてみて下さい。

 


・文字間を気にしよう


 
ブログは新聞と異なり、限られたスペースというものがありません。無限に自由にブログを書くことが出来ます。ブログは読者さんが見やすい文字間を調整しましょう。
 

・文字間ツメツメ

文字間を気にすれば世界が変わる。

 

・文字間ゆったり

文字間を気にすれば世界が変わる。

 
文字間も簡単に設定する事ができます。
 

letter-spacing: 1px;

これも文字間と同様に広げるなり、狭めるなりして下さい。本文の文字間隔があまりにも広いと非常に見づらいので実際に文章を入力して調整を行ってみて下さい。
 


・強調する部分にアクセントを加えよう


 

ここを伝えたいんや!!わしは!!
 
このような強調したい部分は
strongタグやbタグを使用することが多いとは思いますが、今流行りのアクセントは少し違います。
 

ここを伝えたいんや!わしは!

 
マーカーのように線を引いたアクセント。このアクセントを使用しているブログを良く拝見します。
これはCSSのグラデーションを使用することで簡単に実現出来ます。コピペでご利用下さい。
 
html

ここを伝えたいんや!わしは!

 
css

b{
    background: -webkit-linear-gradient(transparent 60%, #66ccff 60%)!important;
    background: -o-linear-gradient(transparent 60%, #66ccff 60%)!important;
    background: linear-gradient(transparent 60%, #66ccff 60%)!important;
}

 
少し手間を加えるだけでも誰がみてもここが重要なんだなと伝えることが出来ます。と普段から使用しているみたいに伝えておりますが僕は一度も使用したことはありません。ないんかいっ!!とつっこみたくなる気持ちはわかりますが、これには理由があります。
 
アクセントは統一する。
 
これが大切だと思っています。いろんな種類のアクセントを作ってしまうと読者さんに伝えたいことが伝わらなくなります。僕みたいに読者が増えないブログならまだいいですが、これから読者をバンバン作っていく皆様はアクセントを統一した方が良いかと思います。

 


・見出しをつけてわかりやすく


 

最近のブログはだいたい見出しがついています。この見出しに批判的な方もいますが、僕は内容の予測がしやすくてあると非常に助かります。

特に調べごとをしている時って知りたい情報めがけて読みたいものです。僕のような目的にたどり着かないブログならなおさらです。
そういう時に見出しは非常に役に立ちます。

見出しのデザインはブログによって全然違います。ただ太文字にするブログもあれば、手書き風、背景色を変更などまさには十人十色。僕もコピペで出来る見出しを作ろうと思ったのですが、
 
midashi
http://www.nxworld.net/tips/50-css-heading-styling.html
 
midashi01
 
midashi02

このサイトさんの見出しデザインの量が膨大で最高なので、このサイトさんを参考にして欲しいと思います。そして僕も参考にします。ありがとうございます。

 
 

まとめ

せっかくブログを書くなら誰かに見てもらいたいものです。
見てくれている読者さんがいるなら読みやすくしたいものです。

これからブログを始める方は細かい所ですが、簡単に設定出来るので始めてみましょう!

 
スポンサーリンク