「修正エコ」スキン作成

　So-net blogにカスタムスキンが提供されたので、さっそく試してみた。見た目は変わっていないと思う。

　まずは、「エコ」スキンの「style.css」の後ろに【現在の追加スタイル指定】で紹介したスタイルを追加した。ただ、それだけではバナーの図などが表示されないので、「images/○○.jpg」「images/○○.gif」となっていたのを例えば（他にもある）次のように変えてエコスキンから図を拝借した。
　http://blog.so-net.ne.jp/_skin/system/101/images/banner-bg2.jpg
　http://blog.so-net.ne.jp/_skin/system/101/images/arrowR_small.gif

　このスタイルは私のサイトの【ここ】にコピーを入れておいた。（削除しました、現在のスタイルシートはblog-style.cssです。）

　次に「@import」を使った方法を試したが、MacOS9.2.2+IE5.1.7とMacOS9.2.2+Netscape7.02ではスタイルシートが無視されてしまってダメだった。

@import { url( http://blog.so-net.ne.jp/_skin/system/101/style.css ); }

/* スキンの改善 */
#side-a { overflow:visible; }
.articles { overflow:visible; }
#main {
float:none;
width:540px;
margin-left:214px;
}
.archive-bottom { clear:left; }
#content { height:auto; }
#comments { overflow:hidden; }
#comment-write { overflow:hidden; }
/* バナーとコンテンツの隙間を無くす */
#banner { overflow:hidden; }
#header { overflow:hidden; }
/* サイドバーの行間を狭める */
.sidebar-body li { line-height:100%; }
/* 引用タグ内の背景を白にする */
blockquote { background:#ffffff; }

/* 小パンダをページの右側に表示させる
body { background:#666666 url("/_images/blog/self/175519.gif") no-repeat fixed right center; }
*/

　要するに、「エコ」スキンのままで、サイドバーで指定していたスタイルをカスタムスキンを利用して指定したいだけである。

　さて、「エコ」スキンの「style.css」の後ろに【現在の追加スタイル指定】で紹介したスタイルを追加しただけでは同じスタイルシートでスタイルを指定して解除するという無駄が生じるので、「エコ」スキンの「style.css」でスタイルを指定している部分を変更したカスタムスキンを作った。

　そのスタイルは私のサイトの【ここ】にコピーを入れておいた。（削除しました、現在のスタイルシートはblog-style.cssです。）

　なんかごちゃごちゃしてしまったのでスタイルを追加しただけの【こちら】（削除しました、現在のスタイルシートはblog-style.cssです。）の方が良いかもしれない。

　根本的な全面的な修正は時間に余裕がある時にやってみたい。ただ、【「clear:both」が抜けていた】で指摘したように、『main要素が終わった後、content要素が終わる前に「clear:both;」が必要』なのに、そこにスタイルを指定することはできない。カスタムスキンを使ったトラブルが続出しそうな気がする。ユーザーの力では改善できない。So-netさんに改善を期待したい。

　なお、私のブログに関して表示の異常に気付いた方がいらっしゃいましたら、コメント欄でお知らせ下さい。m(_ _)m

追記：
　「blog_base.css」が変わっていた。「インターネット上の他人の意見を読んで思ったこと」が少し上になってしまったので下げる指定を追加した。

追記（2007/1/25）：
　私の古い記事の中に長いＵＲＬを記しているエントリーがあり、WindowsのIEではちょうど良い所で改行できないことがあり、改行されない部分が540pxを超えると記事部分がサイドバーの右下に移動するようです。これは改善方法が見つかっていません。m(_ _)m
　ＵＲＬを記さずにリンクを張る方法などで誤魔化したいと思いますので、見つけた方はコメント欄にお知らせ下さい。m(_ _)m

追記（2007/1/25）：
　WindowsのIEで長いＵＲＬが一つの単語と認識されてしまって改行されない問題を改善するために、スタイルシートに次の文を追加しました。

/* リンク付きの長いＵＲＬを強制改行させる（ＩＥのみ） */

.articles-body a { word-break:break-all; }

/* 念のためコメント欄の長い英単語を強制改行させる（ＩＥのみ） */

.comments-body { word-break:break-all; }

　問題が生じるブラウザがありましたら、コメント欄でお知らせ下さい。m(_ _)m

追記（2007/1/25）：
　引用タグの中にいきなり長いURL（英単語）を入れるとIEで表示がおかしくなるようです。改行タグを前に入れると問題は発生しないようです。原因不明です。（追記：引用タグに「style="word-break:break-all;"」を指定すると問題が生じないようです）。

追記（2007/1/25）：
　念のためにスタイルシートに次の文も追加しました。

/* 念のため引用の中の長い英単語を強制改行させる（ＩＥのみ） */

blockquote { word-break:break-all; }