mtde.info

Movable Type Developers Express

カテゴリ別に見た目を切り替える（サイドバーの状態を変える）

2008年3月31日 21:00 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリ（※カテゴリのみではなくエントリやメインインデックスページにも有効）のサイドバーの見た目を切り替えます。準備したテンプレートが、3カラム用であるとします。カテゴリページでは2カラムにしたいときに、以下のような方法があります。

このサンプルは、mtde.infoのテンプレートを用いて説明を進めます。mtde.infoのXHTML構造は、以下のようになっています。

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Sample</title>
</head>

<body>

   <div id="headcontent">
      <h1>This Is a Sample</h1>
      <p id="sitedescription">This In a Sample XHTML Pages.</p>
   </div>

   <div id="maincontainer">

      <div id="maincontent">
         <p>メインコンテンツ</p>
      </div>

      <div id="subcontent">
         <p>サイドバー1</p>
      </div>

      <div id="extracontent">
         <p>サイドバー2</p>
      </div>

   </div>

   <div id="footcontent">
      <address>アドレス</address>
   </div>

</body>
</html>

ブログ記事リストのテンプレートの変数宣言部分（テンプレートの先頭付近です）へ、次のような一行のコードを書き足します。

<MTSetVar name="colmn" value="">

colmnという名前の変数へ、空白が代入されています。後述しますが、これは、ブログの初期の設計どおりのサイドバーカラム数・スタイルであるということになります。

以下のように、colmnという名前の変数へ、2を代入すると、サイドバーのうち一本を削除し、2カラムにするということになります。

<MTSetVar name="colmn" value="2">

次に、メイン記事エリアmaincontentのdiv部分を改造します。

改造前

<div id="maincontent">

改造後

<div id="maincontent<MTGetVar name="colmn">">

colmn変数へ2という数字を値として与えたときには、それがそのまま「maincontent」というid名へ付加され、「maincontent2」という名前に変わる仕組みです。

サイドバーにも細工をします。2カラムのとき表示したくないサイドバーへ、以下のように大外をMTIfでcolmn変数に値が入っていなければ実行、と記述します。つまりこの部分は、colmn変数に2という値が入っている（=2カラムである）場合は実行されずにスルーされます。

<MTIf name="colmn" eq=""><MTIgnore>2カラム指定がないときのみ</MTIgnore>
<div id="subcontent">

...（サイドバーの記述）

</div>
</MTIf>

CSSには、3カラム用のmaincontent定義と2カラム用のmaincontent2の記述を同時に併記しておきます。大きな違いは、maincontent2の幅がmaincontentとはサイドバー一本ぶん広いことです。

#maincontent,#maincontent2 {
float:left;
line-height:1.5;
margin-right:20px;
text-align:left;
width:500px;
clear:both;
}

#maincontent img, #maincontent2 img {
margin:15px 10px 15px 0;
}


#maincontent li.nomark, maincontent2 li.nomark {
list-style:none;
margin-left:10px;
}

/* 2 Column */
#maincontent2 {
width:700px;
}

この方法は、カテゴリのみではなく、エントリやメインインデックス、アーカイブ、検索ページなど各テンプレートモジュールへ実装すれば、すべてのテンプレートのサイドバーの本数を制御できます。

2カラム→3カラム、3カラム→2カラムへの切り替えは容易で、各テンプレートモジュールの先頭のcolmn変数を空白にするか、2という値を与えるかのみでサイドバーの本数を切り替えることができます。

このmtde.info サイトは、この手法でエントリページを2カラム化しています。

カテゴリ関連サンプル

2008 mtde.info