宅配便 痛快ドタバタ活劇!

「TAKUHAI ATHLETE」が書籍で紹介されました。
やりなおしたい30歳以上のための就職読本―データとブログでシゴトがわかる!


「TAKUHAI ATHLETE」データベース
バックナンバーをまとめたページです。簡単な説明付き。


« クルマに心はあるか? | メイン | vol.11 『豪雨の自動販売機』 »

2005年5月 8日

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

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

このエントリーのトラックバックURL:
http://takuhai-athlete.com/cgi/mt/mt-tb.cgi/74


Copyright © 2004-2008 TAKUHAI ATHLETE All rights reserved.
mail to : kashiwagi7@gmail.com