先日行ったリニューアルの続きです。また、まとまった時間が取り難くなってきたので、小分けにしてメモしておきます(その間に変更点も有るかも知れないし)。色々とトラブりましたが、それらは自分のちょっとした見落としだったり、 iBlog 自体のバグだったりと、懸案だったクロスプラットフォーム(と言っても Panther と WindowsXP のみ)でのブラウザ別の表示の乱れなどに関しては、事、 CSS レイアウトに変えたからと言って(細かい事を言えば色々有るけど)大きくは無かったように思います。いや、きっと有る筈だとは思うのですが、手元に有るブラウザは大した数(特に古いの)がないので。逆にここを見てる方で、変な所が有るのに気付いた方は突っ込んでいただけると助かります。
取り敢えず表示を確認したブラウザ。
デフォルトブラウザ Safari と同じ WebCore を使った物は当然ながら問題なし。 Mozilla Gecco 系も意識していたのでほぼ意図通り。Mac IE 5 もこんなもんでしょう。問題の Win IE 6 系列は半ば諦めて特別な対処は何もせず、 Genelic Font 以外のフォントの指定も止める事にした。なるべくマシに見たいと言う方は Firefox で、お好きなフォントを指定してご覧下さい。Win IE 5 系は VPC の中には有るけど、 VPC 自体のバージョンが古いので開けないでいます(VPC7 欲しいなぁ......)。 iCab は XHTML & CSS をまともにサポートしてないようなので、これも諦め。Mac Opera はどうも CSS ではなくて本文下の Amazon Search by drk7.jp のところで読み込みが止まってしまうようです。原因究明中。
今回参考にさせて頂いたヤスヒサさんの「スタイルシート スタイルブック 」を見ると、ブラウザ別な回避策も有るようですが、そこまではまだしていないです。
つまずいた最大の原因は「カスタマイズのし過ぎ」で、テンプレートにしろ、 CSS にしろ自分で何の為にやっていたか忘れてしまっていた事が多かった為です。最初にテーブルレイアウト状態で CSS を整理してから作業すれば良かったのですが、つい面倒で、「取り敢えずレイアウトしてしまおう」とやり始めてしまったのが間違いでした。細かく何をどうしたか、とか言うのをもし参考にしたい方がいらっしゃれば、ソースなり CSS なりを勝手に覗いて下さい。やってみてレイアウトが崩れる場合は、大抵がソースの中で <div> を閉じ忘れていたりが原因の場合が多かったです。テンプレートだけでなく、ナビゲーション項目が結構穴なので、今後チャレンジされる方は留意してみて下さい。
作業中、例の iBlog 1.4.1による「エントリページのテンプレートが意図しないものに置き換わる」現象も再発しましたが、対処法は一つ前のエントリに書いた通りです。
今回、 CSS いじりしていて勉強になったのは、あまり細かく個々に設定するのではなく、なるべく共通項が効率的に適用されるようにクラスを指定して行かないと、結局何の得にもならない、って事です。当たり前の事ですが、見様見真似で取り込んでいるので、同じプロパティの値を二重三重に指定したりとかなりワケ分け目ワカメな状態になってました。スタイルやデザインは「別ファイルでまとめて指定する事で管理を楽にする」&「ブラウザと言うプログラムに情報を整理して渡す為」の CSS なのに、本末転倒でした。
教訓:先の事を考えるなら思いつきの行動は禁物...orz
カスタマイズするなら、その内容の裏を取って、良く考えてから施行しましょう( ̄▽ ̄υ)アセ...
★今回参考にさせて頂いた書物★
元々はあんでるどんさんがボックスの角丸コーナーの配置をこれを参考にやられていて、参考にさせて頂こうと購入させて頂きました。考えてみたら名古屋オフでお会いしてる筈なのに、全くお話していない方の一人だったりします>ヤスヒサさん。こんなことならもっと話しておくんだった......って、酔っぱらってちゃ覚えてないでしょうが(^^;
Posted by at 10:15
▼1年前はこんなこと書いてました...▼