デフォルトの2カラム・右サイドバーでもいいですが、サイドバーに貼り付けるアイテムが増えてくると、左右に分けたくなってきませんか。
と言うわけで、3カラム化に挑戦してみました。
ここでは、メインページを3カラム化してみました。
その前に、右サイドバーの各項目をモジュール化してみました。PHPを利用した方法です。PHP化してあるものとして説明します。
先ず、テンプレートからメインページを開きます。
<div id="beta">
<div id="beta-inner" class="pkg">
の部分を探します。その下の
<div class="module-search module">
<h2 class="module-header">検索</h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label><br />
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
</div>
</div>
の部分をすべてコピーします。
次に、テンプレートを開いて、テンプレートを新規作成 します。
テンプレート名 検索
出力ファイル名 search.txt
このテンプレートにリンクするファイル 無記入
とし、テンプレートの内容に先程コピーした部分をペーストします。
検索は、つねに再構築する必要が無いので、再構築オプションのチェックをはずします。
これで、保存と再構築のボタンを押します。
次に
テンプレートのメインページを開いて、先程選択した部分を削除します。
その代わりに、次の1行を追加します。
<?php readfile("<$MTBlogURL$>search.txt"); ?>
これで、検索部分のモジュール化は完了しました。
以下、同様に、最近のエントリー・カテゴリー・アーカイブ・ライセンス部分 をモジュール化していきます。
ライセンス部分は、更新の必要が無いので、再構築オプションのチェックをはずします。そして、保存と再構築のボタンを押します。
メインページのbeta の部分は、以下のようになります。
<div id="beta">
<div id="beta-inner" class="pkg">
<!-- 検索 -->
<?php readfile("<$MTBlogURL$>search.txt"); ?>
<!-- 最近のエントリー -->
<?php readfile("<$MTBlogURL$>entry.txt"); ?>
<!-- カテゴリ -->
<?php readfile("<$MTBlogURL$>categories.txt"); ?>
<!-- アーカイブ -->
<?php readfile("<$MTBlogURL$>monthly.txt"); ?>
<!-- ライセンス -->
<?php readfile("<$MTBlogURL$>license.txt"); ?>
</div>
</div>
とこのようにスッキリしました。また、こうすることで、今後3カラム化した時に、例えば、最近のエントリーは左サイドバーに貼り付けたいというような時、その1行を貼り付ければいいのです。
次に3カラム化です。
このスタイルシートは左から順に、alpha、beta、gamma と決まっています。
つまり、左サイドバーは
<div id="alpha">
<div id="alpha-inner" class="pkg">
の下に記入
中央の、エントリー部分は
<div id="beta">
<div id="beta-inner" class="pkg">
の下に記入
右サイドバーは
<div id="gamma">
<div id="gamma-inner" class="pkg">
の下に記入と決まっています。
デフォルトでは、gamma 部分がないので、
<div id="gamma">
<div id="gamma-inner" class="pkg">
</div>
</div>
を追加します。場所は一番下の
</div>
</div>
</div>
</div>
</body>
</html>
の部分の上になり、以下のようになります。
<div id="gamma">
<div id="gamma-inner" class="pkg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
次に、項目を移動します。
先程、モジュール化した beta の部分を gamma の部分に移動します。
<div id="gamma">
<div id="gamma-inner" class="pkg">
と
</div>
</div>
の間に貼り付けます。
こんな感じです。
<div id="gamma">
<div id="gamma-inner" class="pkg">
<!-- 検索 -->
<?php readfile("<$MTBlogURL$>search.txt"); ?>
<!-- 最近のエントリー -->
<?php readfile("<$MTBlogURL$>entry.txt"); ?>
<!-- カテゴリ -->
<?php readfile("<$MTBlogURL$>categories.txt"); ?>
<!-- アーカイブ -->
<?php readfile("<$MTBlogURL$>monthly.txt"); ?>
<!-- ライセンス -->
<?php readfile("<$MTBlogURL$>license.txt"); ?>
</div>
</div>
空いたベータの部分に、エントリー部分を移動します。
<div id="alpha">
<div id="alpha-inner" class="pkg">
の下の
<MTEntries>
から
</div>
</div>
<div id="beta">
<div id="beta-inner" class="pkg">
の上の
</MTEntries>
までを切り取り、 beta 部分に貼り付けます。
こんな感じです。
<div id="beta">
<div id="beta-inner" class="pkg">
<MTEntries>
・
・
・
・
</MTEntries>
</div>
</div>
alpha 部分は空ですが、一応3カラムの形になりました。
後は、gamma 部分から必要があれば alpha 部分に項目を移動してください。
最後にメインページを３カラムへ定義の変更です。
<body class="layout-two-column-right main-index">
の部分を
<body class="layout-three-column main-index">
と変更して、保存と再構築します。
以上で 3カラム化が終了しました。
もし、うまくいかなかったら、<div ***>と</div>がきっちり対になっているか確認してください。"（ "カッコ があれば "）" カッコ閉じる が必要なのと一緒です。
または、</div>の / が抜けていませんか。
以上です。