スポンサーサイト 

[--/--/--] | スポンサー広告 | トラックバック(-) | コメント(-) | TOP ▲

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

近代化改装 (というか、ブログのテンプレートを横幅可変に手直し中) 

[2008/10/11] | ブログ日記 | トラックバック(0) | コメント(0) | TOP ▲

 見た目はそんなに変わってないと思いますが、横幅が、皆さんの開いているブラウザの窓の大きさ横いっぱいになっているはずです。
 最近のノートパソコンって、やけに横長のディスプレイなんですね。この間それで自分のブログをはじめて見る機会があったときに、「アレ?」と。・・・・・・ものすごく見づらい感じがしたんです。横幅固定のテンプレートだったので、無駄な余白ばかり広くて。
 それで、このブログも横幅を少し広げてみようかと思ったんですけど、皆が皆、いつもブラウザのウィンドウを最大化して見ているわけでもないだろうし、昨今どのへんが妥当な大きさなんだろうかとしばらく考えておりました。(私はだいたい窓を最大化して見ているので、どうしても考えがそっちよりになるんですが、世の中にはいろんな意見がありました。)

 そういうちょっとした問題意識を持ってあちこち見ていたら、「おぉ、コレは?」と思ったところがいくつかあって。「・・・・・・横幅がなりゆき?」

 サイドメニューなしで横幅なりゆきは、実現するのはそんなにむずかしくなかったんです。スタイルシートで一番外枠(このブログで言うと「#layout」)を「width: 100%;」としてやれば、それでいいだけなので。
 問題はサイドメニューでありまして。試行錯誤の結果、サイドメニューの幅も可変というのは、どうも面白くなかったんです。ブログパーツなど、ここには幅が固定的なものが多いので。
 それでどうやったら、本文ブロックの幅だけを可変にして、サイドメニューは固定幅とするかというのに再び悪戦苦闘。結局どうやったかというと、本文ブロックの枠(このブログで言うと「#main」)には横幅について(width)は何も書かず、ただ「margin-right:380px;」と右端にサイドメニューが入るための余白を残して折り返させるようにしました。

#main {
 margin-right:380px;
 }

 次にサイドメニューを右端に表示させるやり方。これを最初、おなじみの「float: right;」で実現しようと四苦八苦したんですけど、ブラウザによって「margin:」の解釈などが違うので、どうもどのブラウザででも思う位置に表示させるということができなかったんです。
 そんなわけで発想をまったく変えて、二列のサイドメニューのブロック(このブログで言うと「#menu」、「#menu_2」)の場所を「position: absolute;」を使って絶対位置で指定することに。

#menu {
 position:absolute;
 top: 0px;
 right:210px;
 width:160px;
 }

#menu_2 {
 position:absolute;
 top: 0px;
 right: 5px;
 width:200px;
 }

 絶対位置というのをほとんど使ったことがなかったので「top:」とか「right:」とか見慣れんのですが、親要素に対して上から何px、右端から何pxの位置かを指定するってことらしいです。
 よく分かんないけど、やっとうまく行きました!(笑)

 問題点としては、窓をうんと小さく(ディスプレイ画面の1/2以下とか)にした場合に、あまりに本文ブロックが細長くなりすぎますから、「min-width:」を設定すべきなのかどうかというようなことが一つあります。(これ、よく分からないので当面保留。)
 あと「position: absolute; 」を使うと、印刷したときにブラウザがフリーズする率が高いっていう話があるんですけど、まあこのブログを印刷する人はいないでしょうから、その点は気にしないでいいだろうと思っています。(「width:100%;」は印刷用のCSSではよく使われる手法みたいですね。この点がまじめに気になる人は、HTMLのほうで「media="print"」と指定した印刷用のCSSを作って、もう一つアップロードしておくといいんじゃないかと思います。そのときは、サイドメニューは印刷不要だろうから、「#menu,#menu_2 { display:none; }」としとけばいいんじゃないでしょうか。)

 プロのCSS職人じゃなくて、素人が見よう見まねでカスタマイズしてますから、人様にお見せできるような汎用性のあるテンプレートにはできないんですけど、半分は自分好みにカスタマイズするという楽しみでやってます。
 いちおう、FireFox、IE、Opera、Safari、GoogleChromeでそれぞれ動作確認してみましたが、表示の不具合などについて、もしお気づきの点があれば、ご教示いただければ幸いです。

関連記事

コメント

コメントの投稿















管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://zmock022.blog19.fc2.com/tb.php/1348-75177c63

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。