テンプレートの種類

テンプレートとは、管理画面に関するもの、ブログやコミュニティ掲示板などの表示に関するもの、メールの文面に関するものなどがあり、以下のように分類されます。

• 管理画面テンプレート ＞ システムに１つあり、管理画面の表示、動作に関わるもの
  • プラグインや"alt-tmpl"を利用して修正可能
  • 今回は変更しません
• テンプレート ＞ ブログ毎にあり、ブログの表示に関するもの
  • インデックステンプレート
  • アーカイブテンプレート
  • システムテンプレート
  • テンプレートモジュール
• グローバルテンプレート ＞ システムに１つにあり、システム（ブログや掲示板）全体にわたるもの
  • システムテンプレート
  • メールテンプレート
  • テンプレートモジュール

グローバルテンプレートで記載されている内容は、テンプレートに同名のものを作ることでブログ単位、フォーラム単位で上書きが可能です。

今回はこの中でコミュニティ掲示板で表示に関する部分のテンプレートの修正を取り上げます

テンプレート、CSSを編集する際の注意点

基本はクラシックブログなどと一緒ですが、コミュニティ・ソリューションではテンプレートやCSSを修正する際に注意しなければならない事があります。

• HTMLに書き込まれている JavaScript は修正しないで下さい。
  • 修正するとコミュニティ・ソリューションの機能（サインイン、注目など）が正しく動作しない可能性があります。
  • どうしても修正する必要がある場合、内容や場所を把握した上で修正をして下さい。
• HTML タグの "id", "class" は変更削除しないで下さい。
  • コミュニティ・ソリューションで利用されるJavaScriptは"id"や"class"を見て動作していますので、修正することで正しく動作しない可能性があります。
  • どうしても修正する必要がある場合、内容や場所を把握した上で修正をして下さい。
• テンプレートの処理は最小限にして下さい。
  • 大幅な変更によりJavaScriptを配置する場所や読み込まれる順番が変わることで、正しく動作しない可能性があります。
  • どうしても修正する必要がある場合、内容や場所を把握した上で修正をして下さい。
• JavaScript の修正、追加をしたい場合 mt.js に直接書き込まず別のJavaScriptファイルを作りインクルードして下さい。
  • mt.jsと分けることで、問題が発生した際に条件切り分けが比較的楽にできます。
  • 別ファイルにした場合、mt.jsに書き込まれている関数名と同じ名前を使わないよう気をつけて下さい。

• 参考＞ テンプレートを編集する時の注意点とJavaScriptの解説

テンプレート構造

基本はクラシックブログなどと一緒ですが、コミュニティ・ソリューションでは右上に[サインイン|登録]リンクが出るなど、特殊なJavaScriptが埋め込まれています。

以下がインデックスページのテンプレート構造です。

括弧付きがテンプレート、括弧なしはテンプレート内での動作を示します。

1. [ヘッダー]
   • [mt.js]
   • [ナビゲーション]
   • [サインイン]
   • [検索]
2. [コンテンツヘッダー]
   • トピックを投稿
3. [人気のブログ記事]
   • 目立ったトピック
   • 最新の返信
4. [ブログ記事一覧]
   • 最新トピック
   • 返信
   • 最新の返信
5. [コンテンツのナビゲーション]
   • トピックを投稿
   • ホーム
   • アーカイブ
   • （セパレータ）
6. [フッター]
   • [サイドバー]
     • [カテゴリグループ]
       • 最新のトピック
     • [規定のウィジェット]
       • OpenID対応
       • 購読
   • Powered by XXX
   • クリエイティブ・コモンズ

見た目の変更

デフォルトでは青を基調とするデザインになっていますが、ここでは簡単な例として赤を基調とするデザインに変更してみます。

パス "/mt-static/addons/Community.pack/themes/tristan-blue/" を見ると、CSSと画像が用意されているのがわかります。

今回はヘッダー部分を変更するので、以下の４ファイルが変更対象となります。

• logo.gif
  
• header.gif
  
• header-menu-bg.png
  
• navigation-bg.png
  

画像を青ベースから赤ベースに変更し "/images/"以下にFTPなどで配置します。今回は全てのファイルをPNGファイルにします。

• /images/logo_02.png
  
• /images/header_02.png
  
• /images/header-menu-bg_02.png
  
• /images/navigation-bg_02.png
  

"/mt-static/addons/Community.pack/themes/tristan-blue/screen.css"を見ると、上の４ファイルが以下のように指定されていることがわかります。

#header-content {
    width: 842px; 
    padding: 30px 0 65px 80px;
    background: transparent url(logo.gif) 10px 15px no-repeat;
}

#header { 
    background: #003265 url(header.gif) repeat left top; 
}

#header-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 940px;
    margin: 0 auto;
    padding-top: 3px;
    background: #fff url(header-menu-bg.png) center bottom no-repeat;
}

#header-menu ul {
    display: inline-block;
    list-style-type: none;
    width: 934px;
    margin: 3px 3px 0;
    padding: 0;
    background: #369 url(navigation-bg.png) left bottom repeat-x;
}

CSSを変更し画像を変更するため、MTの管理画面の左メニューの[デザイン]の[テンプレート]のスタイルシートを修正し、CSSの "background:" 情報を上書きします。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes-base/forum.css);
@import url(<$mt:StaticWebPath$>addons/Community.pack/themes/tristan-blue/screen.css);

#header-content {
    background: transparent url(/images/logo_02.png) 25px 22px no-repeat;
}

#header {
    background: #8F1616 url(/images/header_02.png) repeat left top;
}

#header-menu {
    background: #fff url(/images/header-menu-bg_02.png) center bottom no-repeat;
}

#header-menu ul {
    background: #8F1616 url(/images/navigation-bg_02.png) left bottom repeat-x;
}

変更前画面

変更後画面

これで見た目の変更ができました。