カテゴリ関連サンプルアーカイブ

このカテゴリでは、カテゴリ（ブログ記事リスト）の取り扱いに関するサンプルを紹介します。

『カテゴリ関連サンプル』カテゴリ内のエントリ一覧

素ノーマルカテゴリリスト

2008年2月 3日 16:07 | Writer: apstar | 記事本文

Movable Type 4.1のウィジェットに格納されているカテゴリリストのコードから不要部分を除去したコードサンプルです。

トップレベルのカテゴリから、サブカテゴリまでを再帰取得します。エントリの存在しないカテゴリも表示されます。

コード

<MTTopLevelCategories>
   <MTSubCatIsFirst>
   <ul>
   </MTSubCatIsFirst>
   <MTIfNonZero tag="MTCategoryCount">
      <li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$> (<$MTCategoryCount$>)</a></li>
   <MTElse>
      <li><$MTCategoryLabel$></li>
   </MTIfNonZero>
   <$MTSubCatsRecurse$>
   <MTSubCatIsLast>
   </ul>
   </MTSubCatIsLast>
</MTTopLevelCategories>

素ノーマルカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

ドロップダウンカテゴリリスト

2008年2月 3日 16:15 | Writer: apstar | 記事本文

Movable Type 4.1のウィジェットに格納されている月別アーカイブ(ドロップダウン)のコードをドロップダウンカテゴリリストに改造したコードサンプルです。

コード

<select onchange="nav(this)">
   <option>カテゴリを選択</option>
   <MTCategories>
      <option value="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></option>
   </MTCategories>
</select>

<script type="text/javascript" charset="utf-8">
function nav(sel) {
if (sel.selectedIndex == -1) return;
var opt = sel.options[sel.selectedIndex];
if (opt && opt.value)
location.href = opt.value;
}
</script>

ドロップダウンカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

現在のエントリの属するカテゴリ内の他のエントリを列挙

2008年2月 3日 16:21 | Writer: apstar | 記事本文

現在のエントリの属するカテゴリ内の他のエントリを列挙するコードサンプルです。MTTagInvokeプラグインと同じようなことを行います。

カテゴリページとエントリページでのみ、エントリリストが出力されます。インデックスページ、月別アーカイブページ、検索ページなどではエントリリストは出力されません。

また、カテゴリページでもエントリページでもまったく同じ内容のリストが出力されます。

コード

<MTIf name="category_archive">
   <MTSetVar name="ListType" value="1">
<MTElseIf name="entry_template">
   <MTSetVar name="ListType" value="2">
</MTIf>
<MTIf name="ListType" gt="0">
   <h2>このカテゴリ内のエントリ</h2>
   <ul>
   <MTIf name="ListType" eq="1">
      <MTEntries>
         <li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
      </MTEntries>
   <MTElseIf name="ListType" eq="2">
      <MTSetVarBlock name="EntCat"><MTEntryCategory></MTSetVarBlock>
      <MTEntries category="$EntCat">
         <li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
      </MTEntries>
   </MTIf>
   </ul>
</MTIf>

現在のエントリの属するカテゴリ内の他のエントリを列挙の続きを読む

ページ先頭へ

タグ:Category,
Sample

現在のエントリの属するカテゴリ内のサブカテゴリ内のエントリを列挙

2008年2月 3日 16:31 | Writer: apstar | 記事本文

現在のエントリの属するカテゴリ内のサブカテゴリ内のエントリを列挙するコードサンプルです。

エントリカテゴリ内のエントリは表示されません。エントリカテゴリ内のサブカテゴリ内エントリのみが表示されます。

MTEntriesWithSubCategoriesにcategory="$SubCatName"モデファイアを指定し、その指定したカテゴリ以下の全てのエントリを調べますが、ループ内でエントリの属するカテゴリLopEntCatName変数が親となるカテゴリ名SubCatNameとをMTIfで比較し、異なるときのみリストを生成する仕組みです。

