数日前から適用していますが、ブログヘッダーのデザインを変更してみました。
これまではブログヘッダーにフリー画像を設定していました。
それからしばらくしてグローバルナビゲーションを配置しました。
するとブログヘッダーとグローバルナビゲーションの色で微妙に異なるのが気になってきました。
ということで、今回のタイミングで対応してみました。
それでは本題へ。
変更内容（画像）
まずは変更前後の画像を貼ります。
変更前
変更前はフリー画像を設定しています。
グローバルナビゲーションの色にかなり近いフリー画像ですが、よく見ると白い点々みたいなのがあります。
おそらく星空のフリー画像なんだと思います。
画像を削除（デフォルト状態）
画像を取り除いた状態がこちらです。
この状態だとグローバルナビゲーションの方が目立っていて、ちょっとバランスが悪いかなと。
適用したCSS
/***ブログヘッダー***/ #blog-title { background-color: #111; } #title a { color: #fff; } #blog-description { color: #fff; } #blog-title:after { content: none; } /***ブログヘッダーここまで***/
上記のCSSを適用すると、ブログヘッダーのデザインが変更されます。
デザインの適用手順
一応、適用手順を載せておきます。
注意事項
はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。
今使っているSilenceというデザインテーマに追加でCSS適用した形となります。
他のデザインテーマを使っている場合や、他にもCSSやJSを埋め込んでいる場合はうまく動かない可能性があります。
もし今回記載のCSSを適用しようとしている場合、その辺りご了承ください。
おわりに
ということで、「ブログヘッダーのカスタマイズ」に関してアレコレ書いてみました。
変更前のフリー画像もけっこう気に入っていたのですが、変更後の方が色が揃っていて馴染むなと。
変更前後で縦幅が変わったことに、最初は違和感がありました。
でも数日でその違和感もなくなりました。
またなにかブログカスタマイズしたら記事にします。
関連記事
HTML・CSSに関連する記事は他にも書いています。
気になる記事があればぜひ。
