ここのココログをデザインするにあたっては、此処録ANNEXに集められているTipsのほか、先駆者たちの知恵を大変参考にさせていただきました。
そこで、お礼の意味も込めて、何回かに分けて、外では見かけなかった、うちなりのTipsもいくつか公開しておこうと思います。
とりあえず、ココログ開始当時に相当話題になったらしいテンプレートによってはIE5.xでサイドバーや投稿記事が下部に落ちてしまうレイアウト問題。なにせ、自分自身がIE5.5で構築しようとしてたもんだから、この問題を解決するのが急務だったのよね。>当方、Win95環境で、IE6はインストールすらできないもんでして(;^^)
どういう問題かは、Tokyo Forumさんのサンプル画像とかを見ていただくとして、すでにその原因と解決法も発見されている。これは、Zattalogさんの解説が解り易い。
ただ、いろんなところで見かけた解決法は皆、追加のスタイルシートで、containerやサイドバーなどのwidthを調整するよう提案していて、ちょっと面倒くさい。なによりHTMLとかが苦手でココログにした人には荷が重い気がする。
でもこの問題、ココログをプラス/プロで利用している人なら、テンプレートビルダーで簡単に回避可能なんです。
具体的には、「デザイン」タブの「スタイル」→「ページ全般の設定」を開くと、全体の背景色などのほかに「枠線」(border)の設定ができるようになっている。
IE5.xでレイアウトが崩れるテンプレートは、一番上の「全般の設定」の枠線が設定されてて、かつ、「左列」「記事表示列」「右列」のいずれも枠線が設定されていないか、どれかひとつのしかも「右」か「左」の片側しか設定されていないはずです。
そこで、枠線が設定されていないどの列でもよいので、その列の背景色と同じ色で「囲む」枠線を設定するだけで、この“IE5.xで下に落ちるレイアウト”問題は回避できます。
これはどういうことかと簡単に説明すると、先の原因の解説を見ていただくとわかるように、たとえば大外の枠線が「囲む」で設定されているとすると、IE5.x的に見ると内側がその枠線分で、-2px(ピクセル)となってしまいますが、テンプレートビルダーでは、内側の各列の、縦の枠線1本につき1pxずつ自動的に全体の幅(width)を広げるようになっているのです。(広げないと今度はIE6でレイアウトが崩れますから)
この理屈が理解できると、手元にIE5.xで確認する環境が無くても、レイアウトが崩れる可能性のあるテンプレートの目星が付きます。@niftyさんがスタイルシートの使い方の方針を変えない限りは、「外枠があって、内側の縦罫線が無いか、あっても1本だけ」のテンプレートは危険と思っていいのでしょう。
ほんとは、@niftyさんが、最初からこの透明枠線を設定してテンプレートを作ってくれてれば、こんな混乱は起こらなかったと思うんですけどね。
コメント