コード

<MTSetVarBlock name="SubCatName"><$MTEntryCategory$></MTSetVarBlock>
<ul>
<MTEntriesWithSubCategories category="$SubCatName">
   <MTSetVarBlock name="LopEntCatName"><$MTEntryCategory$></MTSetVarBlock>
   <MTIf name="LopEntCatName" ne="$SubCatName">
      <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
   </MTIf>
</MTEntriesWithSubCategories>
</ul>

ページ先頭へ

タグ:Category,
Sample

全カテゴリからエントリを3件ずつ表示

2008年2月 3日 16:54 | Writer: apstar | 記事本文

全カテゴリからエントリを3件づつ取得して表示するサンプルです。

動作比較用に2種類のコードサンプルを記載します。

コード1

まずは、非常に簡単な、テンプレートタグのみを使用したサンプルコードです。MTCategoriesブロック内でMTEntriesタグにlastn="3"モデファイアを指定し、リストを生成します。本来の目的を達成するには通常はこのようなコードでよいです。

<MTCategories>
<h3><a href="<MTCategoryArchiveLink>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<MTCategoryDescription>"</MTIfNonEmpty>><MTCategoryLabel> (<MTCategoryCount>)</a></h3>
<ul>
<MTEntries lastn="3">
   <li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
</MTEntries>
</ul>
</MTCategories>

全カテゴリからエントリを3件ずつ表示の続きを読む

ページ先頭へ

タグ:Category,
Sample

全てのエントリを展開したカテゴリリスト

2008年2月 3日 17:21 | Writer: apstar | 記事本文

全エントリを展開したカテゴリリストのサンプルです。小規模サイトには使えそうなコードです。

サブカテゴリがあってもおかしなコードにはならないですが、サブカテゴリの階層は表現されません。また、空のカテゴリもそのまま出力されます。

コード

<MTTopLevelCategories>
<ul>
<MTIfNonZero tag="MTCategoryCount">
   <li><a href="<MTCategoryArchiveLink>"><strong><MTCategoryLabel>[<MTCategoryCount>]</strong></a>
   <ul>
   <MTEntries>
      <li><a href="<MTEntryLink>"><MTEntryTitle></a></li>
   </MTEntries>
   </ul>
   </li>
<MTElse>
   <li><MTCategoryLabel></li>
</MTIfNonZero>
</ul>
<MTSubCatsRecurse>
</MTTopLevelCategories>

全てのエントリを展開したカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

現在のエントリの属するカテゴリのエントリを展開したカテゴリリスト

2008年2月 3日 20:16 | Writer: apstar | 記事本文

現在のエントリの属するカテゴリのエントリを展開（エントリリストを表示）したカテゴリリストのコードサンプルです。

エントリページ以外のページでは、エントリの展開は行いません。先頭でEntCat変数へ"None"という値が代入されますが、エントリページ以外ではそれが書き換えられることがないからです。

コード

<MTSetVar name="EntCat" value="None">
<MTIf name="entry_template">
   <MTSetVarBlock name="EntCat"><MTEntryCategory></MTSetVarBlock>
</MTIf>
<ul>
<MTCategories>
   <MTSetVarBlock name="CurCat"><MTCategoryLabel></MTSetVarBlock>
   <li><a href="<MTCategoryArchiveLink>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<MTCategoryDescription>"</MTIfNonEmpty>><MTCategoryLabel> (<MTCategoryCount>)</a></li>
   <MTIf name="CurCat" eq="$EntCat">
   <li><ul>
   <MTEntries>
      <li><a href="<MTEntryLink>"><MTEntryTitle></a></li>
   </MTEntries>
   </ul></li>
   </MTIf>
</MTCategories>
</ul>

現在のエントリの属するカテゴリのエントリを展開したカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

狙ったカテゴリのみを表示するカテゴリリスト

2008年2月 3日 20:37 | Writer: apstar | 記事本文

