文字を大きくする 文字を規定のサイズに戻す 文字を小さくする

hatena chips

MS Access Tips/Sample and FC2Blog customize and etc...

<<自作関数に引数の定数リストを表示させる | ホーム | リンクテーブルがあるMDBでのデザインビューでの操作が重い>>

リキッドスタイルに最大幅と最小幅を設定

Category: ブログ-カスタマイズ-共通

最近、このブログをちょくちょく見に来ている人は、毎日、ブログのどこかが変化しているいることに気がつかれたでしょうか。そうです、カスタマイズにはまりました。

昔、ホームページを持っていた頃は一通り、HTMLは覚えたのですが、その後、WEBの世界も進化して、CSS とか ブログ とか名前だけで中身はまったく分からなくなっていのですが、ブログを FC2 に変更していじるようになってから CSS（スタイルシート）、JavaScript を少しずつ勉強して、いろいろいじっては実験して、遊んでいます。

どこをどういじったか、分からなくなりそうなので、いじったところをブログに載せておこうと思います。

とりあえず、地味な部分ですが、結構、苦労したので、備忘録として。

このブログはプラウザのウィンドウのサイズ変更によって表示領域も追随して変化します。リキッドスタイルというらしいです。それに対して、表示幅が固定なのはソリッドスタイルだそうです。

このスタイルのメリットはウィンドウサイズにかかわらず無駄な空白でできないということです。しかし、デメリットとして、画面の幅を狭くするとレイアウトが崩れて読みにくくなる、広くしすぎると１行がやたら長くなりまた読みづらくなるということです。

MinWidth1.gif

そこで、最大幅と最小幅を設定できないか調べてみました。

難易度: 難易度: 2

スタイルシートのリファレンスを調べてみると、min-width, max-width というが使えそうです。

私のテンプレート（death）の HTML CSS を見てみると下記のようなブロック構造になっています。 （後で気がついたのですが、テンプレートとしてはかなり特殊な構造のようです。）

テンプレート HTML

テンプレート スタイルシート （位置決めに関係ある要素のみ抽出してます。）
というように右ブロックを absolute で位置決めしているようです。 そこで、

テンプレート スタイルシート とbodyに 最大値、最小値を設定してみました。

MinWidth3.gif

失敗です。幅を小さくすると横スクロールバーが現れて幅が固定されるのですが、メインの記事 にサイドメニューがかぶってしまいました。また、広くすると、記事本体は、最大幅で固定されるのですが、サイドメニューが右に張り付いたままなので、記事とサイドメニューが離ればなれになって見栄えがよろしくないです。 .left に max-width, min-width を設定しても同じ結果です。

そこで、全体の親となるブロックを作成して、その中に、他のブロックを入れてしまうことにしました。 （他のテンプレートを見てみると、このような構造が一般的なようです。） で、そのコンテナに、max-width, min-width を設定します。

としてみました。

MinWidth4.gif

うまく行きました。最小幅以下になると横スクロールバーが現れて、記事本体にサイドメニューが重なることもありません。広くした場合は、サイドメニューも最大幅の位置に固定されて、離ればなれになることはありません。

注意点は、親ブロックに、position:relative; を設定しておくことです。そうしないと、子の位置決めの基準がbodyになってしまうのでレイアウトが崩れてしまいます。

さて、これでうまくいったと安心して、さっそく、テンプレートを更新しました。
ところが、しばらくして、自分のブログを最後までスクロールして、FC2の１行広告が表示されてないことに気がつきました。
これは、えらいことです。規約違反で、公開停止されるおそれがあります。

いろいろ悪戦苦闘して、 １行広告の載っているフッターブロックにも position: absolute; を設定してボトムに位置決めすることで表示できるようになりました。 このままでは、記事本体とフッターが重なってしまうので、.left の下paddingを調整しました。

これで、なんとか、公開停止にならずにすみます。しかし、CSS は難しいですね。まったくの手探り状態です。

このテンプレートがかなり特殊なので、他の人の参考になるかどうかは分かりませんが、もし参考になれたのなら幸いです。

補足

positionプロパティの使い方はなかなか難しいのですが、WEB工房きくちゃんの 表示位置の調整（position） の説明が図もあって分かりやすかったです。

また、IE6 では、min-width, max-width に非対応なんですが、IE6でmin-width,max-widthを実装する：CSS で紹介されている方法で対処できます。

関連してそうな記事


拍手する←面白かった、or 役に立ったなら、ポチッとしてね！！

テーマ:ブログ | ジャンル:コンピュータ | タグ: ブログ カスタマイズ 共通 CSS テンプレート

  1. EDIT
  2. 2009/04/06(月) 15:16:17
    3. | トラックバック:0
  3. | コメント:0
  4. | ▲PageTop▲
<<自作関数に引数の定数リストを表示させる | ホーム | リンクテーブルがあるMDBでのデザインビューでの操作が重い>>

コメント

コメントの投稿


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

トラックバック

トラックバック URL
Copy
この記事にトラックバックする(FC2ブログユーザー)