koromorog 〜ころもろぐ〜

ころもろぐ

美容に関する知識とその他役立つ情報を分かりやすくアウトプット

はてなブログのフォントとフォントサイズを変えてみる

 

 

 

今回は、はてなブログ『フォント』『フォントサイズ』を変えてみたいと思います!

 

それに加えて、『余白設定』と『行間設定』も少し手を加えていきます!

 

f:id:koromor:20200228160011j:plain

 

 

 

 

フォントを変更するメリット

ブログでもサイトでも、フォントはとても大切な要素ですよね。

好みはあるでしょうが、フォントを変えているブログを見つけるとこだわってるな〜と感じます。

それと、フォントのサイズに関して『googleが推奨している文字サイズ』というものもあるらしいです。フォントのサイズをデフォルトのままにしておくとSEO的にも不利になるらしいです。こんな記事を見つけました。

ところで、あなたは「googleが推奨している文字サイズ」というのがあることをご存知だろうか?

一言でいうと

16px以上

これがgoogle推奨の文字サイズ。これはPCだろうとスマホであろうと関係ない。どちらも16px以上だ。

www.okuni.me

 

 

ということで、はてなブログの中でも、少しでもオリジナリティを出していきたいと考えている方がほとんど。

ブログを始めて、かなり早い段階で取り掛かることになるかと思います!

 

ソースコードの貼り付け場所

 

 

いつもの『デザインCSS』に貼り付けます!

f:id:koromor:20200219152604p:plain

f:id:koromor:20200219155620p:plain

*デザインCSSを設定するときは、新しいソースコードを貼り付ける前にコピーなどでバックアップをとっておいてください!

 

 

フォントサイズと行間の設定

 

 

フォントサイズと一緒に、行間設定も貼り付けちゃいます。

/*文字の大きさと行間*/

.entry-content{

font-size:16px;

line-height:1.8em;

}

 

『font-size』の横の数字でサイズを変更できます。

『line-height』は行間です。

数値はご自身で決定してください。

このままコピペでもどちらでも構いません。わたし的にはこれくらいがちょうどいい感じです。

 

 

フォントを変更

 

 

フォントは王道の『メイリオ』にしました。

/*フォントの設定*/

body{

font-family:"メイリオ",Meiryo,"游ゴシック","Yu Gothic",YuGothic,"HiraginoKaku Gothic ProN",Hiragino Kaku Gothic Pro","MS ゴシック",sans-serif;

}

font-familyの後に記入されたフォントが優先的に適用されて、 それが使えない場合?次のフォントが適用されます。

 

 

さいごに

 

いかがでしたか?

今回はフォントのサイズとフォント自体を変えてみました。

少しのことなんですが、なんとなくスッキリ見えていいですね。

 自分のサイトがビルドアップされていくのってなんか嬉しいですね!

 

プライバシーポリシー&お問い合わせ