ネットに生きる。 ~ IT技術、ネットのネタなどを幅広く紹介

IT技術を中心に、2ちゃんねるやニコニコ動画で見つけた面白いネタなどについてなんでも幅広く取り上げていくブログです

はてなブログのカスタマイズ2 ~ 文字サイズの変更

はてなブログで最初の記事を公開したわけですが、なんだか文字が小さくて読みにくいなあと思ってしまいました。というわけで、文字を大きくして読みやすくする方法を解説します。

 文字サイズを変更する方法

文字サイズを変更するにはCSSという機能が必要です。ページを作ったことがない人は慣れないと思いますが、文字サイズを変えるくらいなら簡単なので安心して下さい。それでは説明します。

まとめて変更する

  1. デザインカスタマイズデザインCSS  をクリック
  2. 以下のコードをコピペして貼り付け、保存して終了 

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

この際、既に書かれているコードは消さないでください。font-sizeの20という数字を調整することで、文字サイズを調整しましょう。

 

見出しや箇条書きなど、要素ごとに大きさを変えたい

先ほどの例では、記事の文が全て同じ大きさになってしまいます。見出しや箇条書き、数字付きリストなどでそれぞれ文字サイズを変えたい場合について説明します。

  1. 記事のソースコードを見る(たいていのブラウザでは右クリックから見れます)
  2. サイズを変更したい文が書かれている部分を見る

行の一番左におそらく<p>(地の文)だったり、<h3>(大見出し)だったりが書かれていると思います。

これらをタグといい、それぞれのタグについてサイズを指定してやることで問題を解決できます。例えば、大見出し(h3)を24px、地の文(p)を15pxにしたい場合は、

.entry-content h3 {
    font-size:24px;
}

.entry-content p {
    font-size:15px;
}

このようにしてやればよいのです。簡単でしょ?

おわりに

今回は、文字サイズの変更のみを行いましたが、CSSをいじることでデザインを自由自在に変更することができます。例えば、entry-contentを変更すれば記事以外もいじれます。もっとデザインに凝りたい人は是非、HTMLやCSSを勉強してみてください。