狙ったカテゴリのみを表示するカテゴリリストのコードサンプルです。カテゴリは複数指定することができます。

keyword変数へ、表示したいカテゴリをカンマ区切り（区切り文字は何でもいい）で列挙します。カテゴリ名は正確に記述します。ここで記述している例は、本サイトのカテゴリ名です。

MTCategoriesブロック内ループでは、ループ毎にカテゴリ名を取得してCurCat変数へ格納する。MTIfで比較するときにnameモデファイアへキーワード変数keyword、valueモデファイアへカテゴリ名変数CutCat変数（前にドルマークを付与する）を指定するのがポイントです。通常とは逆の指定の仕方でありますが、これは「キーワード中にカテゴリ名が含まれるかどうか」をlikeモデファイアで調べているためです。

コード

<MTSetVar name="keyword" value="変数,SetVar系,GetVar系,If系,For系,Loop系,共通モデファイア系,Tips系">
<ul>
<MTCategories>
<MTSetVarBlock name="CurCat"><MTCategoryLabel></MTSetVarBlock>
<MTIf name="keyword" like="$CurCat">
  <li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$> (<$MTCategoryCount$>)</a></li>
</MTIf>
</MTCategories>
</ul>

狙ったカテゴリのみを表示するカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

狙ったカテゴリのみを表示してエントリ展開するカテゴリリスト

2008年2月 3日 21:08 | Writer: apstar | 記事本文

狙ったカテゴリのみを表示するカテゴリリストのコードサンプルです。カテゴリは複数指定することができます。この例ではその上に狙ったカテゴリのみエントリ展開を行います。

keyword変数へ、表示したいカテゴリをカンマ区切り、OpenCat変数へはエントリ展開を行いたいカテゴリを列挙します。

MTCategoriesブロック内ループでは、ループ毎にカテゴリ名を取得してCurCat変数へ格納します。最初のMTIfでキーワード変数keywordに含まれるカテゴリを取得し、更にその内側のMTIfでカテゴリ展開を行うかどうかを調べています。このサンプルではどちらのMTIfにもlikeモデファイアを使用しています。

なお、展開するカテゴリを現在のカテゴリとしたい場合は、MTSetVarBlockを用いてOpenCat変数へ現在のカテゴリを代入してあげればいいでしょう。

コード

<MTSetVar name="keyword" value="変数,SetVar系,GetVar系,If系,For系,Loop系,共通モデファイア系,Tips系">
<MTSetVar name="OpenCat" value="If系,For系,Loop系">
<ul>
<MTCategories>
<MTSetVarBlock name="CurCat"><MTCategoryLabel></MTSetVarBlock>
<MTIf name="keyword" like="$CurCat">
  <li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$> (<$MTCategoryCount$>)</a></li>
   <MTIf name="OpenCat" like="$CurCat">
      <li><ul>
      <MTEntries>
         <li><a href="<MTEntryLink>"><MTEntryTitle></a></li>
      </MTEntries>
      </ul></li>
   </MTIf>
</MTIf>
</MTCategories>
</ul>

狙ったカテゴリのみを表示してエントリ展開するカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

狙ったカテゴリのみを隠すカテゴリリスト

2008年2月 3日 21:19 | Writer: apstar | 記事本文

狙ったカテゴリのみを隠すカテゴリリストのコードサンプルです。カテゴリは複数指定することができます。

keyword変数へ、表示したくないカテゴリをカンマ区切りで列挙します。

MTCategoriesブロック内ループでは、ループ毎にカテゴリ名を取得してCurCat変数へ格納します。次のMTUnless+likeモデファイアで、キーワード変数keywordに含まれないカテゴリのみを抽出してリスト化しています。

コード

<MTSetVar name="keyword" value="変数,SetVar系,GetVar系,If系,For系,Loop系,共通モデファイア系,Tips系">
<ul>
<MTCategories>
<MTSetVarBlock name="CurCat"><MTCategoryLabel></MTSetVarBlock>
<MTUnless name="keyword" like="$CurCat">
  <li><a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>><$MTCategoryLabel$> (<$MTCategoryCount$>)</a></li>
