ここのブログとサイトのリデザインをしました
自分のブログなのに少し読みにくくて、メモとしても活用できなかったので、リデザインしました。ついでに、0fk.orgのリデザインも行ってみました。
0fk.orgでやったことは文字列が切り替わるJavaScriptを書きなおしたことぐらいです。ついにIE5をサポートブラウザから切りました。というか、今までIE5で動いていたことに僕もびっくりです。これからはメンテコストを押さえるところはjQueryとYUI CSSを活用していきたいですね。
ということで、そのどちらの恩恵もあずかれないはてなブログのデザインのハマりどころをまとめておきます。
@importがダウンロードされたデータなので困る
Google Web Font APIで少し困るという話です。
はてなは危ないCSSプロパティ（behaviorとか）使わせないために、@importを書くとはてな側がダウンロードしてくるデータを貼りつけてきます。普通はあまり困らないのですが、Google Web Font APIの場合はユーザーエージェントでダウンロードさせるCSSを振り分けてきます（その仕組も正直どうかと思っていますが）。
というわけで、手元にUA変えて落として、woff、ttf、eotのフォントのURLを入手して、振り分けてやるコードを書くとみんなハッピーになれると思います。まぁ、はてなに任せたらttfしかダウンロードされないCSSを貼りつけてくるので、IE以外のブラウザでは表示されると思いますけどねｗ
http://fonts.googleapis.com/css?~を@importで読み込む場合は、はてな側で展開しないとかという仕様になってくれると嬉しいのだけど、まぁ、ならないでしょうね……。
普通の記事にクラスが振られていないので、その場で編集モードのデザイン崩れてちょっと困った
タイトル通りです。
普通の記事はdiv.body>div.section 本文の要素だけど、その場で編集モードはdiv.body>div.section>form 編集関連の要素なので、本文中のimgタグだけ色々やろうとdiv.body>div.section imgと書くとその場で編集モードでぐちゃぐちゃになって泣けます。
記事であるものだけのクラスがあればいいのだけど、そんなものはないのでinheritでポチポチ打ち消す必要があります。
以外とタグが少なくて焦る
細いヘッダー部分を簡単に表すと以下のようになります。
<div id="simple-header"> <!-- ここから --> <a><img id="logo-hatena" /></a> <a><img id="logo-diary" /></a> <!-- ここまでdivなりpなりで挟みたい --> <form> <input type="text" class="search-word" /> <input type="submit" class="search-button" /> <input type="submit" class="search-button" /> </form> <ul class="menu"> <li><a>...</a></li> ... </ul> </div>
コメント部分も同様に示すと以下の感じになります。
<div class="comment"> <div class="caption" /> <div class="commentshort"> <p class="commentdelete">スパムコメントの報告</p> <p><!-- これもクラスが欲しい --> <input type="checkbox" /> <span class="commentator"> <a href=".." class="hatena-id-icon"><img src=".." class="hatena-id-icon">..</a> </span> <span class="timestamp"><a>YYYY/MM/DD HH:MM</a></span> <span class="commentbody">..</span> </p> <p class="commentform">コメント投稿フォーム</p> </div> </div>
全体的にクラスとかもうちょっと欲しいんだけどなーって思えるようなHTML構成でした。
