かろちょあ

趣味の料理・買い物を中心に、新しく経験したことなどを発信

はてなブログのカスタマイズ/フォント・文字まわり編

f:id:karochoa1:20180823134009j:plain

こんにちは。かろちょあです。

今回ははてなブログのカスタマイズの中でも、「フォント・文字まわり」についてご紹介していきたいと思います。

ブログの印象を決定づける要素の中でも大きい部分を占めるフォント・文字まわりですが、案外デフォルトのままにしている方も多いのではないでしょうか?

ぜひ気になったものからトライしてみてください。

まずは文字サイズを変更しよう

はてなブログのテーマはどれをとっても文字サイズが小さいことが多いです。

そこで、まずは文字サイズを変更してみてください。読みやすさが格段に向上すると思います。

①ブログ全体の文字サイズ変更

Googleが推奨している文字サイズが16px以上なので、当サイト”かろちょあ”もそれにならっています。

/*文字サイズALL*/

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

設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

②見出しの文字サイズ変更する

見出しのサイズに違和感がある時には、見出しの文字サイズを変更してみてください。当サイト”かろちょあ”ではデフォルトのままにしています。

/*見出し文字サイズ*/

.entry-content h2 {font-size:24px;}

.entry-content h3 {font-size:20px;}

.entry-content h4 {font-size:18px;}

設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

行の高さを変更する

/*行の高さ*/
.entry-content {line-height:1.8;}

設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

強調(B)にマーカーを付ける

太字(B)にマーカーをつけてみましょう。「#96E6E6」にあたる部分に好きな色を入れてみましょう。色の探し方はGoogleで「色見本」と検索すると出てきます。

/*マーカー*/
.entry-content strong {
background: linear-gradient(transparent 60%, #96E6E6 40%);
}

フォントの設定をする

フォント自体の変更によってもサイトの印象は大きく変えることができます。

なんとApple系端末とWindows系端末で表示するフォントを変えるというもの!(参考サイトに引用元あり)早速拝借して当サイトでも使っております。

/*フォント*/
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'MS Pゴシック','MS PGothic';
}

設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

見出しのデザインを変更する

続いて、見出しのデザインを変更していきます。見出しは「大見出し」「中見出し」「小見出し」ごとに設定します。

大見出しを変更する

大見出しは、最も目立つ塗りつぶしを使用しています。

.entry-content h2 {
margin: 36px -32px 20px -32px;
padding: 20px 5px 20px 20px;
background-color: #444;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 2px;
}

 設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

中見出しを変更する

中見出しについても、ある程度見やすく、大見出しほど目立たないものを使用します。

.entry-content h3 {
margin: 32px -32px 20px -32px;
padding: 12px 16px;
border-left: 6px solid #444;
background-color: #f6f6f6;
color: #444;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 1px;
}

 設定方法:デザイン>カスタマイズ>”デザインCSS”に、上記コードをコピペしてください。

参考にしたサイト

work.lifemake.design