</MTUnless>
</MTCategories>
</ul>

狙ったカテゴリのみを隠すカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

現在のカテゴリであれば強調表示するカテゴリリスト

2008年2月 3日 21:25 | Writer: apstar | 記事本文

現在のカテゴリのみstrongタグで強調表示するカテゴリリストのサンプルです。

このサンプルでは、CurCat変数にはMTCategoryBasenameで取得した値を代入していますが、MTEntryCategoryでもよいです。MTTopLevelCategoriesブロックタグ内では単純にループ毎のカテゴリベースネームを代入したCompare変数とさきのCurCat変数とを比較して、同じであったらstrongを付与して強調表示しリスト生成、そうでなければstrongを付与せずにリスト生成しているだけです。

現在位置を強調表示することによって、観覧ユーザがサイト内で迷いづらくなるメリットがあると思われます。このサンプルではstrongタグにて太い文字にしているだけですが、マーカー画像などを用いるのもいいと思います。

コード

<MTSetVarBlock name="CurCat"><MTCategoryBasename></MTSetVarBlock>
<MTTopLevelCategories>
   <MTSubCatIsFirst><ul></MTSubCatIsFirst>
   <MTIfNonZero tag="MTCategoryCount">
      <MTSetVarBlock name="Compare"><MTCategoryBasename></MTSetVarBlock>
      <MTIf name="Compare" eq="$CurCat">
         <li><strong><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$>[<$MTCategoryCount$>]</a></strong></li>
      <MTElse>
         <li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$>[<$MTCategoryCount$>]</a></li>
      </MTIf>
   <MTElse>
         <li><MTCategoryLabel></li>
   </MTIfNonZero>
   <MTSubCatsRecurse max_depth="3">
   <MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>

現在のカテゴリであれば強調表示するカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

プラグインを使用しないカテゴリ並べ替え

2008年2月 3日 21:42 | Writer: apstar | 記事本文

カテゴリ並べ替えに関するプラグインを使用すれば手軽にカテゴリ並べ替えができますが、このサンプルではプラグインを用いずにカテゴリ並べ替えを行っています。

Movable Typeでは、カテゴリを生成した順にIDが付与されますが、計画的に設計されたサイトであればIDは昇順に並んでいるはずです。そのカテゴリIDをゼロ埋めして（あとで文字列評価並べ替えを行う）キーに、カテゴリ名を値にしたハッシュを生成し、MTLoopループのsort_by="key"モデファイアで文字列順に並べ替えを行っています。

sort_by="key"は文字列評価を行うため、カテゴリIDをゼロ埋めしないと、IDの桁が変わる際に予期しない並びとなります。

このサンプルでは、エントリのないカテゴリは表示されません。サブカテゴリは考慮していません。

コード

<MTCategories>
   <MTSetvarBlock name="keyvalue"><$MTCategoryID zero_pad="4"$></MTSetvarBlock>
   <MTSetvarBlock name="ShowCategory" key="$keyvalue"><$MTCategoryLabel$></MTSetvarBlock>
</MTCategories>

<MTLoop name="ShowCategory" sort_by="key">
   <p><$mt:getvar name="__key__"$> <$mt:getvar name="__value__"$></p>
</MTLoop>

プラグインを使用しないカテゴリ並べ替えの続きを読む

ページ先頭へ

タグ:Category,
Sample

カテゴリ内エントリの最新更新日時を表示

2008年2月17日 15:18 | Writer: apstar | 記事本文

カテゴリ内の最新エントリの更新日時を調べ、カテゴリラベルの横に表示するサンプルです。

まず、"最終更新日:"というヘッダ文字列をHeader変数へ代入しておきます。

