読者です 読者をやめる 読者になる 読者になる

無料版でもOK!HTMLを使ってはてなブログを読みやすくする4つの方法

はてなブログ 読みやすい 見やすい HTML コピペ

こんにちは、KiKiです。

今回はHTMLを使ったブログ記事を読みやすくする方法をご紹介しようと思います。

上記みたいな感じのです。ただし、使いすぎると逆に見にくくなるので全体的なバランスを見ながら使ってみてください。

無料版はてなブログでも、記事内のHTMLならスマホ表示に反映すると思います。※見たまま編集モードの「HTML編集」じゃないと反映しないようです。

それではいってみましょう。

文字の色を変える

まずは基本から。見たまま編集では簡単に、色をかえたい文字をドラッグで選択→上記にある色選択から色を指定すると、文字色をかえることができます。

f:id:kikixxxx:20170112214924j:plain

既存の設定だと配色が30色だけなので、他の色に変えたいときは「HTML編集」からカラーコードを入力して変えてみましょう。

コピペはHTML編集へ

<span style="color : #ff5252 ; ">文字色を変える</span>

f:id:kikixxxx:20170112231658j:plain

カラーコードは[#ff5252]の部分です。ここを変えてみてください。

わたしは面倒なので 既存にある[#ff5252]を使うことが多いですが、他のカラーコードでおすすめは[#e95464][#e9546b

ここぞ!という時、赤文字をポイントにすると見やすい文章になります。青系を使うとリンクと間違いやすいので避けた方が無難です。

文字に背景色をつける

背景色をつけると、さらに文字が見やすく強調されると思います。

<span style=" background : #f6bfbc ;">文字に背景色</span>

原色に近い色だと目がチカチカして読みづらくなるので、文字色を変えないなら薄い色がいいと思います。個人的には #ffe5e5#ffdbed#e0ebaf#e8ecef あたりがおすすめです。

蛍光ペンで引いたような下線を入れる

最近知りました、蛍光ペンやマーカーで引いたような下線をつけられます。かわいい!わたしは気に入っていますが、どうでしょうか。

<span style="background : linear-gradient ( transparent 50%, #fff3b8 50%) ;">蛍光ペンやマーカーで引いたような下線</span>

ブログのカラーにもよると思いますが、暗い色よりも、明るい色の方が文字がきれいに見えると思います。

cssに書き込んで、より強調する[B(太字)]の際、一緒に反映されるようにする方法もあります。こちらの記事で紹介されています☆

文字を線で囲む

引用ではなく、ただ文字を線で囲みたい…そんなあなたに、こちら!

<div style=" border : 1px solid #00afcc ; padding : 10px  ;">文字を線で囲む</div>

[border : 数字px (線の太さ) 線の種類 色]で線を変えられます。

  • 実線[solid]
  • 破線[dashed]
  • 点線[dotted]
  • 二重線[double]
<div style=" border : 2px dasehd #f08080 ; padding : 10px ;">文字を線で囲む</div>

[border-radius : 数字px ;]で角を丸くできます。

<div style=" border-radius: 15px ; border : 3px double #9fc24d ; padding : 10px  ;">文字を線で囲む</div>

背景色だけを変えてもいいですね。

<div style=" background-color : #f3f3f2 ; padding : 10px ;">文字を線で囲む</div>

カラーコードを探すなら

わたしが使いやすいのは、和色・洋色大辞典です。

薄い色を探したいときは、こちら。

イメージから選べるこちらのサイトもおすすめです。

あとがき

以上、わたしが実際に使っているHTMLを使った文字装飾でした。

個人的には色を記事ごとに変えたいので、cssで決めてしまうよりHTMLで変える方が好きです。

この記事のように^^; 色を多用すると読みにくくなってしまうので注意してほしいですが、ポイント使いをするのは本当におすすめ♪ 参考になると嬉しいです。

読んでいただきありがとうございました☆

関連記事

 

広告を非表示にする