また、背景は文章の読みやすさ優先で薄いグレイなのですが、全面的にグレイにするとちょっと暗い印象になる気がするので、コンテンツの幅より右は白地にして、画面を明るくしています。
しかし、コンテンツの幅をピクセルで指定してしまうと、指定した幅より小さいサイズのウィンドウで閲覧した際に横スクロールバーが出現して、かえって読みづらくなってしまいます。
このため、アクセス時とウィンドウのサイズ変更時にjavascriptを起動してウィンドウサイズをチェックし、ウィンドウの横幅が770ピクセルを切る場合は文章部分の幅の指定を630ピクセルから100%に変更しています。
方法を紹介しておきます。
1)文章部分の幅をIDで指定。
スタイルシート:
#mainarea {
width:630px;
}
2)ウィンドウの幅に合わせて文章の幅を変更するjavascriptを設置。
※06/07/12 標準準拠モード対応を追加しました。
function chkwindowsize() {
if (document.documentElement.clientWidth) { // IE標準準拠モード
wX = document.documentElement.clientWidth;
} else if (document.all) { // IE過去互換モード
wX = document.body.clientWidth;
} else { // Netscapeなど
wX = window.innerWidth;
}
if ((wX) && (wX < 770)) {
document.getElementById('mainarea').style.width = '100%';
} else {
document.getElementById('mainarea').style.width = '630px';
}
}
3)アクセス時とウィンドウサイズ変更時に上記のスクリプトを呼び出し。
<body onLoad="chkwindowsize()" onResize="chkwindowsize()">
WindowsのIE、Netscape、Firefox,、MacのIE、Safari、各最新バージョンでの動作確認済み。NN4.78は動作確認対象から外してます。
06/07/12 追記:
WindowsIEは標準準拠モードと過去互換モードでdocument.body.clientWidthの値が変わってしまいます。
標準準拠モードの場合はdocument.documentElement.clientWidthを使えば正しい値が取れるようなので、スクリプトを一部変更しておきました。
実は迷ログを拝見していて気になったもので、本当に失礼だと思いつつも、こっそりとソースを参照させていただいていました。
Opera8.02でも有効でした。私の環境では旧バージョンでの動作は判りませんが最新版では有効でしたので、参考までにご報告させていただきます。
(Operaで迷ログを拝見させていただきました)
動作状況のご報告、ありがとうございます! Operaでも動作したのですね。良かったです。
ソースの参照は、私はまったく気にしませんので、ご自由にどうぞ。役立ててもらえるほうが嬉しいです。
個人的には、「まさに、欲しかったもの」でして>最大幅限定の機能、使用にさしつかえがないのであれば、自サイトも近日中に、このスクリプトを入れさせていただきたいと思っております。
ところで、文月さまも小説用雛形配布をなさっていることを承知のうえで、これをお願いするのは、まことに身勝手な話なのですが。このスクリプトを組み込んだ形での雛形配布(つまりスクリプト再配布)をお許しいただけないでしょうか。
↓こんな形で…。
http://homepage3.nifty.com/gaia/rearmouse/site/white/doc/650.htm
サイトトップはこちら。
http://homepage3.nifty.com/gaia/
文月さまのサイトに比べると、デザイン力も技術力もはるかに下方をさまよっており、お恥ずかしいのですが…。
色よいお返事を期待しております。
こんにちは。先日はアンケートに投票&記名コメントありがとうございました。
このjavascriptを組み込んだ形での雛形配布に関しては、ご自由にどうぞ。
javascriptやCSSのテクニックは、私もいろいろなところから拾って寄せ集めたもので、威張れるものではありませんし……。
すでにお書きいただいているようにコメントとして作者表示がしてあれば、これ以上の要望は特にありません。
遅ればせながら、ご報告まで。