スペアポケット | 困った時に役立つWebメディア

何か困った時に解決できる手段を提供できるブログにしていくために日々更新中。

当ブログは移転しました。

ブログを読みやすいようにカスタマイズしました

スポンサードリンク

f:id:riiiiche:20160627021758j:image

 

なんか他の人のブログ見てて自分のブログって読みにくいなーと思って比べてみたらフォントが違うのと、サイズが小さいことに気付きました。

 

特にスマホで見た時は文字が小さくて見辛かったりもしたので、この際にまとめて変更することにしたので参考にしたサイトを紹介します。

 

フォントの変更

一番ブログの見た目に影響するフォントの変更です!参考にさせて頂いたのはこちら。

 

www.north-geek.com

 

プレゼン資料とかでよく使うメイリオにしたかったのでちょうどよく紹介されていたので助かりました!これだけでブログの印象がだいぶ変わりました!

 

フォントサイズの変更

続いてフォントサイズ!調べてみたところ標準では15.2ptに設定されていたみたいなので、今回は17ptに変更しました。参考にさせて頂いたのはこちら。

 

blog.kaerucloud.com

 

文字が大きくなって個人的にはかなり見やすくなりました!スマホも一緒にサイズが変更させてると思ったらまた別途設定が必要みたいですね。

 

文字の行間の変更

以前から行間については気になっていましたが、今回文字を大きくしたことでさらに気になったのでこちらも変更。参考にさせて頂いたのはこちら。

 

www.ituore.com

 

非常に丁寧でわかりやすいです。フォント系はこのブログだけでも全部大丈夫かも。

行間は1.5emに変更してみました!

 

さらに改行した時に行間が空きすぎるのが気になっていたのも修正できました。

 

スマホのフォント設定

一旦フォントサイズや行間などは全部PCと一緒にしました!ただしスマホでフォントは設定できない??のかわかりませんが、調べても出てこなかったので一旦保留にしてます。

 

ただ行間だけ見づらかったので1.8emに設定しました。

 

 まとめ

最初はなかなか理解しづらいCSSですが、いろんなカスタマイズをしていくとなんとなくわかってくるのでもう少し慣れたら自由にカスタマイズも出来そうです。

 

ブログを読んでもらいたいのが一番ですが、ちゃんと伝えたいことが伝わるためにもデザインや読み易さなども重要なポイントとなるので時間がある時にいろいろカスタマイズしてみるといいでしょう!

 

ブログカスタマイズをもっと極めたい方はこの本を読んでみてもいいかもしれません!

ロングセラーを生み出す カスタマイズの法則

ロングセラーを生み出す カスタマイズの法則