ヘッダーの高さの変更がむずかしい - サブブログとハサミは使いよう

ブログテーマを「Plain」にして、いろいろイジくってみた。けっこう自分のイメージに近い出来になってきた。自分でもこのセンスはどうかと思うがまぁしかたない。

「Plain」のデフォルトからサイドバーを下げて、よくある２カラムのデザインにした（変更方法は作者様のサイトに書いてある）。

「display:table」という呪文とその解除方法

ここまできて、ヘッダーの高さの変更に四苦八苦した。blog-titeが「display:table」になっているのが原因らしい。

どうにもならないので作者様の意図に反するが止む無く「display:block」に変更。この時、#blog-titleと#blog-title-inner両方とも変更しなければならない。

paddingとか vertical-align: middle で何とかなると思ったがならなかった。なので手動でいろいろ試して調整した。

これで良し！、と思ったらまたまた次の試練が！

レスポンシブなのでスマホの画面も変わる。確かめてみたら、ブログタイトルが途中で切れている。

メディアクエリというのをイジらないとダメなんだった。

作者様のサイトでは@mediaのコードが書いてあったが、反映されなかったので@media screen and に書き換えたら反映された。

@media screen and (max-width: 767px){#blog-title{font-size:50%;width:100vw;}}

タイトルがものすごくちっちゃいが、見切れるよりマシだろう。自分はPC派なのでこれで良しとしよう。もう疲れた。