ブログのcssにちょこっと手を入れた

今年の目標の一つが、放置しっぱなしだったブログを愛着の持てるブログに育てることが目標です。

それをするにあたってデザインで少し気になっていた部分に手を加えることにしました。

今使っているデザインについて

一つの項目を作って説明するほどのものはないのですが、はてなブログ公式テーマのNeutralを使っています。（昨日まではSmoothを使っていました...w これも公式のやつです）

飽きっぽいのでシンプルなものにしたい、方向性が自分の中で固まっていない、といった理由で上記のテーマを設定しており、なんだかんだで気に入っているので使い続けているのですが、使い続けている内に「ここもう少しこうならないかな」みたいな欲が出てきました。

記事表示部分の横幅をもう少し広くしたい

↓いつも使っている23.8インチのモニターで表示した時

↓いつも使っているMacBook Pro 13インチで表示した時

もう少し横幅が欲しいなというところで、以下のように設定しました

#content-inner #main {
    width: 800px;
}

元が620pxで定義されていたので、+180された形になります。

なぜ800pxにしのかというと、PC版ウェブサイトの横幅が標準どのくらい設定されているのか複数のサイトを参考にしたところ1000px前後で設定されていることが多いみたいでした。サイドバーが268pxほどだったのでもう少し広くてもいいはずと思い、この値にした形です。

というか単位pxでいいのか、vw/vhとかに変えたほうがいいんじゃないかとも思ったのですが、このテンプレートの場合他もpx単位になっていたりするので一旦既存のやり方に乗っかることにします...。問題が生じたら対策を考えよう...。

h2に下線を付けたい

記事のタイトルにh1が使われるので、ブログ本文の中ではh2、h3をよく使います。しかし記事の途中で単体で出ると「これはどちらなんだろう」と分からなくなることが多々あります。記事を読むときは少なからず全体の構成を頭の片隅に入れておきたいのでh2に下線などあると嬉しい人です。（右側にtable contentsを付けておくなど表現方法は他にも色々ありますが）

そんなわけで以下の設定を追加しました。

.entry-content h2 {
  padding-bottom: 10px;
  border-bottom: 5px solid #ddd;
}

インラインコードの背景を黒ではなくグレーにしたい

コード挿入時の背景が黒なんだから同じ色でいいじゃないという気もするのですが、私のブログは背景白ベースで行く予定なので、インラインコードまで黒だと主張がいささか強過ぎる気もしました。なのでSmoothテーマで使っていた時と同じグレーにします。

.entry .entry-inner p code {
  background-color: rgba(0,0,0,.03);
  color: #3d4245;
}

おわりに

cssはもともとあまり得意ではないのですが、Google developper toolを触れるようになってからは調査や調整がすごくやりやすくなって本当に有り難い限りです。

今のデザインも気に入っているのですが、今後はもう少し個人の色とかも出していきたいと思っているので、またアイデアが生まれたらどんどんカスタマイズしていきたいと思います。