Another HTML-lint gateway (July 18, 2006)

さて、ロボットにとっても綺麗な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の完成。さすが俺である。

#ちなみに変更したデザインも自分では相当気に入ってるんだけど
#誰もほめてくれないので悲しい。

July 18, 2006 4:54 PM | E
Copyright© 2004-2008 Yukito Inoue All rights reserved.

Link

Related ESCAPE>>

　　- 父親が書いているブログ海外ミステリの本棚のデザインをいじった。右上にナガマルが登場している。真ん中の本はTokyo Style、右にはグラス。DSC-T10で撮影した。海外

　　- 何らかの理由でMovabletype3からエントリーをエクスポートして Movabletype4にインポートする場合、エントリータグ、コメント、トラックバックがエクスポートされな

　　- 新しいサーバ木太郎の登場で MT4の導入でいきなり手間取ったのがインポート/エクスポート。これはコッチンの弟であるオステタンが出てきて解決してくれた。彼は非常に礼儀正しいので、

　　- 記事の自動保存、静的ページの管理、複数ブログをまとめたポータルページの構築など欲しいなあと思っていた機能が追加された Movable Type 4バージョンアップはもうそろそ

　　- Movabletypeのテンプレートをまたいじった。今回は主にCSS。人気ブログをよく見ているとレイアウトが上手い。ここ数ヶ月モニタリングしていると、blogのヒット数は500

　　- Movabletypeの難しいところは、例えDreamweaverのプラグインでコンテナタグ対応のwysiwygな状態で編集をしたとしても、 CSSをオンラインから読み込んでくれ

　　- まじめにGoogle sitemapにサイトマップを登録し、 htmlの文法も直した。しかし全然テクノラティとgoogleブログ検索に引っかからないのはなんでだろうとだいぶ悩ん

　　- この前-546点だったこのblogのHTMLのソースを直し平均50点くらいまで持って行ったのが3月3日。その他のページに関してもゆっくりと修正をかけているのだが、一昨日あたり

　　- movabletypeで投稿された記事と同じカテゴリーの記事の一覧を表示する MTTagInvokeプラグインを入れた。こんな感じで同じカテゴリーのタイトルと、最初の38文字を抜

　　- movabletype 3.34の導入をした。 updateでやっかいなのはカスタマイズしているエントリー画面なのだが、今回はあっさりDEKITA。エントリー画面でamazon

　　- tagを利用して関連エントリーを抽出する手法は広く知られていたがまたプラグインを新しくした。そのため全てのテンプレートの再構築が必要になってしまった。これやるとタグクラウドも

　　- Google sitemap改めGoogle Webmaster toolsのページ分析を見ていると、このサイトのコンテンツとして googleのクローラーが認識しているのは、

　　- Ogawa::Memorandaで公開されているCaptcha Plugin を入れたのだが、かなり苦労したので同じような苦労にあっている人向けに何をどうしたかを書いてみる。ま

　　- ということで、高校の同級生まっつぉがタグについてまじめに考察している間にも全く無意味な自分用の言葉でエントリーにタグをつけ、実装してみました。 tanzaniaとかthaila

　　- Movabletypeが3から対応したTag、なのだが、このところトレンドになっているソーシャルタギング、タグクラウドを見ているうちにそのビジュアル的なかっこよさに惹かれてそ