本日オープンです

■ 雑記 Posted by ひぐま (Higmmer) on 2005-10-01 at 23:49:19
はじめまして。
「ひぐまのひまグ」管理人のひぐまです。毎日ヒマを持て余してゴロゴロしているプログラマ(自称)、略してヒマグラマーをやっております。自分のブログを持つのはこれが初めてですが、どうぞよろしくお願いします。

ヒマグラム生活の手始めに、このブログのテンプレートを作成するところから始めたのですが、これが意外にクセモノで、なんと3日間も徹夜してしまいました。しかし苦労したおかげで、一応自分では納得できる形にすることができました。

このページはWinXP上のfirefox 1.0.x/IE6.0sp2で表示確認を行っております。もし表示が崩れたり動作がおかしかったりする点がありましたら、この記事のコメント欄またはサイドバーにあるメールフォームからご連絡を頂ければ助かります。

それではテンプレート作成にあたっての苦労話を少々……

当初はテンプレートを自作するつもりはなく、予め用意されている公式テンプレートや、共有テンプレートの中から拾ってきて少し手直しすればいいだろうと考えていました。しかし、いざカスタマイズしようとするとすぐに壁にぶち当たりました。表示ブロックの位置ひとつ変えるだけでも一苦労。おまけにブラウザ毎の挙動の違いやバグに悩まされ、作業はいっこうに進みません。他人の作ったHTML/CSSの解析・修正を繰り返すうち、ソースはどんどん難解・複雑になる一方でした。

そこで悩んだ挙句方針を転換し、ゼロベースから自分で設計し直すことにしました。自分には以前にも別のWebサイトを持っていたこともあったのですが、もはや5年以上も前のこと。フレームやテーブルを多用していた当時とは違い、現在はCSSを利用したブロックベースの設計が主流です。まずはこのギャップを埋めるのが大変でした。公式テンプレートのサンプルを参考に作成していきましたが、なかなか一筋縄ではいきません。

設計の大方針として、固定幅サイズのサイドバーと可変サイズの本文ブロックを作りたい、というのがありました。やはり利用者の画面サイズに合わせて、本文を広く表示してあげた方が便利だろうと考えたからです。しかし、元のサンプルで利用されていたfloat属性と可変サイズの相性が悪く、うまくいかないことが分かりました。いろいろなサイトを調べた結果、はてなダイアリーで利用されていたCSSを参考に、サイドバーはposition:absoluteで固定位置に配置し、その右側に本文ブロックをmargin-left属性を指定して配置しました。

その他、ブラウザによる挙動の違いやバグにも悩まされました。特にIEはCSSの解釈におかしな点が多々あるらしく、入れ子ブロックの表示などで色々と修正を余儀なくされました。また、IE上ではうまく表示されているのにfirefox上で正しく表示されないことがあり、困った挙句ブラウザのキャッシュをクリアするとうまくいくという症状にも遭遇しました(キャッシュの古いCSSを読み込んでいたと思われます)。それにfc2ブログの独自タグの挙動や、コメント欄・トラックバック欄の設置方法…、何から何まで、全てが手探りの状態でした。

HTML/CSSの記述にあたっては、なるべくシンプルで構造化された設計を目指したつもりです(最終的には結構複雑になってしまいましたが…)。一方、元のサンプルでブラウザ毎の違いを吸収するために行われていたいくつかのhack(裏技)は、煩雑になるだけでなく自分の環境では動作確認ができなかったため大半を省略しました。結果として、環境によってはうまく表示されない場合があるかも知れません。もし、そのような点を見つけられましたら、症状とお使いのOS・ブラウザとバージョンを明記の上ご連絡下さい。できる限り対応させて頂きます。しばらくこのテンプレートを使ってみて、特に不具合報告がないようでしたら、fc2の共有テンプレートに登録することも検討しています。

それでは、今後ともよろしくお願いします。

トラックバック

この記事について書く(FC2ブログユーザー)
※言及リンクの無いトラックバックは無効です

PageTop▲

コメント

■ 管理者より
Posted by ひぐま (ID:z1/vyMRg) [URL]  on 2005-10-01 at 23:50:58 [編集]
このサイトの表示に不具合などありましたらこちらにお願いします。

PageTop▲

コメントの投稿

 
 
 
 
 
 (後で編集・削除したいなら必須)
 
  

PageTop▲