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カスタマイズの覚え書きです。間違っている記述があるかもしれません。御了承ください*