Movable Type 備忘録

テンプレート・フォー・ユー６

Apr072007
Author: bzbell
Categories: Template
Tags: 3.3, Fixed Layout, Template

Next Page: テンプレート・フォー・ユー７
Prev Page: テンプレート・フォー・ユー５

こんにちわ^^

今年もちょうどいい時期に雨やら風やらで、桜が満開の時期は短かったですが、わたしは運よく2回ほどお花見にお呼ばれしてもらえたので、桜をたっぷり観賞することができた!? かな (;￣∇￣A

さてさて、桜は散り始めていますが 'さくら'色のテンプレート作ってみました。

サンプルとして公開しているブログの背景には、さくら専門の素材を扱っている、こちらのさくらやさんの壁紙を使用させてもらってます。
壁紙は配布しているテンプレート内には入ってませんけど、もし気に入ったらさくらやさんからお借りするといいですよ (￣∇￣)b

テンプレートについて

このテンプレートでは今までと違い、個人的な趣味( わたしの好み )が思いっきり入っています。 MovableType備忘録でご紹介した、以下の内容が既にカスタマイズ済みになってます。

テンプレートの設置について

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou001-sakura.zip

次にCSSやイメージファイル、スクリプトをサーバにアップロードします。
アップロード先はどこでも構いません。ここでは以下のようなディレクトリ構成でテンプレート設定の説明を進めていきます。

http://●●●.com/
 +--- index.html        <-- 各自のトップページ
 +--- styles-site.css   <-- 各自のスタイルシート
 |
 +--- mt-memo/
      +--- ajax/
      |    +--- ajaxsearch.js
      |    +--- ajaxcomments.js
      |    +--- ajaxcontents.js
      |
      +--- js/
      |    +--- rico/
      |    |    +--- rico.js
      |    |    +--- rico-toggleslider.js
      |    |
      |    +--- prototype.js
      |
      +-- base-weblog.css
      +-- 1column-fixed.css
      +-- ajax-loader.gif
      +-- bg-button.gif
      +--      :
      +-- feed-icon-200x60.gif
      +--      :

圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。
また、CSSについては1行目に記述されている文字コード指定を変更してください。

@charset "utf-8";

次に、各テンプレートを設置します。変更するテンプレートを以下に記します。

スタイルシート( styles-site.css )
メインページ( index.html OR index.php )
エントリー・アーカイブ
カテゴリー・アーカイブ
日付アーカイブ
コメント・プレビュー
コメント・保留
コメント・エラー
コメントの一覧
検索結果

まずはスタイルシートから。
先ほどのディレクトリ構成を元に説明しますので、異なるディレクトリ構成の場合にはその都度読み替えてください。

@charset "<$MTPublishCharset$>";

@import "mt-memo/base-weblog.css";
@import "mt-memo/1column-fixed.css";

上記はstyles-site.cssがある場所からの相対パスとなっています。問題なければそのままコピーして上書きしてしまいます。

次に、メインページです。
圧縮ファイル中のtemplate/main_index.tmplをそのままメインページに上書きします。そして、以下の行について各自の環境に合わせて変更します。

22行目
<script type='text/javascript' src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico-toggleslider.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>

次に、エントリー・アーカイブです。
圧縮ファイル中のtemplate/individual_entry_archive.tmplをそのままエントリー・アーカイブに上書きします。そして以下の箇所を各自の環境に合わせて修正します。

27行目
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico-toggleslider.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcomments.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcontents.js"></script>
188行目
<img id="progress" style="display:none;" src="<$MTBlogURL$>mt-memo/ajax-loader.gif" alt="Loading..." />

次に、カテゴリー・アーカイブ、日付アーカイブです。
圧縮ファイル中のtemplate/category_archive.tmpl、template/datebased_archive.tmplをそれぞれコピーして上書きします。そして、今までと同様にJavaScriptのパスを各自の環境に合わせて変更します。

最後に、コメント・プレビュー、コメント・保留、コメント・エラー、コメントの一覧と検索結果をそれぞれ上書きします。

template/comment_preview_template.tmpl
コメント・プレビュー
template/comment_pending_template.tmpl
保留
template/comment_error_template.tmpl
コメント・エラー
template/comment_popup_template.tmpl
コメントの一覧
template/search_results_template.tmpl
検索結果

以上で各テンプレートの設置は完了です。
次にブログ検索用のXMLテンプレートを新規作成します。以下のコードをコピーして、インデックス・テンプレートを作成してください。

作成するファイル名は必ずsearch_data.txtとし、index.htmlと同じ場所に作成してください。

<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

最後にプラグインをインストールします。
月別アーカイブ一覧で使用しているArchiveDateHeaderプラグインとArchiveDateFooterプラグインのインストールします。
上記URLからダウンロードして、サーバにアップロードします。

以上で一通りの作業は完了です。
後はいつものように再構築して、表示確認を行ってください。