Template Bank[テンプレートバンク]
スタイルシートの作り方

コンテンツを中央に表示する方法

Category : スタイルシートの作り方

あなたのブログは、中央に表示されていますか?
それとも、左側に寄せて表示していますか?
もしかして、右側に寄せて表示してる?

サイトのコンテンツを中央に表示させる方法を説明します。

■左右の余白で調整する

コンテンツを中央に表示するということは、つまり、左右に同じ幅の余白を作るということですね。

余白の指定には、「margin」を使います。
そして、左余白は、margin-left、右余白は、margin-rightです。

中央に表示するには、margin-leftとmargin-rightに「auto」という値を指定します。

スタイルシートには、以下のように記述します。

#container { margin-left:auto; margin-right:auto; }

■テンプレートでの記述方法

テンプレートには、以下のように記述します。

<body> <div id="container">

(ここに中身を表示する)

</div>
</body>

簡単ですね!

関連記事
Category

Movable Typeとは、なぜMovable Typeを使うのか、Movable Typeのしくみ、テンプレートとは、プラグインとは、Movable Typeの基本を初心者にもわかりやすく解説します。

テンプレートの作り方、スタイルシートを使ったデザイン、プラグインの紹介と使い方、モジュール・テンプレートの使い方、1カラム型・2カラム型・3カラム型テンプレートの作り方などを初心者にもわかりやすく解説します。

1カラム型、2カラム型、3カラム型のテンプレートを作る方法

Movable Typeのスタイルシートを使って、オリジナルデザインにしよう

インストールのトラブル、記事(エントリー)投稿時のトラブル、サーバエラーやページが表示されないなどのMovable Typeに関する疑問・質問を解決します。

Movable Type3.2用のテンプレートを無料配布しています。 1カラム型、2カラム左サイドバー型、2カラム右サイトバー型、3カラム型、フリースタイルなど今後もどんどん追加する予定です。