MTCategoriesブロックタグ中でMTEntries lastn="1" sort_by="modified_on" とし、カテゴリ中の最新エントリを取り出し、その更新日をLastDate変数へMTSetVarBlockにて代入します。

Header変数とLastDate変数を繋ぎ合わせLabelという変数へ代入します。最終的にはカテゴリラベル文字列の後ろへ、ｃａｔモデファイアを用いて（catモデファイア：設定したタグの内容の最後に、文字列を追加する機能）Label変数を繋げています。

コード

<MTSetVar name="Header" value=" 最終更新日:">
<ul>
   <MTCategories>
      <MTSetVarBlock name="LastDate">
      <MTEntries lastn="1" sort_by="modified_on">
         <MTEntryDate>
      </MTEntries>
      </MTSetVarBlock>
      <MTSetVar name="Label" value="$Header">
      <MTSetVar name="Label" value="$LastDate" append="1">
      <li><MTCategoryLabel cat="$Label"></li>
   </MTCategories>
</ul>

カテゴリ内エントリの最新更新日時を表示の続きを読む

ページ先頭へ

タグ:Category,
Sample

現在のエントリの属するカテゴリのエントリを展開・強調表示したカテゴリリスト

2008年3月14日 12:31 | Writer: apstar | 記事本文

「現在のエントリの属するカテゴリのエントリを展開したカテゴリリスト」サンプルの拡張版です。

現在のエントリの属するカテゴリのエントリを展開（エントリリストを表示）し、リスト中の現在のエントリをstrongタグで強調表示するカテゴリリストのコードサンプルです。

コード

<MTSetVar name="EntCat" value="None">
<MTIf name="entry_template">
   <MTSetVarBlock name="EntCat"><MTEntryCategory></MTSetVarBlock>
   <MTSetVarBlock name="CurEnt"><MTEntryTitle></MTSetVarBlock>
</MTIf>
<ul>
<MTCategories>
   <MTSetVarBlock name="CurCat"><MTCategoryLabel></MTSetVarBlock>
   <li><a href="<MTCategoryArchiveLink>" title="<MTCategoryLabel>"><MTCategoryLabel> (<MTCategoryCount>)</a></li>
   <MTIf name="CurCat" eq="$EntCat">
   <li><ul>
   <MTEntries>
      <MTSetVarBlock name="LopEnt"><MTEntryTitle></MTSetVarBlock>
      <MTIf name="LopEnt" eq="$CurEnt">
         <li><a href="<MTEntryLink>"><strong><MTEntryTitle></strong></a></li>
      <MTElse>
         <li><a href="<MTEntryLink>"><MTEntryTitle></a></li>
      </MTIf>
   </MTEntries>
   </ul></li>
   </MTIf>
</MTCategories>
</ul>

現在のエントリの属するカテゴリのエントリを展開・強調表示したカテゴリリストの続きを読む

ページ先頭へ

タグ:Category,
Sample

カテゴリ別に見た目を切り替える（異なる画像の差し込み）

2008年3月31日 19:40 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリごとに異なる画像ファイルを表示する方法です。

カテゴリ1、カテゴリ2、カテゴリ3というカテゴリがあるとします。このカテゴリページを開いた際に、異なる3種類の画像を表示するには、以下のようにする方法が一般的かもしれません。

<MTIf name="archive_listing">
   <MTIfCategory name="カテゴリ1">
      <img src="http://www.mtde.info/blogimg/category1.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
   <MTIfCategory name="カテゴリ2">
      <img src="http://www.mtde.info/blogimg/category2.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
   <MTIfCategory name="カテゴリ3">
      <img src="http://www.mtde.info/blogimg/category3.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
</MTIf>

MTIfCategory テンプレートタグを用いて、カテゴリ名でカテゴリを判断するやり方です。この方法はコードは簡素ではありますが、決め打ちが発生していますし、「将来増えるかも知れないカテゴリ」には対応していません。つまり将来カテゴリが増え、そのカテゴリにも異なる画像を与えたいときは、テンプレートの修正が必要です。

