リニューアル版zenbackのCSSカスタマイズ

ブログの基調カラーが緑ということもあり、以前のzenbackのデザインとカラーリングは弄らなくてもブログにジャストフィットしていたんだが、先日リニューアルされたzenbackのデザインだと少し違和感が出たり、Internet Explorerでの表示が変だったのでcssレベルでカスタマイズした。

zenback_css_custumize

右図の通り、ブログ上の投稿題名をはじめとしたメニューに完全に溶け込ませるレベルまで変更した。CSSカスタマイズしてることは珍しくもないが、ここまで変更してるサイトは割と珍しい・・・かもしれない。(画像はクリックで拡大)

といっても、単にメニューのバッググラウンドイメージを変更したり、radius指定でカドを丸めたりしているだけなんだけど。

あと、IE対策の為に、少しmargine指定値を変更した。デフォルトだと、FirefoxやChromeでは問題ないんだが、IEで表示させた際に隙間が空き過ぎ、ブラウザ非互換性が顕著にあらわれ過ぎるのだ。

もっともブラウザの非互換性は以前にも書いたが、下図のように取り上げればキリがない。今回も、radius指定して角を丸めて遊び心を出しても、下図同様にIEでは反映されず涙目だ。

three_browser_differences_thumb

話を戻してCSSカスタマイズについてだが、「ブログパーツのid/class構造とcssについて」でhtmlの構造と対応するCSSが公開されているから、特に書くべきこともない。

~fin~

だと備忘録にもならんので、一応、上記のとび先にあるCSSからの変更点でもメモ代わりに書いておく。

まずIEで隙間が空きすぎる問題の対策として、下記のコメントアウトしてある箇所の数値を修正。zenbackのデフォルトのままでは余計なところまで空いてしまっていたので、その修正だ。なお、タイトルの裏地となる画像を後述の通り変更するんで、下記ではフォントを白から黒に変更してる。

上記で隙間が詰まることは確かなんだが、ソーシャルブックマーク(Google +1ボタンとかいいねボタンとかTwitterボタンとかはてなブックマークボタンとか)の上下までが詰まってしまうので、別途以下の記述を追加して個別に上下の隙間を追加する。

これでもIEでの表示はまだ「みんなの記事」部分が完璧じゃないんだが、囲いの構造が深すぎて面倒になったので諦めた。\(^o^)/また暇なとき調整するかもしれないが、正直、公式レベルでそのうち直ることを期待してしまう。てか、IE絶滅してくれ (ぉいw

タイトルについては、裏地の画像をブログテーマのH3以上で使っているものに変更してrepeatで敷き詰め、radiusでの角の丸め処理を以下のようにして追加。これにより、zenbackのサーバに小さい画像を取りにいかなくなるので、多少、向こうのサーバの負荷軽減に繋がる。デザインを変更しない場合でも、軽いサイトに小さい画像を置いて下記のように変更するのも、負荷軽減という観点からすればアリかもしれない。

あと、タイトル左のborder-left指定でズラして着色している色については、zenbackデフォルトの基本カラーを踏襲させてもらった。例えば、上記のtwitterだと水色っぽい色になる。(構造は同じだから、はてぶや関連記事とかは全部書かずに割愛)

これで、俺のブログで使っているTwentyTenをチョイ変したテーマに溶け込むデザインになったとさ、めでたしめでたし。


カテゴリー: ネット パーマリンク

    コメントを残す

    メールアドレスが公開されることはありません。