ヘッダーの高さの変更がむずかしい
ブログテーマを「Plain」にして、いろいろイジくってみた。けっこう自分のイメージに近い出来になってきた。自分でもこのセンスはどうかと思うが まぁ しかたない。
「Plain」のデフォルトからサイドバーを下げて、よくある2カラムのデザインにした(変更方法は作者様のサイトに書いてある)。
「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派なのでこれで良しとしよう。もう疲れた。