Templates for SLMaMe

今回は、ブログの横幅を変更する方法をご紹介します。
ブログのヘッダーいっぱいに画像を表示したいと考えてらっしゃる方は、まずブログの横幅を決めてからヘッダー用の画像を作成されると良いでしょう。

このブログで使用しているテンプレート「シンプルグレイ」（幅 100% ではない方）では、横幅が 740px に設定されています。今回はこれをもう少し広げたいと思います。

Web サイトの横幅はどれくらいが良いの？

まずは Web サイトの横幅について少し考えてみましょう。

ここ数年の液晶ディスプレイのシェア拡大と共に、2008年１月に Yahoo! Japan が横幅 950px のデザインにリニューアルされ、その後、主要ポータルサイトやコミュニティサイトが軒並み横幅 850px 〜 1000px のデザインに変更されました。今後は 1280 × 800px 以上のディスプレイが主流になってくると予想されています。

しかし、Eee PC に代表されるミニノート PC の存在や、 800 × 600 px のシェアが減少こそすれ、まだ多くの使用者がいることなどから、 Web デザイン関連のサイトやブログでは「 Web サイトの横幅は何 px が妥当なのか」といった話題が何度か持ち上がっています。

情報量が多いニュース系のサイトでは、横幅を 800px 以上にする必要性があります。
例えば、サイドバーを２つ用意し、出来るだけ多くの広告をサイトの上部に表示したい場合などですね。そういったサイトでは、本文を横スクロール無しで読めるよう、メインエリアを左側に配置し、サイドバーを右側にまとめて配置していることが多いです。この手法を取り入れれば、横幅を 800px 以上にしてもユーザビリティ（使いやすさ）を保つことができます。

だからと言って、全てのサイトが横幅を 800px 以上にしなければならないというわけではありません。「左右の余白が気になる」という理由だけでサイトの横幅を広げるのではなく、サイトの目的やビジュアルイメージ、ターゲットユーザーのことを考えてデザインしましょう。

カスタマイズ方法

今回手を加えるテンプレートは、「スタイルシート」のみです。

ブログ全体の横幅を指定しているのは以下の部分です。
エディタを使用している方は、142行目辺りを確認してください。

#container{

   font-size: 12px;

   width: 740px;

   background-color: #ffffff;

   margin: 0px auto;

   position: center;

   text-align:left;

}

横幅を 800px にしたい場合は、「width: 740px;」の部分を以下のようにします。

#container{

   font-size: 12px;

   width: 800px;

   background-color: #ffffff;

   margin: 0px auto;

   position: center;

   text-align:left;

}

このままでは、ブログ全体の幅が広がっただけで、メインエリアとサイドバーには変化がありませんね。これは、メインエリアとサイドバー、本文テキストの部分にも個別に横幅が指定されているからです（これはあまりスマートな記述とは言えませんが、初心者さん向けに最もわかりやすい方法をご紹介することにします）。

サイドバーの横幅を広げると、カレンダーなどのスタイルも変更する必要が出てくるので、今回はシンプルに、メインエリアの幅のみを調整してみましょう。

メインエリアの幅を指定しているのは以下の部分です。
エディタを使用している方は189行目辺りを確認してください。

#content{

   width: 545px;

   float: right;

   background-color: #ffffff;

}

メインエリアは 545px に指定されていますね。

ブログ全体の横幅を 740px から 800px に変えたので、 60px 増えたことになります。今回はシンプルに、メインエリアの幅に 60px 足すことにしましょう。

以下のように修正します。

#content{

   width: 605px;

   float: right;

   background-color: #ffffff;

}

次に、本文テキストの横幅を指定している部分を調整します。以下の部分です。
エディタを使用している方は、268行目辺りを確認してください。

.main {

   width: 502px;

   color: #000;

   font-size: 12px;

   padding: 15px 0px 15px 0px;

   overflow: auto;

   line-height: 135%;

}

先ほどと同じように、「width: 502px;」に 60px 足します。

.main {

   width: 562px;

   color: #000;

   font-size: 12px;

   padding: 15px 0px 15px 0px;

   overflow: auto;

   line-height: 135%;

}

間違いの無いよう「テンプレート」＜「カスタマイズ」から「スタイルシート」にコピー＆ペーストして、「プレビュー」で表示内容を確認しましょう。問題なければ、保存してください。

これで、ブログ全体の横幅とメインエリアの横幅が以前より広くなりました。