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

• May212007
• Vote:
  http://bizcaz.com/archives/2007/05/21-004032.php
• Categories: Template
• Tags: 3.3, Template
• Social Bookmark

• Prev Page: CSSでドロップメニュー
• Next Page: テンプレート・フォー・ユー９

こんにちわ^^

昨日は風は強かったけど、心地いい天気でしたねぇ。
近くの公園でバドミントンなどして久しぶりに体を動かしました♪

さて、これまた久しぶりにテンプレートを作ってみました。
新しく作ったわけではないのですが、以前、わたしが作ったテンプレートでして、ベースのテンプレート変更と共に配布をやめたものです。

個人的にはスッキリしてて気に入ってたテンプレートの1つだったので、リキッドスタイルに変更して復刻させてみました。

テンプレートについて

このテンプレートでは、MovableType備忘録でご紹介した、以下の内容がカスタマイズ済みになってます。

• エントリ日付を日めくりカレンダー風にカスタマイズ
• MovableType備忘録流 月別アーカイブ一覧
• AjaxでIFRAME的な表示をやってみる
• ブログ内検索を高速化
• MovableTypeで2ちゃんねる風なコメントリストにする

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

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

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

   1. http://●●●.com/
   2.  +--- index.html
   3.  +--- styles-site.css
   4.  |
   5.  +--- mt-memo/
   6.       +--- ajax/
   7.       | +--- ajaxsearch.js
   8.       | +--- ajaxcomments.js
   9.       | +--- ajaxcontents.js
   10.       |
   11.       +--- js/
   12.       | +--- prototype.js
   13.       | +--- comment_res.js
   14.       |
   15.       +-- base-weblog.css
   16.       +-- 2column-liquid.css
   17.       +-- ajax-loader.gif
   18.       +-- feed-icon.gif

   CSSファイル内の1行目に記述されている文字コード指定を変更してください。

   1. @charset "utf-8";

   そして、圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。

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

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

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

   1. @charset "<$MTPublishCharset$>";
   2.  
   3. @import "mt-memo/base-weblog.css";
   4. @import "mt-memo/2column-liquid.css";

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

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

   1. 20行目
   2. <script type='text/javascript' src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
   3. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>

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

   1. 27行目
   2. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
   3. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/comment_res.js"></script>
   4. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
   5. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcomments.js"></script>
   6. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcontents.js"></script>
   7.  
   8. 197行目
   9. <img id="progress" style="display:none;" src="<$MTBlogURL$>mt-memo/ajax-loader.gif" alt="Loading..." />

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

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

   • 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
     検索結果

   以上で各テンプレートの設置は完了です。

8. 次にブログ検索用のXMLテンプレートを新規作成します。
   以下のコードをコピーして、テンプレートを作成してください。

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

   1. <?xml version="1.0" encoding="utf8"?>
   2. {
   3. data:[
   4. <MTEntries all="1">{
   5. title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
   6. ,link:"<$MTEntryLink$>"
   7. ,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>"
   8. },</MTEntries>
   9. {title:"",link:"",body:""}
   10. ]
   11. }

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

   もう1つ、コメント投稿時の返信機能を追加してますので、こちらのmt-link-numberプラグインをインストールします。
   上記URLからmt-link-number.zipという圧縮ファイルをダウンロードして、サーバにアップロードしてください。

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

修正履歴

• Related Entries
• 07/05/28テンプレート・フォー・ユー９
• 07/04/15テンプレート・フォー・ユー７
• 07/04/07テンプレート・フォー・ユー６
• 06/12/29ベーシック・テンプレート
• 06/11/22アレンジ・テンプレート１
• 06/12/09アレンジ・テンプレート２
• 06/12/30アレンジ・テンプレート３
• 06/12/31アレンジ・テンプレート４
• 07/01/02アレンジ・テンプレート５
• 07/01/08アレンジ・テンプレート６

• Edit
• Permalink
• 2 Comments
• No TrackBacks