TopMovable Typeカスタマイズカテゴリー > Movable Type 4 でカテゴリー別にデザインを切り替える方法(その1)
2008年2月19日

Movable Type 4 でカテゴリー別にデザインを切り替える方法(その1)

Posted at February 19,2008 2:00 AM
Category:[カテゴリー]
Tag:[, , ]

Movable Type 4 でカテゴリー別にデザインを切り替える方法を、何回かに分けて紹介します。

1.カテゴリー別にアーカイブテンプレートを独立させる

カテゴリーアーカイブのデザインを変更するために、カテゴリー別に複数のアーカイブテンプレートを作る方法があります。その際、カテゴリーアーカイブテンプレート全体を MTIfCategory タグで括ります。MTIfCategory タグの name モディファイアには、カテゴリー名が重複しないように設定します。

カテゴリー1

<MTIfCategory name="カテゴリー1">
    :
(カテゴリー1用のテンプレート)   
    :
</MTIfCategory>

カテゴリー2

<MTIfCategory name="カテゴリー2">
    :
(カテゴリー2用のテンプレート)   
    :
</MTIfCategory>

カテゴリー3

<MTIfCategory name="カテゴリー3">
    :
(カテゴリー3用のテンプレート)   
    :
</MTIfCategory>

この方法には、次のような特徴があります。

  1. カテゴリーアーカイブテンプレートの独立性
  2. カテゴリー別にパスを変更できる
  3. カテゴリー別に異なるパスを設定すると「優先」の制約が発生する

まず、カテゴリーアーカイブテンプレートを独立させ、テンプレートとカテゴリーを1:1の対応にするので、下のように編集対象のカテゴリーが視覚的に分かりやすくなるというメリットがあります。また、テンプレートの内容にもよりますが、この方法であれば、Movable Type 4 の制御系タグをほとんど使わずにすむかもしれません。

アーカイブテンプレート一覧

また、カテゴリー別に異なるパスを与えたい場合、この方法以外に選択の余地はありません。テンプレートタグをパス欄に設定すれば個別に設定することも可能です。

最後の「カテゴリー別に異なるパスを設定すると「優先」の制約が発生する」の意味は、まず、同一アーカイブ種別のテンプレートを複数作成すると、「優先」の問題が発生します。「優先」とは、他のページからあるアーカイブ種別のアーカイブにリンクする場合のリンク先を決めるためのもので、優先にするテンプレートにはチェックをつけます。

アーカイブテンプレート一覧

例えば、カテゴリー1・カテゴリー2・カテゴリー3用のアーカイブテンプレートを、それぞれ別のアーカイブテンプレートで作成した場合、どれかひとつのアーカイブテンプレートが「優先」に、残りが「非優先」になります。

もし、カテゴリー別にパスを変更した場合、メインページなどでカテゴリーリストを、MTTopLevelCategories タグで表示すると、「優先」が設定されたカテゴリーのパスで表示されるので、非優先のカテゴリーアーカイブページはデッドリンクになります。

ただし、全てのカテゴリーアーカイブが同じパスであれば、非優先カテゴリーアーカイブへのリンクも、優先カテゴリーアーカイブで生成されたリンクが利用できます(たまたまそうなるだけであり、手法としては適切ではないかもしれません)。

2.スタイルシートについて

ここでは2つの方法が考えられます。

まず、head 要素が、独立させたカテゴリーアーカイブにそれぞれ含まれているのであれば、head 要素内にカテゴリー用のスタイルシートを呼び出す link 要素をそのまま記述します。これが一番シンプルな方法です。

もうひとつは、head 要素をテンプレートモジュールとして呼び出している場合は、MTIfCategory タグブロック内に次のような MTSetVar タグを記述します。

<MTIfCategory name="cat1">
<mt:setvar name="style" value="[カテゴリー用スタイルシートのファイル名]">
<$MTInclude module="ヘッダー"$>
    :
</MTIfCategory>

そして、「ヘッダー」モジュールには次のように記述します。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$mt:getvar name="style"$>" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

または、MTCategoryDescription タグにスタイルシートのファイル名(下のサンプルでは拡張子なし)を設定しておき、「ヘッダー」モジュールだけで呼び出せる方法もあります。

<mt:if name="category_archive">
<link rel="stylesheet" href="<$MTBlogURL$><$MTCategoryDescription$>.css" type="text/css" title="<$MTCategoryLabel encode_html="1"$>" media="screen,tv" />
</mt:if>

異なるカテゴリーで同じデザインを適用したい場合は、MTCategoryDescription タグに同じ名称を記述しておきます。

後者の方法は、他のカテゴリー分割方法でも共通に使えます。

2008.02.20
カテゴリーパスの記述を一部修正しました。


Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

MT4.1のテンプレいただきました。『MT WEBデザインの新しいルール』にもお世話になっています。カテゴリーごとにデザインを変える、魅力的ですね~。初コメでした!

[1] Posted by amamiya Author Profile Page : February 19, 2008 7:07 PM

カテゴリの説明に固有のパスを仕込んでおいて、
アーカイブマッピングのパスにMTタグを突っ込んでやれば、
異なるパスに吐き出せますよ。。

この場合は1つの記事リストに分岐を3つ入れて、
読みやすくしたいのであれば、モジュールで管理ですかね。。

MT4.1を使うのであれば、カテゴリにパス用のフィールドを足すのが良いかも。
試してないので正しく動くかわからないですけど(汗

[2] Posted by Y : February 19, 2008 8:24 PM

>amamiyaさん
こんばんは。
拙著お買い上げくださりありがとうございます。
サイト構築、うまくできたようでよかったです。
また、コメントありがとうございました。
ではでは!

>Yさん
こんばんは。
ご指摘ありがとうございました。テンプレートタグが使えることを完全に失念しておりました。
モジュール化については「その2」以降で紹介していく予定ですが、いいアイデアがありましたらよろしくお願い致します。

[3] Posted by yujiro Author Profile Page : February 20, 2008 12:44 AM
コメントする

*必須



太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!