HTML5的にこのブログはエラーまみれであることがわかった。エラーの大半はaタグのURLにHTMLエンコードしていない&(アンパサンド)があるというものだ。WordPressだとesc_attrとかでURLを囲めばいいのでテンプレートを書き換えて修正しようとおもったけれど、新しいテーマ「Twenty Eleven」はHTML5を積極的に使っているようなのでせっかくなので移行することにした。Twenty Tenテーマでもsectionタグとかを入れて頑張っていたのだけれど、そろそろ潮時かなとか思ったので。
まあそういうわけでTwenty Elevenテーマを少しいじっている。コンテンツ表示の部分を少し広げてサイドバーを縮めるとか、広告を埋め込んだりとかである。しかしいつもハマるのがdivのレイアウトである。cssの属性でいうとfloat:leftとかそんなやつだ。右に入って欲しいdivが下に来たりしてなかなかうまくいかない。またcssも単純ではなくて、いろいろ継承やら何やらで属性をいじってもうまく意図したところが変わらなかったりする。Chromeの「要素を検証する」機能はそういう継承関係を経て、どのcss設定が今有効であるかを教えてくれる。これは非常に便利な機能である。この機能のお陰でどのcss属性をいじればいいのかが容易にわかる。それでもうまくいかない部分があって今悩んでいるところだ。
さらに「Twenty Eleven」のCSSは解像度ごとにCSS属性をを持っている。なので相当複雑になっていて、これは骨が折れるなと感じている。高機能ゆえの複雑さでこれは多くの人が望んだ結果なのだろうけれど。。