ページ全体の可変幅化

今回は、「ページ全体の可変幅化」について説明します。

可変幅とは、ページ全体、エントリー、サイドメニューなどの横幅が、ウィンドウ幅によって変化するというものです。常にウィンドウ幅を最大限に利用したい場合には、必須のカスタマイズです。

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

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

■ CSS（スタイルシート）の編集
デフォルト・テンプレートの場合、下記の箇所が編集対象となります。

＜スタイルシート ＞ ←スタイルシート全体の解析が見れます。

　■ ページ全体

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

　■ エントリー部分

#center { 　・・・ width: 500px; }

　■ サイドバー部分

#right { 　・・・ width: 200px; }

デフォルト・テンプレートでは、
ページ全体の幅は、「width: 700px」
エントリーの幅は、「width: 500px」、
サイドバーの幅は、「width: 200px」と指定されています。

可変幅にするには、「px」の絶対指定を、「%」の相対指定にすることで、可変幅に変更することができます。

＜カスタマイズ例＞

　■ ページ全体

#container { 　・・・ width: 100%; }

　■ エントリー部分

#center { 　・・・ width: 75%; }

　■ サイドバー部分

#right { 　・・・ width: 25%; }

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

■ 参考資料
MovableTypeのメインページの大まかな構造は、下図のようになります。カスタマイズの際にイメージしやすくなると思いますので、参考にしてくださいね。

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

body #container #banner 　#center 　.content 　#right

以上、「ページ全体の可変幅化」について説明しました。

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