Ellinikonblue.net Devlosxom

crema design 「 『 iPhone テンプレートfor MT 』を公開いたします。」
小粋空間 「 『 iPhoneテンプレートfor MT 』 by cremadesign 」

　日本でもやっぱり旋風となった、 携帯界の黒船「 iPhone 」ですが、 上記のドキュメントを参考にすれば、 blosxom でも iPhone 対応できるかなと。。。 blosxom 風にいくと、 テンプレートではなく フレーバー での 対応になるのかな？

　iPhone フレーバー 。。。 blosxom で えらい人が誰も手を出さなければ、やってみるかな。。。時間ができたときに。。。って、いつ？ (^^;;;>
# Movable Type もよく知らないのに…

　すでにこれだけ日が開くと、日報もないような気もしますが…

　YUI Reset CSS を使用したのち、各要素を再定義していく中で、 手こずったのは li 要素の再定義で、

li { list-style: inherit; }
ul { list-style: disc none outside; }
ol { list-style: decimal none outside; }

とすると、少なくとも Firefox では ul, ol ブロックで指示した文字・記号が行頭にでるようになりますが、 Internet Explorer では うまく行きません。
　IE では、

li { list-style: inherit; }
ul li { list-style: disc none outside; }
ol li { list-style: decimal none outside; }

と明示的に ul, ol ブロック中の li 要素に対して 明示的に再定義する必要があります。 しかし、逆にこのようにだけ指定すると、 今度は Firefox で うまくいかなくなります。

　さらにもう一つ問題があって、 ul ブロック中の中の ol ブロック、またその逆、 加えて ul, ol ブロック中の二階層目の ul, ol ブロック中での li 要素の行頭文字を一階層目と違うものにしたい場合の 定義も別途必要になります。

　と言うことで、真の正解はこれ。

li { list-style: inherit; }
ul, ul li { list-style: disc none outside; }
ol, ol li { list-style: decimal none outside; }
ul ul, ul ul li { list-style: circle none outside; }
ol ol, ol ol li { list-style: lower-alpha none outside; }
ul ol, ul ol li { list-style: decimal none outside; }
ol ul, ol ul li { list-style: disc none outside; }

　三階層目はやめましょう (^^;>

　自分でもあまり美しい方法ではないように思うんですが、 これ以外の解を見つけられませんでした。
　より美しい解をご存じの方、是非教えてください m(_ _)m

　先般から始めております フレーバー の全面改装工事ですが、表向きには何とか改装前と変わらないレベルにはなりました。
　ここまでで、エラスティックレイアウトの採用、 The Yahoo! User Interface Library （以下、 YUI ）から Reset CSS/Font CSS の導入までは終わっています。

　エラスティックレイアウトとは、ちょっと調べてもらったらわかりますが、 Yahoo! JAPAN のトップページでも採用される ユーザがブラウザで文字の大きさを変更しても崩れない 「伸び縮みするレイアウト」のことです。
　実際このページの文字サイズを大きくしてもらうとわかりますが、 どんなに大きくしても基本的なレイアウトは崩れません（のはずです f^^; ）。
　昨今、ブラウザ側に画像を含めてまるごと拡大縮小する機能が実装されるに至って、 今後どれほど意味があるかはわかりませんが、 興味を持ったので取り入れてみました。
　原理は簡単です。基本、幅などの指定を em 単位で行っただけのことです（今のところは…）。 今後グラフィカルな要素を入れ込むとまた一思案しなければならなくなりますが、 それはまたいずれ…と言うことで。

　次に YUI Reset CSS/Font CSS ですが、 一時、話題になったのでご存じの方は多いと思います。 様々なブラウザがデフォルトで持っている設定を、最小の手数でリセットする （要はどんなタグを指定しても装飾されず、またどのブラウザでも同じに見える状態にする） CSS です。
　しかし、知っているのと使ってみるのとでは大違い。
　初期設定を無効にすると言うことは、すべて自分で定義し直すと言うことです。 これが言うが易く行うは難し。
　Google さんに聞いてみても、 「こんな CSS があるよ」はそれこそ星の数ほど引っかかるのですが、 ではこの CSS を使って再定義はこうすると言う情報はほとんど皆無 （私の能力では探しきれなかった可能性も大 orz ）。

　まずやっかいだったのは li 要素のスタイル再定義。
　YUI Reset CSS をかますと、 行頭文字が何も表示されなくなるので、これを再定義しなければなりません。 ということで、単純に

li { list-style: disc none outside; }

とかしてしまうと、ul ブロックであろうが ol ブロックであろうが、 disc になってしまい、かといって

ul { list-style: disc none outside; }

とかしてもそもそも Reset CSS で li 要素で none と指定されているので、 効力を発揮しません。
　正解はこれ…

li { list-style: inherit; }
ul { list-style: disc none outside; }
ol { list-style: decimal none outside; }

だと思うでしょう？ f^O^;

　確かに Firefox であれば これで（万事ではないんですが）おっけーなんですが、 IE では これではだめなんです。
　真の正解は…（つづく m(_ _)m ）

　先般、 Ellinikonblue.com Weblog の ページレイアウトを見直した際、 現状のフレーバーにおけるページ構造にいくつか問題が見つかりました。
　その中でも一番の問題は、作成時に CSS でレイアウト以外に、 ある程度の border 要素などでデザインを入れ込めるよう、 またこの際、 Internet Explorer 6 でも レイアウトが崩れないよう div 要素をてんこ盛りにしたため、ページ構造が複雑化していることです。 うかつに触ると収拾がつかないことになってしまう危険性があり、 また長期間触らないと構造そのものを忘れてしまう傾向にあるので、 図表化しておこうと思います。

　現在（ Jan 2008 現在）の Ellinikonblue.com Weblog の フレーバーのページ構造。 　今後、以下のようなページ構造に単純化し、 フレーバーを修正していくつもりです。 これはあくまで予定で、最終的には変わる可能性があります。 その際は再度、図表化しようと思います。 　当然ながらまずは こちら の フレーバの見直しをかねてぼちぼち実験してみます。