Movable Type 備忘録

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

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

こんにちわ^^

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

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

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

テンプレートについて

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

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

  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という圧縮ファイルをダウンロードして、サーバにアップロードしてください。

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

修正履歴

2007.05.21
»新規作成

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by ぷーこ @ May 22, 2007 [REPLY]
user-pic

このテンプレートもシンプルでカッコいいですね!
また変えたくなってきちゃう(;^_^A アセアセ・・・
日付が日めくりカレンダー風なのがかわいいです。
今度リニュする時はこちらをお借りするかもです(*^_^*)

#2: Posted by bzbell @ May 22, 2007 [REPLY]
user-pic

>>1 ぷーこ さん

こんにちわ^^

いつもありがとうございます (●>∀<●)

そそ、クレームブリュレわたしも食べました。
おぃしかったぁ♪

アイス好きなわたしはあのシリーズ全部制覇したい・・・と悩み中!!

 Post a Comment

 

コメント用フィード