はてなブログで記事が格段にみやすくする方法。そのやり方とメモ

はてなブログで格段に記事がみやすくする方法。

そのやり方とメモ

はてなブログのデフォルトのままであれば
テーマにもよるが、フォントサイズが小さく
フォントも読みにくいものが多いため、変更することで
よりユーザに有効な記事になる。と思っている。

また、記事の表示範囲を広くすることで見栄えがかなりよくなる。

見栄えがよくなり、ブログ記事がみやすくなればユーザーの滞在時間が増加して
よりSEOに良い効果を与えることができる。

今回は、はてなブログで記事をみやすくするために

1. フォントを変更（ブログの読みやすさ）
2. フォントサイズを変更（ブログの読みやすさ）
3. フォントの太さを変更（ブログの読みやすさ）
4. 記事の表示範囲の変更（ブログの見栄え、みやすさ）

影響を受けた記事

www.okuni.me

はてなブログでフォントの変更

まずは「フォント」の変更

デフォルトだと尖った明朝体とかになっているので、読みやすいく
みやすいフォントに変更する。

個人の感じ方にもよるが

「メイリオ」、「ゴシック体」などが読みやすいフォントかなと思います。

/*フォントの設定 */
body {
font-family: "メイリオ", Meiryo;
}

デザインCSSに上記のコードをコピペすれば反映されます。

「ゴシック体」などの別のフォントを使用したい場合は、”メイリオ”,Meyryo　

の部分を変更してください。

これで、フォントの変更ができました。

はてなブログでフォントサイズの変更

フォントサイズの変更で、大きくすると一度にみることができる情報量は減少しますが
ブログ自体がみやすくなるので、ブログの滞在時間が結果的に長くなり
SEOの向上にも繋がります。

サイズは、15~18pxあたりがおすすめです。

あまり大きすぎても、見出しとサイズが変わらなかったりするので
注意が必要です。

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

デザインCSSに、上記のコードをコピペでサイズをかえることができます。

このブログは、17pxにしています。

もう少しサイズを変えたいなら、"17"を別の数字にするとフォントサイズを変えることができます。

はてなブログでフォントの太さの変更

次は、フォントの太さの変更です。

フォントを「メイリオ」などもともと太いフォントを使用している場合は不要かもしれません。

もともとフォントの太さが細いものなどは太くすることで、見やすくなると思います。

こちらの記事を参考にしました。

theme-essay.hatenablog.com

/*default 300 (100~800)*/
.entry-content
{font-weight:300;} 

上記のコードをデザインCSSにコピペすることで変更することができます。

デフォルトの太さが300です。

あまり太くしすぎると、文字を強調したいときなど

区別が付きにくくなるため、この設定は控えめの方が良いかもしれません。

 記事の表示範囲を広くする。

はてなブログのデフォルサイズであれば

ブログの表示されている左右に、何も書かれていない余白があります。

スペースがもったいないので、記事の表示サイズを横に広げることで

ブログ自体の見栄えがかなりよくなります。

参考サイト

www.memory-lovers.blog

@media screen and (min-width:1400px) {

#container {
  width: 1550px;
  margin: 0 auto;
}

#wrapper {
  width: 1100px;
  float: left;
}

#main {
width: 1020px;
}

}

上記のコードをデザインCSSにコピペすることで変更することができます。

どのくらいのサイズに変更するは、値を変更して個人で調節してみてください。

おわりに

以上が

フォントの変更

フォントサイズの変更

フォントの太さの変更

記事の表示サイズの変更により

ブログが読みやすく、みやすくなるかもしれない話でした。

 おすすめ記事

www.glco.xyz