2012年11月08日

2012 11.08 Thu


ブログの横幅を、ブラウザの大きさに合わせて自動で変動させるスタイルシートの解説。

このブログもリキッドデザインにカスタマイズしました。
ブラウザの横幅をいじってみてください。
820px〜980pxの(ごく僅かな)間で、横スクロールバーを出さずに可変します。
当初800x600pxモニタに合わせるつもりでしたが、理由は後に書きます。


おそらく最も簡単なリキッドデザイン(ブログの記事の幅を可変)
スタイルシートに記述

ブログ全体
#container {
position:relative;
min-width:780px; //最小の横幅
max-width:1057px; //最大の横幅
}


記事部分
#content {
float:left;
right:410px; //右サイドバー部分を余白にする
min-width:316px; //最小の横幅
max-width:auto;
}


サイドバー
#links-right {
position:absolute; //「position:relative;」の#containerを基準にする
top:90px; //ヘッダーバナー余白部分
right:0;
float:right;
width:408px; //サイドバーの幅もmin-widthとmax-widthで可変できます
margin:0 auto;
padding:0;
}



カスタマイズ方法を紹介しておいてなんですが、
個人ブログでリキッドデザインを導入しようと考えている方は、
ちょっと待って下さい。

ブログに導入するのは止めておいた方がいいかも知れない理由

改行がダサくなるかもしれない
(例)
例えば、こんな文章がなんとなくあったとして、
小さなブラウザで見ると改行する箇所がイメージ通りでは
無くなる可能性があります。
例えば、こんな文章がなんとなくあったとして、
小さなブラウザで見ると改行する箇所がイメージ通りでは
無くなる可能性があります。


大きい画像がはみ出す
 記事中に大きい画像、サイドバーも大きく固定している場合、
 画像もmax-width(もしくはwidth:100%;)で可変させないと全体を小さく可変できません。

大して意味が無い
 小さなモニタで見る人のことを考えてリキッドデザインにしましたが、
 そういう人は、横にはみ出すことに慣れています。
 (リキッドデザインではないサイトの方が圧倒的に多いため)
 むしろ記事部分が小さくなることを嫌うかも知れません。
 また、横に大きくし過ぎるのも格好が悪いです。

とにかく面倒くさい
 すべてのページのデザインを想定通りにデザインするのは、
 相当に骨が折れます。


以上のことを踏まえて、カスタマイズをするか決めるべきです。
ヘッダや背景に、(はみ出しても良い)大きな1枚画像のシンプル設計だと
比較的デザインしやすそうな気がします。

このブログは、記事中に大きい画像、サイドバーも大きく固定しているので、
本来ならば、それらの表示・非表示も含めてデザインするべきなんですが、
記事部分の多少の可変だけで燃え尽きてしまいました。

格好いいリキッドデザインに憧れます。
http://www.coprosystem.co.jp/tipsblog/2012/01/06.html

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。