今日からあなたもテーマ職人
表示幅を変更してみる
テーマbasic5は、Responsive Web Design（レスポンシブ・ウェブ・デザイン）といって、閲覧者の画面幅（ブラウザ表示幅）によって、表示する幅を可変する新しいタイプのデザインを採用しています。
画面幅 1400px 800px 740px 480pxより小さい場合
詳しいことはまた別の機会（いや、他の詳しいサイト？）に譲るとして、Responsive Web Designとは、現代の大画面パソコンで見る場合や古くて小さな画面のパソコンだけでなく、iPhoneやiPadなどの携帯端末など、あらゆる端末で見ても適切な表示が出来るように考えられているデザインを言います。
上の図を見るとおわかりいただけると思いますが、破綻のないデザインになっているのではないでしょうか？（特に480pxより小さい場合には、文字の大きさなども小さくなるようにしています。）
ところが、もっと大きい画面、例えば横1600pxなどの大画面の場合は、次のような表示になってしまいます。
これでも見にくいことはありませんが、大きい画面に広く情報を表示したい場合は、少し物足りない気がすることも否めません。（正直、このあたりについては、コンテンツの内容によって広げた方が良いものやそうでないものがあることも事実です。あと、趣味の問題とかもありますので、一概には言えませんが。）
そんな場合でも、簡単に変更が可能です。
再び、CSSファイルの登場です。
３３行目の #wrapper に注目！
#wrapper { position:relative; margin: 5px auto; max-width: 980px; width: 90%; background: #fff; padding: 0 5px 10px; }
この部分が、真ん中の表示部分全体を包んでいるボックスなのですが、max-width: 980px; というのが、最大幅表示の設定です。そう、この記述を変えると表示幅変更ができます。
max-width: 980px;
を
max-width: 1280px;
に変えてみましょう。はい、広がりましたね。
おっと、先ほど採用したヘッダーの画像の横幅が小さいので、ちょっと合わないですが・・・それはちょっとおいといて
この場合は、別途、合うサイズの画像を用意してくださいね。
えっ？ まだ、広がりが足りない？
では、max-widthの記述を削除してみましょう。 最大幅表示設定が消えるので・・・多分、一杯に広がるかな？
っと、微妙な広がり方ですね。
これは、width: 90%;という部分が効いています。全体幅の９０％で表示してね！という記述です。 では、これをwidth: 100%; にすると・・・実は、paddingの設定などとぶつかって余りよろしくないので、width: 98%; にしてみましょう。
ほとんど、画面一杯にまで広がりましたね。これだと、全く別物のテーマのように見えます。
まだ上下左右に少し余白が残っていますが、もちろんこれを無くすことも可能です。でも、paddingなどの余白設定を生かすようにするには、幅は98%で押さえておいた方が無難です。
もし、この状態で画面一杯感を出すなら、背景を表示しない設定にするのがお奨めです。
こんな感じになりました。
ヘッダ画像をやめて、背景も同じ白色を採用してみました。これなら、普通のリキッドデザインとして使えると思います。