ブログ記事の文字の大きさを変えてみた

初投稿をしてみて思ったこと。

それは、

文字ちょっと小さくない？

最近デザインの本を読んだので敏感になっているのかもしれません。

ということで、記事内の文字の大きさを変えてみます。

デザインCSSをいじってみる

とりあえずCSSだよな。

はてなブログのデザイン設定へ行くと、デザインCSSなるものがあったので、

<p>タグのCSSをいじって、font-sizeを40pxにしてみた。

そしたら、、、

全部大きくなった。

プロフィールとか大きすぎ！

右上の青いところは何が書いてあるかわからない。(´・ω・`)

記事内の<p>タグだけ大きくする

さすがに<p>タグすべてを40pxにしたらそうなりますよね。

なので記事内の<p>タグだけ文字の大きさを変更したいです。

そこで、

ブログの要素を調べてみました。

記事詳細ページに行って、F12キーを押して、要素の選択で記事らへんを選択。

そしたら、僕の使っているテンプレートでは、

記事の本文は<div class="entry-content">の中

に入っていることが判明しました。

そこでデザインCSSの中身をこんな風に変えてみました。

そしたら、、、

うん。

ちゃんと記事内だけ大きくなってますね。

あとはちゃんとした大きさにして、見やすくしてみます。

Befor & After

Befor

After

わかりにくいかもしれませんが、変わってます。

一応。

今回書いたCSSはこんな感じ。

 /* 記事内 */
h1.entry-title {
font-size:25px;
}
div.entry-content > p {
font-size:17px;
}
div.entry-content > h3 {
background-color:#333333;
color:white;
font-size:26px;
border-radius:6px;
}
div.entry-content > h4 {
background-color:#eceef1;
font-size:25px;
border-radius:6px;
}
div.entry-content > h5 {
font-size:20px;
}

 div.entry-content > pとかでclass=entry-contentの<div>タグの子孫要素

（ちょっと曖昧です。間違ってたらゴメンナサイ）

にあたる<p>タグについての説明を書くよ！って意味になってます。

文字の大きさ以外に、見出しの背景とかも変えてます。

こんな感じですかね。また、気分でデザインも変えるかもしれません。