今回は、ブログを3カラムにするカスタマイズ方法について説明します。

MT3.17のデフォルト・テンプレートでは、右側にサイドバー、左側にエントリーが表示されています。エントリーの左側にもサイドバーを追加して、３カラムにする方法を説明します。

■ カスタマイズ例



↑クリックすると、カスタマイズ後のイメージが拡大して表示されます（別ウィンドウ）。


ブログを3カラムにするには、いくつか方法がありますが、今回は、「float」を使用する方法を説明します。

詳細は、ブログカスタマイズ講座のレイアウト編にて説明していますので、ご覧ください。
「ブログを3カラム化するには」

■ HTMLの編集
デフォルト・テンプレート（Ver.3.17）の場合、下記のように編集します。

１． 「wrapper」の指定を追加
まず、下記の部分に「wrapper」の指定を追加します。
<div id="center"></div>を囲むように、
<div id="wrapper"></div>を追加します。
※「wrapper」の名前は別の名称でも構いません。

＜メインページ ＞ ←全体の解析が見れます。

<div id="wrapper"> <div id="center"> <div class="content"> 　・・・（省略） </div><!-- end content --> </div><!-- end center --> </div> <div id="right"> 　・・・（省略） </div><!-- end right -->

※赤色の文字が追加部分です。

2． 「left」の指定を追加
次に、下記の部分に「left」の指定を追加します。
追加する部分は、</div>（centerの終わり）と、上記で追加した</div>(wrapperの終わり）の間です。

<div id="wrapper"> <div id="center"> 　・・・（省略） </div><!-- end center --> <div id="left"> 　・・・（省略） </div> </div><!-- end wrapper -->

3． サイドバー内のコンテンツを記述する
サイドバー内に表示したいコンテンツ（カレンダー、検索、カテゴリー等）を記述します。メインページのサイドバー内の記述等を参考にしてください。

<div id="left"> <div class="sidebar"> 　・・・（省略） </div> </div>

4． まとめ
上記までの手順で説明した編集箇所をまとめています。
赤色の文字が追加部分です。

<div id="container"> <div id="banner"> 　・・・（省略） </div><!-- end banner -->  <div id="wrapper"> <div id="center"> 　・・・（省略） </div><!-- end center --> <div id="left"> 　・・・（省略） </div><!-- end left --> </div><!-- end wrapper --> <div id="right"> 　・・・（省略） </div><!-- end right --> <div style="clear: both;">&#160;</div> </div><!-- end container -->

■ CSS（スタイルシート）の編集
スタイルシートを編集します。

＜スタイルシート＞

#container { 　・・・（省略） 　width: 700px; } #center { 　・・・（省略） 　float :right; width: 500px; } #right { 　・・・（省略） 　float: left; width : 200px; }

下記のように修正します。
赤色の文字が追加、編集部分です

#container { 　・・・（省略） 　width: 800px; } #wrapper { 　float left; width: 620px; } #center { 　・・・（省略） 　float :right; width: 440px; } #left { 　・・・（省略） 　float: left; width : 180px; } #right { 　・・・（省略） 　float: right; width : 180px; }

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

■ MovableType（Ver.3.17） メインページ 構造図

body #container #banner 　#center 　.content 　#right 　.sidebar

■ 3カラムレイアウト（float編）の構造図

#container #banner #left #center #wrapper #right

以上、「3カラム化（MT3.17編）」について説明しました。

参考になりましたら、応援お願いします。

今回は、「個別記事などにサイドバーを表示する」方法について説明します。

デフォルト・テンプレートでは、メインページ以外のテンプレート（個別、日付、カテゴリーアーカイブ）には、サイドバーが表示されていません。そこで、今回は、メインページ以外のテンプレートにも、サイドバーを表示する方法を説明します。

■ 実例カスタマイズ（個別記事にサイドバーを表示）



↑クリックすると、カスタマイズ後のイメージが拡大して表示されます（別ウィンドウ）。

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

では、個別記事などにサイドバーを表示するカスタマイズ方法について説明します。

個別記事などにサイドバーを表示するには、エントリー部分を左によせて、その右側にサイドバーを表示します。メインページと同じように、スタイルシートの「#center」「#right」を利用します。

■ HTMLの編集
デフォルト・テンプレート（Ver.3.17）の場合、下記のように編集します。

１． 「center」の指定を追加
まず、下記の部分に「center」の指定を追加します。
<div class="content"></div>を囲むように、
<div id="center"></div>を記述します。

＜個別エントリーアーカイブ（3.17） ＞ ←全体の解析が見れます。

<div id="center"> <div class="content"> 　・・・（省略） </div> </div> </div>　/* end of "container" */ </body> </html>

※赤色の文字が追加部分です。

2． 「right」の指定を追加
次に、下記の部分に「right」の指定を追加します。
追加する部分は、上記で追加した</div>（center）と、
</div>（container）の間です。

<div id="center"> <div class="content"> 　・・・（省略） </div> </div> <div id="right"> 　・・・（省略） </div> </div>　/* end of "container" */ </body> </html>

3． サイドバー内のコンテンツを記述する
あとは、サイドバー内に表示したいコンテンツ（カレンダー、検索、カテゴリー等）を記述します。メインページのサイドバー内の記述を参考にすると良いです。

<div id="right"> <div class="sidebar"> 　・・・（省略） </div> </div>

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

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

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

body #container #banner 　#center 　.content 　#right

以上、「個別記事などにサイドバーを表示する」について説明しました。

今回は、「サイドバーの配置変更」について説明します。

デフォルト・テンプレートでは、右側にサイドバー、左側にエントリーが表示されています。この配置を逆にして、左側にサイドバー、右側にエントリーを表示する方法を説明します。

■ 実例カスタマイズ（サイドバーの配置変更）



↑クリックすると、カスタマイズ後のイメージが拡大して表示されます（別ウィンドウ）。

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

では、サイドバーとエントリーの配置を変更するカスタマイズ方法について説明します。

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

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

　■ エントリー部分

#center { 　・・・ float: left; }

　■ サイドバー部分

#right { 　・・・ float: left; }

デフォルト・テンプレートでは、
エントリー部分は、「float: left」、
サイドバー部分は、「float: left」と指定されています。

「float: left」とは、「指定した要素を左に寄せ、後に続く内容はその右側に回り込ませる」という指定です。

エントリー部分を右側に配置するには、「left」の指定を、「right」に指定にすることで、変更することができます。

＜カスタマイズ記述例＞

　■ エントリー部分

#center { 　・・・ float: right; }

　■ サイドバー部分

#right { 　・・・ float: left; }

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

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

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

body #container #banner 　#center 　.content 　#right

以上、「サイドバーの配置変更」について説明しました。

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

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

カスタマイズ方法（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

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

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

今回は、「エントリー幅、サイドバー幅の変更方法」について説明します。

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

では、早速、エントリー幅、サイドバー幅を変更するカスタマイズ方法について説明します。

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

＜スタイルシート＞
　■ エントリー部分

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

　■ サイドバー部分

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

エントリー幅は、「width: 500px」、
サイドバー幅は、「width: 200px」と指定されています。
これらの数値を変更することで、それぞれの幅を変更することができます。

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

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

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

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

body #container #banner 　#center 　.content 　#right

以上、「エントリー幅、サイドバー幅の変更方法」について説明しました。

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

今回からは、レイアウト編です。横幅の変更から、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（ページ全体）の幅を上回ると、サイドバーが落ちたり、表示されなくなったりしますので、気をつけてくださいね。

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

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