*当サイトではアフィリエイト広告を利用して商品を紹介しています。

全てのページにサイドバーを付ける

MovableTypeのメインページを3カラムにすることは出来ましたが個別ページやカテゴリページにはサイドバーが表示されていません。これはそれぞれが別のテンプレートで構成されているためです。

そういうデザインがいいかどうかは個人の好みの問題ですが、せっかくなので3カラムの方法も書き残しておきます。

まずそれぞれのテンプレートの中身を見ると、あるものが足りない事に気付きます。
それはサイドバーそのもののHTMLが記述されていないのです。これではサイドバーが表示されるわけありません。表示させるためにはサイドバーのHTMLを記述してやればいいのです。

しかし、ただサイドバーのHTMLを書き足しても上手くいきません。
キチンと表示させるためにはその他のちょっとしたHTMLも記述します。
メインページテンプレートの中身を見ると次のようになっています。

<body >
<div id=”container” >
<div id=”banner” >
<h1 > <a href=” <$MTBlogURL$ >” accesskey=”1″ > <$MTBlogName encode_html=”1″$ > </a > </h1 >
<h2 > <$MTBlogDescription$ > </h2 >
</div >
<div id=”center” >
<div class=”content” >

一方、その他のカテゴリテンプレートや日別、個別のテンプレートには次のような記述になっています。

<body >
<div id=”container” >
<div id=”banner” >
<h1 > <a href=” <$MTBlogURL$ >” accesskey=”1″ > <$MTBlogName encode_html=”1″$ > </a > </h1 >
<h2 > <$MTBlogDescription$ > </h2 >
</div >
<div class=”content” >

よく見ると抜けている箇所がわかると思います。

<div id=”center” >

が、抜けているのです。
これをまず記述します。div要素なので閉じタグも忘れずに記述します。赤い文字が挿入した部分です。
さらに空divも加えておきます(青色)

注意:独学なので間違っているやり方かもしれません。必ずバックアップしてから作業してください。

<body >
<div id=”container” >
<div id=”banner” >
<h1 > <a href=” <$MTBlogURL$ >” accesskey=”1″ > <$MTBlogName encode_html=”1″$ > </a > </h1 >
<h2 > <$MTBlogDescription$ > </h2 >
</div >
<div id=”center” >
<div class=”content” >
<MTEntries >
<$MTEntryTrackbackData$ >
<MTDateHeader >
<h2 > <$MTEntryDate format=”%x”$ > </h2 >
</MTDateHeader >
<h3 id=”a <$MTEntryID pad=”1″$ >” > <$MTEntryTitle$ > </h3 >
<$MTEntryBody$ >
<MTEntryIfExtended >
<$MTEntryMore$ >
</MTEntryIfExtended >
<p class=”posted” >
投稿者 <$MTEntryAuthor$ > : <a href=” <$MTEntryPermalink valid_html=”1″$ >” > <$MTEntryDate format=”%X”$ > </a >
<MTEntryIfAllowComments >
| <a href=” <$MTEntryPermalink archive_type=”Individual”$ >#comments” >コメント ( <$MTEntryCommentCount$ >) </a >
</MTEntryIfAllowComments >
<MTEntryIfAllowPings >
| <a href=” <$MTEntryPermalink archive_type=”Individual”$ >#trackbacks” >トラックバック </a >
</MTEntryIfAllowPings >
</p >
</MTEntries >
</div >
</div >
<div style=”clear: both;” >  </div >
</div >
</body >

ここまでくれば後はサイドバーのHTMLを挿入すればいいのです。
メインページからサイドバーのHTMLをそれぞれコピーして貼り付けます。人によってサイドバーの部品やID、class等は違うため挿入する場所の指定だけしておきます。(緑色)

<body >
<div id=”container” >
<div id=”banner” >
<h1 > <a href=” <$MTBlogURL$ >” accesskey=”1″ > <$MTBlogName encode_html=”1″$ > </a > </h1 >
<h2 > <$MTBlogDescription$ > </h2 >
</div >
左サイドバーはここです(div等の閉じタグ忘れに注意)
<div id=”center” >
<div class=”content” >
<MTEntries >
<$MTEntryTrackbackData$ >
<MTDateHeader >
<h2 > <$MTEntryDate format=”%x”$ > </h2 >
</MTDateHeader >
<h3 id=”a <$MTEntryID pad=”1″$ >” > <$MTEntryTitle$ > </h3 >
<$MTEntryBody$ >
<MTEntryIfExtended >
<$MTEntryMore$ >
</MTEntryIfExtended >
<p class=”posted” >
投稿者 <$MTEntryAuthor$ > : <a href=” <$MTEntryPermalink valid_html=”1″$ >” > <$MTEntryDate format=”%X”$ > </a >
<MTEntryIfAllowComments >
| <a href=” <$MTEntryPermalink archive_type=”Individual”$ >#comments” >コメント ( <$MTEntryCommentCount$ >) </a >
</MTEntryIfAllowComments >
<MTEntryIfAllowPings >
| <a href=” <$MTEntryPermalink archive_type=”Individual”$ >#trackbacks” >トラックバック </a >
</MTEntryIfAllowPings >
</p >
</MTEntries >
</div >
</div >
右サイドバーはここです(div等の閉じタグ忘れに注意)
<div style=”clear: both;” >  </div >
</div >
</body >

これでどのページにもサイドバーが表示されます。
再構築して完成です。

MovableType の関連書はこちら*

*独学ですので専門的な事はわかりませんが、ボクがこのサイトで試行錯誤して行ってきたMovableTypeカスタマイズの覚え書きです。間違っている記述があるかもしれません。御了承ください*

タイトルとURLをコピーしました