「エコ」スキンの改善法

追記（2007/1/2）：
　以下で紹介している手法はSo-net blogが正式に改善されるまでの対処療法です。正式に改善された後に以下のスタイルシートの指定を残しておくと、逆に閲覧できなくなるトラブルが発生するかもしれません。ご注意下さい。

　タイトルを変えて冒頭に追記します。

　【「エコ」スキン】が私の環境（MacOS9.2.2+IE5.1.7）で【このように】に表示されてしまう問題の中で、メインの背景色が「#ffffcc」にならずに全体の背景色である「#666666」になってしまう問題は【スタイルシート】を次のように変えることで改善されるようです。（追記：私のブログで確認中です）

修正前：

/*-----Content-----*/

#content{
}

　　　↓

修正後：

/*-----Content-----*/

#content{
overflow:hidden;
}

追記：
　WindowsXPのIEでは問題なさそうですが、MacOS9.2.2+Netscape 7.02では私のブログはまともに表示されないようです。ただし【これ】は問題ありません。【ペン&ペーパー】でも同じ症状がありました。原因不明です。m(_ _)m

追記：
　content要素とbanner要素の間に隙間が開いてしまう問題は、【スタイルシート】を次のように変えることで改善されるようです。（追記：私のブログで確認中です）

修正前

#banner {
height: 137px;
clear:both;
}

　　　↓

修正後：

#banner {
height: 137px;
clear:both;
overflow:hidden;
}

追記（2006/12/24）：
　Netscape 7.0.2で「エコ」スキンがまともに表示されない問題は【以前】からあった。昨晩、いろいろ試したところ、サイドバーの要素を１０個以下にして、かつ本文の量を減らしたらNetscape 7.0.2でも表示された。サイドバーの要素を減らしただけではダメで、本文の量を減らしただけでもダメだった。「このサイドバーを表示しなければ大丈夫」という状態でもなさそう。意味不明。

追記（2006/12/24）：
　Netscape 7.0.2で「エコ」スキンがまともに表示されない問題は、「side-a」要素と「main」要素との長さの差に関係がありそう。まともに表示された状態で「main」要素の本文を１行ずつ増やしていったら、途中で「main」要素も「side-a」要素も消えた。まともに表示された状態で「side-a」要素を一つ増やしたら消えた。短い要素に変えたら表示された。（追記：まともに表示された状態で「side-a」要素の一つを１行ずつ増やして行ったら途中で「main」要素も「side-a」要素も消えた）。スタイルシートに何を加えたらまともに表示されるようになるのだろう？

（以下はタイトルを変える前の記事）

旧タイトル：「エコ」スキンの問題はHTMLに

　下の私の記事について、再度確認したら、間違いだった。「</div>」を一つ削除することで改善したのだが、この「</div>」は余分ではなかった（追記：「</div>」で閉じていないため「id="footer"」の部分が隠れてしまうトラブル新たに発生した）。「<div id="footer">」の領域の下に移すことで同じように改善された（追記：「id="footer"」の部分が隠れてしまうトラブル発生した）が、トラブルの原因は不明である。間違っているので下の私の記事を削除しても良いのだが、参考になるかもしれないので残しておく。ご了承いただきたい。

（以下は訂正前の記事）

旧タイトル：「エコ」スキンの問題はHTMLに

　【「エコ」スキン】が私の環境（MacOS9.2.2+IE5.1.7）で【このように】に表示されてしまう原因が分かった。

　まずはヘッダ以外の部分（サイドバーとメインの部分）の背景色が「#ffffcc」にならずに全体の背景色である「#666666」になってしまう問題。
　【スタイルシート】に問題があるのだと思って調べたけれど見つからない。そこで、【スタイルシート】内で「#ffffcc」を使っている所を調べたら「#container」の部分しかない。それならば【「エコ」スキン】のソースで「#container」が影響を及ぼしているのはどこまでだろうかと調べたら、「<div id="container">」と「</div>」に囲まれた部分である。問題は閉じる方の「</div>」の位置。ソースの上から順番に見ていった。すると、どうやら一番下の方の次の部分にあるらしい。

