2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

最近のコメント

最近のトラックバック

無料ブログはココログ

« 本日の一枚 with DiMAGE Xg | トップページ | 横浜倉庫レンガと青梅の桜 »

簡単に“IE5.xで下に落ちるレイアウト”を回避する方法(プラス/プロ限定)

 ここのココログをデザインするにあたっては、此処録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さんが、最初からこの透明枠線を設定してテンプレートを作ってくれてれば、こんな混乱は起こらなかったと思うんですけどね。

« 本日の一枚 with DiMAGE Xg | トップページ | 横浜倉庫レンガと青梅の桜 »

「ウェブログ・ココログ関連」カテゴリの記事