Movable Type 備忘録

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

Movable Type 3 テンプレート

こんにちわ^^

テンプレート・フォー・ユー１と同様に、テンプレート・フォー・ユー３の色違いバージョンを作ってみました♪

ベースさえ作ってしまえば、色違いにするだけなので早い、早い (＞∀＜　)てへ

今後の予定はフォー・シーズンに合わせた色のレパートリーなど作ってみますよ (●´∀｀●)
あと少しすると、ただ酒、花見シーズンなので、今度はさくら色かな♪
初夏には若葉色ですかね (￣∇￣)v

とまぁ、こんなかんじで1つのテンプレートで着せ替えられるCSSを用意していくつもりですの♪

右サイドバー上に、『black』、『brown』というメニューを用意しましたので、そちらをポチっとしてもらえれば色を確認できます (￣∇￣)b

テンプレートについて

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

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

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

次に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.       +-- 3column-fixed.css
  17.       +-- ajax-loader.gif
  18.       +-- bg-button.gif
  19.       +-- :
  20.       +-- feed-icon-200x60.gif
  21.       +-- :
  22.       +-- site-title.gif

圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。
文字コードにUTF-8以外をお使いの人は、CSSおよび、スクリプトをファイルの文字コード変換を済ませてからアップロードしてください。 そうしないと文字化けの原因になります。
文字コードの変換は、文字コード変換付きのテキストエディタなどで開いて、各自で使用している文字コードで保存し直せばOKです。

また、CSSについては、1行目に記述されている文字コード指定を変更してください。

  1. @charset "utf-8";

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

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

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

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

上記はstyles-site.cssがある場所からの相対パスとなっています。 問題なければそのままコピーして上書きしてしまいます。
次に、メインページです。 圧縮ファイル中のtemplate/main_index.tmplをそのままメインページに上書きします。 そして、以下の行について各自の環境に合わせて変更します。

  1. 21行目
  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>
  4.  
  5. 244行目
  6. <td><input type="image" id="search_button" onclick="javascript:blogAjaxJsonSearch('<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" /></td>

次に、エントリー・アーカイブです。 圧縮ファイル中の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. 189行目
  9. <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と同じ場所に作成してください。

  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. }

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

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

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

修正履歴

2007.06.02
»個別エントリ・アーカイブにて、コメント一覧にリンク切れのイメージ表示がされる不具合が見つかりました。
これはわたしのサイトで、コメント投稿していただいた人のサイトのファビコンを表示するためのタグが残ったままによる現象でした。すいません。
2007.03.06
»各テンプレート内のフィードのURLが固定パスになってたのを修正しました。
2007.02.27
»ajax_loader.gifを間違えてBlack用のものを配布してました。すいません (m;_ _)mペコ
差し替えましたので、お手数ですが再度ダウンロードしてアップロードし直してください。
2007.02.24
»新規作成

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード