ページ全体幅の変更

今回からは、レイアウト編です。横幅の変更から、3カラム化や可変幅などレイアウトに関するカスタマイズ方法を説明していきます。

まずは、簡単にカスタマイズをすることができる「ページ全体幅の変更方法」について説明します。

カスタマイズ方法（MovableType編）

では、ページ全体幅を変更するカスタマイズ方法について説明します。

■ CSS（スタイルシート）の編集
デフォルト・テンプレートの場合、下記のように記述されている箇所が編集対象です。

＜スタイルシート＞

#container { 　・・・ width: 700px; }

初期設定では、「width: 700px」と指定されています。
この「700px」という数値を変更することで、ページの全体幅を変更することができます。

編集後は、「保存」し、スタイルシートを「再構築」します。

MovableTypeのレイアウト構造

上記のカスタマイズ方法では、「#container」内の数値を変更することで全体幅が変更しました。

では、なぜ「#container」内の数値を変更することでページ全体幅を変更することができるのでしょうか？

このことを理解するには、MovableTypeのレイアウト構造について理解する必要があります。今後、様々なレイアウトに変更する上でも、重要ですので、しっかりと理解してくださいね。

■ MovableTypeのレイアウト構造
MovableTypeのメインページの大まかな構造は、下記の図のようになります。

■ MovableType（Ver.3.17） メインページ クラス構造

body #container #banner 　#center 　.content 　#right

bodyの中に#container（赤枠）があります。
その #container の中の上部に、blogのタイトルが入る#banner（グレー枠）があり、下部には、記事やコメントなどが入る#center（ピンク枠）と、その右側に、サイドメニューなどが入る#right（紺枠）があります。

MovableTypeでは、上記のような構造になっていますので、今回のカスタマイズのように、#container（赤枠）内の横幅を変更することによって、ページ全体幅（赤枠）を変更することができます。

また、このような構造であるため、#container（ページ全体）の幅を変更した場合は、#center（エントリー）、#right（サイドバー）の幅も下記のように変更しておく必要があります。

#container≧#center（エントリー）＋#right（サイド）

#center（エントリー）の幅と#right（サイド）の幅を足した値が、、#container（ページ全体）の幅を上回ると、サイドバーが落ちたり、表示されなくなったりしますので、気をつけてくださいね。

[次の講義へ] → エントリー幅、サイドバー幅の変更

ブログランキングに参加中です。応援お願いします。