改良コード

そこで、「カテゴリ名を決め打ちしない」、「将来的にカテゴリが増えたときもテンプレートの改造を行わずに対処できる」ようなコードとして、以下のようなやり方があります。

<MTIf name="archive_listing">
   <MTIgnore>カテゴリのイメージ画像を切り替える。概要に記述した画像ファイル名を取得して利用する。</MTIgnore>
   <MTIfNonEmpty tag="CategoryDescription">
      <img src="<MTBlogURL><MTCategoryDescription>" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfNonEmpty>
</MTIf>

この方法は、管理ページの「カテゴリの編集」ページで、「説明」部分へファイル名をディレクトリ名まで含めて入力しています。イメージのパスを取得するときは、MTBlogURLテンプレートタグの出力結果+MTCategoryDescriptionテンプレートタグの出力結果としています。

カテゴリを増やす場合は、決められた画像サイズで画像を作成し、「説明」欄へ入力したディレクトリ・ファイル名の通りに画像ファイルをアップロードすれば追加作業は完了します。決め打ちはまったく発生せず、ファイル名を記述しない（つまり「説明」欄を空白にしている）場合は単に画像が出力されないだけです。

「説明」欄を本来の使途である「概要の入力」に使用しない場合には有効な手段です。逆に、「説明」欄を本来の使途に使用したい場合にはまったく使えない方法です。（当たり前ですが）概要を入力したカテゴリでは、画像が表示されないという不具合が出ます。

このサンプルコードは「ブログ記事リスト」テンプレートの適切な位置へ貼り付けるとよいです。

ページ先頭へ

タグ:Category,
Sample

カテゴリ別に見た目を切り替える（カテゴリリード文へ異なる背景画像）

2008年3月31日 20:08 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリごとにリード文（管理ページの「カテゴリの編集」ページで、「説明」部分。カテゴリの概要。MTCategoryBaseNameテンプレートタグで取得できる値。）を入力し、カテゴリごとにpブロックタグでそのリード文を表示し、pブロックへ背景画像を与えるというものです。

準備ですが、管理ページの「カテゴリの編集」ページで、「説明」部分に適切なカテゴリ説明文章を入れます。管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」には、それぞれ010、020、030と入力しているものとします。

次にテンプレートへ追加するコードサンプルです。非常に短いです。

<MTIf name="archive_listing">
   <MTIgnore>カテゴリリード文（背景画像つき）</MTIgnore>
   <MTIfNonEmpty tag="CategoryDescription">
      <p class="catlead<MTCategoryBaseName>"><MTCategoryDescription></p>
   </MTIfNonEmpty>
</MTIf>

<p class="cat_<MTCategoryBaseName>">の記述が示すとおり、この方法ではpタグへclass=カテゴリベース名（ファイル名）という指定がなされます。CSSでこのスタイルを定義しておき、表示を切り替えます。また、MTIgnoreというテンプレートタグを記述している部分はいわゆるコメント行で、再構築時には出力されません。

以下は上記の追加コードの場合でのCSSサンプルです。

.catlead010 {
background:#dedede;
background-image: url("blogimg/catlead010.gif");
border: 1px solid #cccccc;
font-size:100%;
padding:6px;
margin:0 0 6px 0;
}

.catlead020 {
background:#dedede;
background-image: url("blogimg/catlead020.gif");
border: 1px solid #cccccc;
font-size:100%;
padding:6px;
margin:0 0 6px 0;
}

.catlead030 {
background:#dedede;
background-image: url("blogimg/catlead030.gif");
border: 1px solid #cccccc;
font-size:100%;
padding:6px;
margin:0 0 6px 0;
}

この方法は、ブログ運用中でのカテゴリの追加がある場合には、注意が必要です。カテゴリを追加した場合には、そのカテゴリのファイル/フォルダ名に対応したスタイルをCSSへ書き加えないと、そのカテゴリのリード文には、背景画像はおろかスタイル定義もされません。

