さて、ロボットにとっても綺麗なhtmlにする、と決意してから
土曜日は結局断念し、日曜日は諦めて手をつけず、
そして祝日の月曜日の昼間からPCに向かったわけだが。
あまりにこれまでのサイトのCSSの構造が適当すぎて
どうやってもレイアウトがうまくいかずCSS地獄に陥っていたわけである。
結局phpにしてページを区切るタグでdivタグがぶった切られていることに
2時間くらいして気づき、そこからは猛スピードで追い上げ。
今回このblogをどうやってロボットにとって綺麗にするか、
というプランで考えていたのは、
・メインのブログをコード的に先頭に持ってくる
・アクセス解析や重いコンテンツ、広告は最後にロードする
というたった2つの事で、
ブログ本文のコンテンツをCSSレイヤーでくくり、
ブログ右上のカウントダウンされる数字をレイヤーでくくり、
そしてtab badge(一番ロードに時間がかかる)をこれまたレイヤーでくくり、
とブロックにすると実に8つとかそれくらいの浮遊するレイヤーによって
このページが構成されることになった。
そのコードのdivでくくられたブロックの配置を上記の2点の理念に照らして行い、
結果的に非常に綺麗になった。まあCSSは大変だったんだけど。自己満。
で次にコードそのものの内容についてはジャンキーに教えてもらった
Another HTML-lint gatewayの出番である。
試しにこのページを採点したのだが、-79点!!!
びびった。100点満点-79点なんて採ったこと無い、である。
添削結果を見てエントリーアーカイブのタグをいじること1時間、
+50点!すばらしい。
Amazonや楽天のリンクで減点されるので、
リンクの少ないページで採点し直すと83点!すばらしすぎる。
あとはAmazonへのテンプレートの修正やMovabletypeに標準装備の
driftyなどを使用してタグ的にNGな箇所を微妙に調節していけば
もうロボットとしても結構綺麗なHTMLの完成。さすが俺である。
#ちなみに変更したデザインも自分では相当気に入ってるんだけど
#誰もほめてくれないので悲しい。