Movable Typeで「ブログ記事」テンプレートだけ2カラムにカスタマイズ

Movable Typeのテンプレート

Movable Typeのテンプレートは、「デザイン>スタイル」でカラム設定を変え再構築すると、すべてのページのカラムが変更になります。

私の場合、右のサイドバーの横幅を大きくしたいため、どうしても中央の本文が入る部分の幅が小さくなってしまいます。

すべてのページを2カラムにしてしまえば簡単に片付く話なのですが、どうしてもTOPページやカテゴリページ等は3カラムにしておきたいので、なんとか記事ページだけ2カラムにカスタマイズはできないものかと考えてみました。

「ブログ記事」を2カラムにする

「ブログ記事」テンプレートだけ2カラムにするということは、2カラムのテンプレートだけ2カラム表示ができるように変更し、スタイルシート(CSS)で、2カラム表示の各カラムの表示幅を変更すれば良いだけです。

まず、テンプレート内の

<head></head>

の、直下に、

<body id=”<$mt:BlogTemplateSetID$>” class=”mt-entry-archive  <$mt:Var name=”page_layout”$>”>

と書いてある行があると思います。それを、

<body id=”<$mt:BlogTemplateSetID$>” class=”mt-entry-archive layout-wm“>

このように書き換えます。このように書き換える事によって、「/mt/mt-static/themes-base/blog.css」内に記述してある、

/* Wide-Medium */

の設定幅に変更になります。各カラムの幅を変更したい場合は、blog.cssの「/* Wide-Medium */」の数値を変更すると、簡単に変更できます。

また、左にサイドバーを表示させたい場合は、「layout-wm」を「layout-mw」にし、blog.cssの「/* Medium-Wide */」を変更してください。

サイドバーの表示を変更

次に、サイドバーの表示を変更します。私の場合、サイドバーは、3カラムの時の右カラムと特に変化を付ける必要がなかったため、「ブログ記事」のテンプレート内の、サイドバーに対応した部分を、

<div id=”beta”>
<div id=”beta-inner”>
<$mt:WidgetSet name=”3カラムのサイドバー(サブ)”$>
</div>
</div>

と書き換えただけで済みましたが、内容を変えたい場合は、新しくウィジェットセットを作成し、「3カラムのサイドバー(サブ)」の部分を、新しく作成したウィジェットセットを置き換えてください。