このサンプルコードは「ブログ記事リスト」テンプレートの適切な位置へ貼り付けるとよいです。リード文というくらいですから、本文エリア先頭付近が適切かもしれません。

管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」は、省略しても自動的に任意の名前が付けられてしまいます。

ページ先頭へ

タグ:Category,
Sample

カテゴリ別に見た目を切り替える（hn見出しの背景画像）

2008年3月31日 20:38 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリおよびエントリで、見出し（このサンプルではh2）へ、カテゴリごとに異なる背景画像を与えるというものです。

今回の場合は、カテゴリのみならず、そのカテゴリに含まれるエントリのh2見出しもすべて同じ背景画像を用いることにします。管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」には、それぞれ010、020、030と入力しているものとします。

まず、ブログ記事の概要・ブログ記事の詳細モジュールの中で、h2見出しを使っている箇所を探します。h2見出しにはすべてエントリのタイトルが入っていると仮定します。そのh2見出しのコードを、以下のコードに差し替えます。

<$MTInclude module="h2bycategory"$>

なぜh2見出し部分のコードを、h2bycategoryモジュールをインクルードするコードに変更するのかというと、ブログ記事の概要モジュールとブログ記事の詳細モジュールとで、同じような記述で使用できるからです。

なお、このモジュール化は必須ではなく、次に示す同じコードをブログ記事の概要モジュールとブログ記事の詳細モジュール両方へベタ書きしてもいいです。

次に h2bycategory というモジュール（名前は任意に決めてください）を作成し、中へ以下のようなコードを記述します。

<MTIgnore>カテゴリのベースネームを取得する</MTIgnore>
<MTIf name="archive_listing">
   <MTSetVarBlock name="CurCatBaseName"><MTCategoryBaseName></MTSetVarBlock>
<MTElseIf name="entry_template">
   <MTSetVarBlock name="CurCatName"><MTEntryCategory></MTSetVarBlock>
   <MTCategories>
      <MTSetVarBlock name="LopCatName"><MTCategoryLabel></MTSetVarBlock>
      <MTIf name="LopCatName" eq="$CurCatName">
         <MTSetVarBlock name="CurCatBaseName"><MTCategoryBaseName></MTSetVarBlock>
      </MTIf>
   </MTCategories>
</MTIf>

<MTIgnore>h2タグへclass名をmidasi+カテゴリベースネームとして与える</MTIgnore>
<h2 class="midasi<MTGetVar name="CurCatBaseName">"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

コードが多少複雑になっているのは、このモジュールはカテゴリ再構築時もエントリ再構築時もインクルードされるので、MTIfで処理を切り替えているためです。エントリページの再構築時には、そのエントリがどのカテゴリに属しているかを変数を用いてチェックしています。

<h2 class="midasi<MTGetVar name="CurCatBaseName">">の記述が示すとおり、この方法ではh2タグへclass=カテゴリベース名（ファイル名）という指定がなされます。CSSでこのスタイルを定義しておき、表示を切り替えます。

以下は上記の追加コードの場合でのCSSサンプルです。

.midasi010 {
background:#dedede;
background-image: url("blogimg/midasi010.gif");
border: 1px solid #cccccc;
font-size:120%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

.midasi020 {
background:#dedede;
background-image: url("blogimg/midasi020.gif");
border: 1px solid #cccccc;
font-size:100%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

.midasi030 {
background:#dedede;
background-image: url("blogimg/midasi030.gif");
border: 1px solid #cccccc;
font-size:80%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

この方法は、ブログ運用中でのカテゴリの追加がある場合には、注意が必要です。カテゴリを追加した場合には、そのカテゴリのファイル/フォルダ名に対応したスタイルをCSSへ書き加えないと、背景画像は切り替わりません。

ページ先頭へ

タグ:Category,
Sample

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

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カラム化しています。