個別記事などにサイドバーを表示

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

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

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



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

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

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