最近、インターネットで検索していると、はてなブログがヒットする回数が増えてきた気がします。でも、どのブログも似たようなデザインであまり差別化が図られていません。
そこで、今回は「はてなブログに関するカスタマイズ」で、かなりいい感じのものを発見したのでご紹介します。
文字の大きさを変える
こちらの記事でも紹介しましたが、文字の大きさはぜひ変更した方がいいと思います。ユーザビリティの向上にも繋がりますし、収益UPにも影響があります（特にスマートフォンでの成約率が向上する可能性があります）
記述場所
- PC デザイン→カスタマイズ→デザインCSS
-
スマホ デザイン→スマートフォン→ヘッダー→タイトル下
記述内容
PCの場合はこれだけでOKです。◯◯の部分には文字サイズを記載します。このブログだと、PC版の文字サイズは20pxとなっていますが、もう少し小さくてもいいかもしれません。お好みで調整してください。
.entry-content {
font-size:◯◯px;
}
スマホの場合は少々違ってきます。CSSを記述する環境を作ってからコードを記載しないと行けないからです。とはいえ、コピペで簡単にできちゃいます。
<style type="text/css">
.entry-content {
font-size:◯◯px;
}
</style>
このブログでは15pxに設定しています。14か15がいいとは思いますが、こちらに関してもお好みで調整すればいいと思います。
フォントを変更する
フォントを変更するだけでかなり印象が変わってきます。このブログではPC版でしかフォントの変更を行っていませんが、全体的にやさしい感じになっています。
記述場所
- PC デザイン→カスタマイズ→デザインCSS
記述内容
参考にさせていただいたのはこちらの記事。
とても分かりやすかったです。トミー (id:tosssaurus)さん、どうもありがとうございます。
body {
font: 16px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
}
h3.entry-title a {
font: 18px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
color: #00addd;
font-weight: bold;
}
このブログでは以上のコードを記述しています。ほかのフォントでも大丈夫ですが、MacintoshやWindows、AndroidやiOSでそれぞれ対応フォントが異なるので注意しましょう。
まとめ
文字周りは簡単に変更できる割にかなり印象を変えてくれるのでオススメです。ぜひ、カスタマイズしてみてはいかがでしょうか？
*何かコードに関して不具合などありましたら「コメント」「ブコメ」等でご指摘していただけるとありがたいです。