6.20 カテゴリアーカイブページのデザインをカテゴリ別に切り替える

P.479

●カテゴリアーカイブテンプレートの作成

テンプレート名:カテゴリアーカイブ
テンプレートの内容:次の内容を設定

<mt:categoryDescription setvar="category_description" />
<mt:if name="category_description">
  <mt:include module="$category_description"$>
<mt:else>
  <mt:include module="デフォルトカテゴリ"$>
</mt:if>

P.480

●「お知らせ」カテゴリ用テンプレートモジュールの作成

テンプレート名:お知らせカテゴリ
テンプレートの内容:次の内容を設定

<mt:setVars>
title=<mt:archiveTitle /> - <mt:archiveTypeLabel />アーカイブ
page_layout=layout-two-column-right
</mt:setVars>
<mt:include module="ヘッダー" />
<div id="contents" class="clearfix">
  <div id="main">
    <div class="content-nav">
    <mt:archivePrevious>
      <a href="<mt:archiveLink />">&laquo; <mt:archiveTitle /></a> |
    </mt:archivePrevious>
      <a href="<mt:link template="main_index" />">メインページ</a> |
      <a href="<mt:link template="archive_index" />">アーカイブ</a>
    <mt:archiveNext>
      | <a href="<mt:archiveLink />"><mt:archiveTitle /> &raquo;</a>
    </mt:archiveNext>
    </div>
    <p class="content-header"><mt:archiveTypeLabel />アーカイブ - <mt:archiveTitle /></p>
    <mt:if name="datebased_archive">
      <mt:entries>
        <mt:entryTrackbackData />
        <mt:include module="ブログ記事の概要" />
      </mt:entries>
    <mt:else>
      <mt:entries limit="auto">
        <mt:entryTrackbackData />
        <mt:include module="ブログ記事の概要" />
      </mt:entries>
    </mt:if>
  </div>
  <div id="sub1">
    <mt:include module="サイドバー左" />
    <mt:include module="サイドバー右" />
  </div>
</div>
<mt:include module="フッター" />

P.481

<body class="layout-two-column-right" />


●「イベント」カテゴリ用テンプレートモジュールの作成

テンプレート名:イベントカテゴリ
テンプレートの内容:「お知らせカテゴリ」テンプレートの内容を設定して、003のみ、次の内容に変更

<mt:setVars>
title=<mt:archiveTitle /> - <mt:archiveTypeLabel />アーカイブ
page_layout=layout-two-column-left
</mt:setVars>
...後略...
<body class="layout-two-column-left" />

P.482

●CSSの設定

「スタイルシート」インデックステンプレート

...前略...
body.layout-two-column-right #header,
body.layout-two-column-right #contents {
    width: 700px;
}
body.layout-two-column-right #main {
    width: 500px;
}
 
body.layout-two-column-left #header,
body.layout-two-column-left #contents {
    width: 700px;
}
body.layout-two-column-left #main {
    width: 500px;
}
body.layout-two-column-left #sub1 dl,
body.layout-two-column-left #sub2 dl {
    padding-left: 0;
    padding-right: 20px;
}
body.layout-two-column-left #main {
    float: right;
}
 
/* フッター */
#footer {
    height: 50px;
    background: url(<mt:staticWebPath />plugins/SampleTemplateSet/images/footer_back.png) repeat-x;
    font-size: 75%;
    text-align: center;
    line-height: 3.7;
}
...後略...

特定のカテゴリ用のCSSを呼び出す

カテゴリ専用のテンプレートモジュール

<mt:setVars>
title=<mt:archiveTitle /> - <mt:archiveTypeLabel />アーカイブ
page_layout=<mt:categoryDescription />
</mt:setVars>
<mt:setVarBlock name="html_head">
<link rel="stylesheet" href="<mt:blogURL />cat_<mt:categoryID />.css" type="text/css" media="screen,tv" />
</mt:setVarBlock>
...後略...
<body class="products">

P.483

<link rel="stylesheet" href="http://user-domain/cat_3.css" type="text/css" media="screen,tv" />
body.products #contents { ... }
body.products #main { ... }

その他の方法でカテゴリのデザインを切り替える

●カテゴリ名で切り替える

テンプレート名:カテゴリアーカイブ
テンプレートの内容:次の内容を設定

<mt:categoryLabel setvar="category_label" />
<mt:include module="$category_label"$>

P.484

●カスタムフィールドで切り替える

「カテゴリ」アーカイブテンプレート

<mt:categoryIncludeName setvar="category_include_name" />
<mt:if name="category_include_name">
  <mt:include module="$category_include_name"$>
<mt:else>
  <mt:include module="デフォルトカテゴリ"$>
</mt:if>

その他のカテゴリ判定方法

●デフォルトカテゴリがない場合

「カテゴリ」アーカイブテンプレート

<mt:ifCategory name="デザイン">
  <mt:include module="デザインカテゴリ" />
</mt:ifCategory>
<mt:ifCategory name="お知らせ">
  <mt:include module="お知らせカテゴリ" />
</mt:ifCategory>

●デフォルトカテゴリがある場合

「カテゴリ」アーカイブテンプレート

<mt:ifCategory name="デザイン">
  <mt:include module="デザインカテゴリ" />
<mt:else>
  <mt:ifCategory name="お知らせ">
    <mt:include module="お知らせカテゴリ" />
  <mt:else>
    <mt:include module="デフォルトカテゴリ" />
  </mt:ifCategory>
</mt:ifCategory>

P.485

注意事項

「イベント」カテゴリ用ブログ記事リスト

<mt:ifCategory name="デザイン">
  <mt:include module="デザインカテゴリ" />
</mt:ifCategory>

「お知らせ」カテゴリ用ブログ記事リスト

<mt:ifCategory name="お知らせ">
  <mt:include module="お知らせカテゴリ" />
</mt:ifCategory>

ウェブページ

Powered by Movable Type 4.261

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。