引き続き、CSSでデザイン・レイアウトをいじった。
まず、幅が狭いのが気になったので、「現役プログラマのWordPressカスタマイズ相談」様を参照して、幅を広げた。
そうなると今度はスマホがレスポンシブ非対応になる。
面倒なので、スマホでの見え方にこだわりはないので、こちらはデフォルトに戻した。
苦戦したのがヘッダー。
画像を使うとなぜか、謎の余白が……
一体なんなのか、このタイトル画像の下の余白は。
なんのためにこの余白がわざわざ挿入されるのか、さっぱりわからない。
試行錯誤して、あちこちのブログを探しまわりながら、いつの間にやら余白は無くなってくれた。
なので、参照ブログがどれなのかも分からなくなってしまった。
とりあえず、padding-bottomを0pxにしたら、だいぶ縮んでくれたような気がする。
しかし、こういった話では何の役にも立たない。
前回の記事は特に人様のお役に立つようなことも書いておらず、ただの愚痴だけで終わったのだが、それにも関わらず★一杯つけていただき、感謝。
一つだけ、ささやかに役に立つかもしれない話。
グローバルヘッダーの色変えについて。
グローバルヘッダーとは、はてなブログの最上部にある「Hatena Blog」「記事を書く」「ダッシュボード」とか書いてあるツールバーのようなものだ。
デフォルトでは黒になっているはず。
ここの色変更については、あちこちのブログで紹介されている。
#globalheader-container {
color: #ffffff;
background-color: #ffc400;
}
background-colorがバーの色で、colorが文字色だ。
カラーコードを任意のものに変更して、デザイン→カスタマイズ→｛｝デザインCSSに貼りつける。
ところが、これをコピペしても、なぜか効かないのだ。
そこで、このようにした。
#globalheader-container {
color: #ffffff;
background-color: #ffc400 !important;
}
!importantを書き加えることで、強引に効かせてしまう。
ヘッダーのボーダーも効かなかったので、この方法でやった。
手段は選ばず。
だって、気になると眠れないんだもん。
参照サイト
引用部分のCSSを参照したところ
素材サイト
ヘッダー画像のみかん素材をお借りしたところ