</div>
<!-- /Main -->

</div>
<!-- /Content -->

</div>

　さて、どの「</div>」だろうか。実は「<!-- /Content -->」の前の「</div>」である。では「<!-- /Content -->」の下の「</div>」はどこから始まっているのか？　見つからなかった。すなわち、「<!-- /Content -->」の下の「</div>」は必要なかったのである。そこで「</div>」を一つ削除して次のようにした。

</div>
<!-- /Main -->

</div>
<!-- /Content -->

　すると、【このように】に表示される。記事部分の背景色が「#ffffcc」になった。これで先日のメンテナンス後に生じたトラブルは消えた。

　次に、その前のメンテナンスの時に生じた、ヘッダとメインの部分の間に生じてしまう隙間の問題。
　これはスタイルシートの問題だと思って、私のブログではスタイルを独自に指定して対処してきた。しかし、上記のようにＨＴＭＬソースに問題があるという観点から調べてみた。
　今回のトラブルで隙間の部分だけ背景色が「#ffffcc」になっていたことから、隙間の部分はヘッダに所属すると判断した。そこでヘッダの部分のソースを調べた。

<!-- Header -->

<div id="header">
<p id="memberMenu">
<a href="#">○○○</a> さん
<span class="menuDecoration"><a href="#">管理ページ</a></span>
<span class="menuDecoration"><a href="#">自分のブログ</a></span>
<span class="menuDecoration"><a href="#">ログアウト</a> </span>
</span>

<p id="globalMenu">
<a href="http://blog.so-net.ne.jp/">So-net blogトップ</a> |
<a href="http://blog.so-net.ne.jp/bkig-help/" target="_blank">使い方</a> |
<a href="http://blog.so-net.ne.jp/faq/" target="_blank">Q&A</a>
</p>
</div>

<div id="banner">
<h1><a href="#">My Happy Diary</a></h1>
<p id="lead">ふと思いついたことを日記形式で紹介します。</span>
</div>

<!-- /Header -->

　まず、「<div id="header">」の部分は「<p id="memberMenu">」で始まっているが閉じる「</p>」がない。そして「</span>」が一つ多い。
　同じように、「<div id="banner">」の部分は「<p id="lead">」で始まっているが「</span>」で終わっている。ここに問題があった。「<p id="lead">」で始まったのだから「</p>」で終わっても良いがそれでは改善されないので「</span>」で終わっているのだから「<span id="lead">」で始める。これで改善した。ついでに「<div id="header">」の部分も一つ多い「</span>」を「</p>」に変えた。次のようになる。

<!-- Header -->

<div id="header">
<p id="memberMenu">
<a href="#">○○○</a> さん
<span class="menuDecoration"><a href="#">管理ページ</a></span>
<span class="menuDecoration"><a href="#">自分のブログ</a></span>
<span class="menuDecoration"><a href="#">ログアウト</a> </span>
</p>

<p id="globalMenu">
<a href="http://blog.so-net.ne.jp/">So-net blogトップ</a> |
<a href="http://blog.so-net.ne.jp/bkig-help/" target="_blank">使い方</a> |
<a href="http://blog.so-net.ne.jp/faq/" target="_blank">Q&A</a>
</p>
</div>

<div id="banner">
<h1><a href="#">My Happy Diary</a></h1>
<span id="lead">ふと思いついたことを日記形式で紹介します。</span>
</div>

<!-- /Header -->

　すると、【このように】に表示され、隙間が消えた。

　私が気付いた残る問題はプロフィールの部分が表示されていないこと。これは気にしてないので分析しない。

　さて、私が気付いた問題点にSo-netさんは気付くだろうか？　早く気付いて改善してもらいたいものである。他のスキンの問題もスタイルシートではなくＨＨＭＬソースに問題があるのかもしれない。もしもスキンの改善を試みているのなら、スタイルシートだけでなくＨＴＭＬソースも疑ってみる必要があるだろう。