6.テンプレートの構成を理解しよう

6-1.カスタマイズするときに必要

1)メニュー「デザイン」-テンプレート

mt6-1.jpg
・テンプレートの構成

【インデックステンプレート】
 ・ メインページ index.html
 ・ アーカイブインデックス archives.html
 ・ スタイルシート styles.css
 ・ Javascript mt.js
 ・ RSD red.xml
 ・ 最新記事のフィード atom.xml


【アーカイブテンプレート】
 ・ ウェブページ
 ・ カテゴリ別ブログ記事リスト
 ・ ブログ記事
 ・ 月別ブログ記事リスト

【システムテンプレート】
 ----------------------------------------------------------------------------------------------------

 ●テンプレートモジュール?上記のテンプレートを構成する部品
  ・ HTMLヘッダー
  ・ コメント
  ・ サイドバー
  ・ トラックバック
  ・ バナーフッター
  ・ バナーヘッダー
  ・ ブログ記事の概要


 自分でオリジナルのモジュールを作ることで、カスタマイズしやすくする。
 テンプレート共通で使用するものはモジュール化すると便利。
 MT4からは、MTIFタグが加わったことで、テンプレート毎の場合分けもできるようになり、構成がよりわかりやすくなった。

●ウィジェットセット
 さらに細かい部品の集まり。ウィジェットの集まりがウィジェットセット。
 

2)メインページの構成

・テンプレートの編集
 
 左コンテンツ
  ・テンプレートの名前
  ・テンプレートの中味(エディタ)
  ・テンプレート設定
 
 右メニュー
  ・ショートカットメニュー
  ・インクルードテンプレート(構成されているモジュール一覧)
   名前をクリックすると、そのテンプレートの編集ページへ行く
  ・タグリファレンス
   使用されているMTタグの一覧

mt6-2.jpg

各モジュールの構成
 
mt6-4.jpg
3)メニューの構成を変更してみよう

○ ウィジェットテンプレートについて

mt6-3.jpg

 ・メニューの順番を変えてみよう
 
 (1)ウィジェットをつまんで移動 - メニュー関連「アーカイブウィジェットグループ」「ページ一覧」を上部に移動してみる。→ 変更を保存

 (2)「インデックスのみ」再構築で、移動を確認

トップページのメニュー表示順番が変わっています。
「すべて再構築する」で更新すると、全てのページでメニューの変更が行なわれます。


4)メニューのソート数字を消そう

第1回の「1.ショップ(サービス)のメニューを設定しよう」で設定したカテゴリのメニューには、設定したとおり頭に数字が表示されています。
この数字を消すカスタマイズを行ないます。

(1) カテゴリメニュー
・ウィジェット [アーカイブウィジェットグループ]?[カテゴリアーカイブ]の編集

テンプレートの中味

 <mt:IfArchiveTypeEnabled archive_type="Category">
 <div class="widget-archive widget-archive-category widget">
   <h3 class="widget-header">メニュー</h3>
    <div class="widget-content">
     <mt:TopLevelCategories>
       <mt:SubCatIsFirst>
       <ul>
       </mt:SubCatIsFirst>
       <mt:If tag="CategoryCount">
         <li><a href="<$mt:CategoryArchiveLink$>"
          <mt:If tag="CategoryDescription"> 
              title="<$mt:CategoryDescription remove_html="1"
       encode_html="1"$>"</mt:If>>
         <$mt:CategoryLabel remove_html="1"$> 
             (<$mt:CategoryCount$>)</a> 
       <mt:Else>
         <li><$mt:CategoryLabel remove_html="1"$>
       </mt:If>
       <$mt:SubCatsRecurse$>
         </li>
       <mt:SubCatIsLast>
       </ul>
       </mt:SubCatIsLast>
     </mt:TopLevelCategories>
   </div>
 </div>
 </mt:IfArchiveTypeEnabled>

追加コード
削除コード - カテゴリの個数を消去する

(2)ウェブページメニュー
・ウィジェット [ホームページウィジェットグループ]-[ページ一覧]の編集



 <mt:IfArchiveTypeEnabled archive_type="Page">
 <div class="widget-pages widget">
   <h3 class="widget-header">はじめての方へ</h3>
   <div class="widget-content">
     <ul>
     <mt:Pages no_folder="1" sort_by="title" sort_order="ascend">
         <li class="page page-<$mt:PageID$>">
         <a href="<$mt:PagePermalink$>">
       <$mt:PageTitle$></a></li>
     </mt:Pages>
     <mt:TopLevelFolders>
     <li class="folder folder-<$mt:FolderID$>">
       <strong><a href="<$mt:BlogURL$><$mt:FolderPath$>/">
               <$mt:FolderLabel remove_html="1"$></a></strong>
     <mt:Pages sort_by="title" sort_order="ascend">
    <mt:PagesHeader>
    <ul>
    </mt:PagesHeader>
      <li class="page page-<$mt:PageID$>">
        <a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
    <mt:PagesFooter>
    </ul>
    </mt:PagesFooter>
        </mt:Pages>
      </li>
      <$mt:SubFolderRecurse$>
    </mt:TopLevelFolders>
     </ul>
   </div>
 </div>
 </mt:IfArchiveTypeEnabled>

追加コード

5)フッター部を自分のcopyrightに変更しよう

テンプレートモジュール - [バナーフッター]


 <div id="footer">
   <div id="footer-inner">
     <div id="footer-content">
       <div class="widget-powered widget">
         <div class="widget-content">
        Powered by <a href="http://www.sixapart.jp/movabletype/">
             <$MTProductName$></a>
         </div>
       </div>
 <mt:BlogIfCCLicense>
            <div class="widget-creative-commons widget">
                <div class="widget-content">
                  このブログは<a href="<$mt:BlogCCLicenseURL$>">
                  クリエイティブ・コモンズ</a>でライセンスされています。
                </div>
            </div>
 </mt:BlogIfCCLicense>
        </div>
    </div>
 </div>

変更 コード 
Copyright (C) {西暦} {社名} Corporation. All Rights Reserved.

著作権表示:
 西暦:制作年、2003-2008と制作年をすべて書くタイプもある。
 社名:一般的にローマ字表記、漢字で表記してあるところもあり。



 16-security-key.pngTips:その4 高機能エディタ
 テンプレートを、高機能エディタを利用して編集する。
 MT管理ページのテンプレートフォームは使いにくいので、中味をコピーして、「やり直し」「検索」機能などが利用できるエディタで効率をあげる。
また、別ファイルとして保管もできるため、テンプレートのバックアップとしても利用できる。
 
 フリーの高機能エディタ:サクラエディタ
 シェアウェア:秀丸エディタ、Emeditorなど

このページのトップへ▲

このブログ記事について

このページは、taskmotherが2009年11月10日 11:47に書いたブログ記事です。

ひとつ前のブログ記事は「7.商品ページを管理しやすく構築しよう?カスタムフィールドの利用」です。

次のブログ記事は「5.ウェブページを作ってみよう」です。

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