CSS初め - 時計を壊せ

このブログのデザインに対して冷静になった結果、どうも背景の主張が強すぎてタイトルとかが読みにくいという思いに至った。はてなブログはたしかカスタムCSSが書けたはずなので、CSSでなんとかすることにした。

書いたのはこんな感じ:

body:before {
  content: '';
  position: fixed;
  top: -5px;
  left: -5px;
  width: 120vw;
  height: 120vh;
  z-index: -1;
  background: inherit;
  filter: blur(5px) brightness(40%);
}

div#wrapper {
  margin-right: -221px;
}

div#wrapper>* {
  margin-right: 220px;
}

aside#box2 {
  width: 180px;
}

要素名は詳細度を調整して優先されるようにこうした。!important 使え案件な気もする。

背景を暗めにしてぼかす

はてなブログ全部なのかこのデザインのみなのか分からないけれど、背景画像はbodyに設定される。暗めにするだけならその直下で全部くるんでるdivとかで background-color: rgba(0, 0, 0, .6) とやってやればよいのだが position: absolute な要素があるのでうまく行かなかった。

CSS3 filterを使うことにしたが素直に適用すると背景以外の全体に掛かってしまう。困ってぐぐってみたところこんな記事がヒットした。

kuroeveryday.blogspot.com

最背面に置いた疑似要素に対してやれば良い感じなのねーということで、position: fixed な疑似要素を width: 100vw; height: 100vh; で画面サイズに合わせて最背面に配置するという感じでうまくいった。ついでなのでblurもかけてボカした。ボカしたところ端っこが残ってしまったので top: -5px; left: -5px としつつ width: 120vw; heigth: 120vw としてお茶を濁した。 position: fixed はiPhoneで描画がアレだったきがするけど、どうせデザインはモバイル向けに適用されないので良いでしょう。

サイドバーを広げる

Twitterのフォローボタンがきゅうくつな感じだったので、広げたくなった。

単純にサイドバー #box2 を広げたがうまくいかず、下にコンテンツが回ってしまった。デバッガを眺めていたところ float: left で実装されていてそれで吹っ飛んだことがわかった。もう少し調べるたところ、どうも#wrapper と #wrapper > * への指定がキモらしい。

#box2 には 160px の幅と 20px のmarginが全体に設定されており、横幅は合計で 200px となる。一方、 #wrapper には margin-right: -201px; という怪しげなネガティブマージン、 #wrapper > * には margin-right: 200px; が設定されていた。つまり #wrapper のネガティブマージンでサイドバーぶんの余白+1pxを確保して、 #wrapper > * でmarginをもとに戻すことで余白を確保したのだろう。コーディングの苦労が伺える。いまであればFlexboxでやるのが良さそうだが、当時はこういうハックしかなかったのだろう。実装方法に関心した。

というわけでちょっとこのブログが見やすくなった気がします。