INO'S BLOG

投資している会社員のブログ

【はてなブログ】最初にやっておいたほうが良いカスタマイズ~おしゃれなブログを目指す~

誰でも自分のブログをおしゃれにしたいと思っているでしょう。ここでは、はてなブログを始めたばかりの人でもブログをおしゃれにするカスタマイズやポイントを紹介します。

こんな人におすすめ

  • ブログをおしゃれにしたいがどうすれば良いか分からない人
  • ブログを始めたばかりだが少しでもおしゃれにしたい人

なお、先にテーマを入れておくことをおすすめします。おすすめのおしゃれなテーマについてはこちらの記事で紹介しています。

toushi-ino.hatenablog.com

f:id:toushi-ino:20200808094340p:plain

ブログをおしゃれにするポイントを紹介します

おしゃれなブログとは

おしゃれなブログといっても色々あると思いますが、共通していることとして

  • 読みやすい(文字の大きさや行間が良い)
  • デザインがよい(配色や統一感)

と言うことがあると思います。


この2点を意識してカスタマイズするだけでグッと見やすくておしゃれなブログになると思います。では、具体的なカスタマイズなどを見ていきましょう。

具体的なカスタマイズ

文字の大きさ

文字の大きさは小さすぎると見づらく、読み手にストレスをかけてしまいます。記事本文の文字は16px~18pxであれば問題ないと思います。


もし自分のブログの文字サイズが小さければ、次のコードをデザインCSSへ記述して文字サイズを変更しましょう。

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

数字の部分を変更すればサイズが変更できます。16px~18pxの間で変更しましょう。


なお、すべての文字を同じ大きさにしてはいけません。例えば、タイトルや見出しは目立たせるために記事本文より大きくしたり太字にするのが普通です。また、日付やカテゴリーなど目立たせる必要のない情報は少し小さくします。

見出しのカスタマイズ

はてなブログのテーマでは、見出しがカスタマイズされていないものがほとんどです。種類や色の違いで与える印象が変わってくるので早いうちにカスタマイズしましょう。


見出しのカスタマイズについては、こちらの記事が役立ちます。私もお世話になりました。

www.notitle-weblog.com

個人的には、横線や左に縦線などシンプルな装飾だけで良いと思います。読みにくくなっては本末転倒だからです。

色を変える

配色は印象を決める上でとても重要です。上手にまとめるには、色を使いすぎないということが大事になってきます。


数種類の少ない色でまとめることで、おしゃれ感がでてきます。同じ系統の色でまとめたり、同じ系統の色+アクセントで別系統の色を1色でまとめると良いと思います。


自分で配色を考えることができない人は、こちらから自分のブログのイメージにあった配色を選ぶと良いでしょう。

saruwakakun.com

配色を決めることができない人は、とりあえず黒、白、グレーの3色でまとめておくとダサくなることはないでしょう。

シェアボタンのカスタマイズ

はてなブログの標準シェアボタンはダサいので変更をすることをおすすめします。


シェアボタンのカスタマイズについては、こちらが参考になります。

www.notitle-weblog.com

私はこの記事を参考にして高さなど少し変更を加えたものを使っています。


なお、このままではシェアボタンが関連記事よりも下になってしまいますので、こちらの記事にあるコードを利用して位置を変更しておくと良いでしょう。

www.notitle-weblog.com

マーカー風の下線

こちらは使う予定のある人だけ導入すれば良いと思います。こんな感じでマーカー風の下線を引くためのCSSになります。色や線の太さは必要に応じて変更してください。

article u {
text-decoration: none;
background:linear-gradient(to bottom, transparent 60%, rgba(14,106,206,.5) 60%);
}

HTML編集でマーカーにしたい部分を<u>と</u>で囲うとマーカーにできます。

太線や斜線を利用する方法がありますが、太線だけで利用したいときや斜線を利用したいときもあると思いますので、この方法を採用しました。


見たまま編集とHTML編集を行ったり来たりするのが面倒な人は、定型文貼り付けを利用すると回避することができます。

私の場合、一種類のマーカーしか使っていませんので、

  • 定型文のタイトル:マーカー
  • <u>ここに文字を入力</u>

として登録をしています。複数のマーカーを利用する人は必要な分だけ登録をします。そのとき、タイトル部分を分かりやすくしておくと良いでしょう。

まとめ

ちょっとしたポイントを押さえるだけでおしゃれにすることができますので、一つずつ変更をしていきましょう。その時は、読みにくくなっていないか、統一感はあるかに注意しましょう。


おしゃれなブログを作るためには、おしゃれなブログに触れるのが近道です。このブログをカスタマイズするときに参考にしたブログを紹介します。

※準備中です。