Movable Type 備忘録

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

Movable Type 3 テンプレート

こんにちわ^^

ついチョビッと前までは暖かかったのに、昨日、今日は寒かったですね (;￣∇￣A
風邪などひかないよう気をつけてくださいね♪って、そんなわたしは既に風邪ひいて、抗体を作成済み (＞∀＜　)てへ

さてさて、テンプレート作ってみました。 わたしが通勤に利用している山手線の窓が曇ってたのを見て、モヤモヤしたかんじのテンプレートに仕上げてみました!! って言われてもよく分からないですよね (;￣∇￣A
わたしのフィーリングということで流してくださいな♪

このテンプレートのフォントには、POP系フォントを使用するといいかも (￣∇￣)b と思って、一部POP系フォントを使用してますの♪
当然、本文にはPOP系フォントだと見にくくなるから使用してませんけどね。

テンプレートについて

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

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou003-black.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.24
»新規作成

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by けんじ @ June 2, 2007 [REPLY]
user-pic

はじめまして！
Movable暦３日目の、けんじです。

bizcazさんのサイトは非常に分かりやすく、
勉強させてもらっています。

いきなりで恐縮なのですが、一点ご質問があります。

この「テンプレート・フォー・ユー３」を利用させてもらっているのですが、
コメントの「#1: Posted by ×　Name [RES] 」のように、
"Posted by"と"Name"の間に画像リンク切れが出てしまいます。

これは、どこのフォルダの画像を読みにいっているのでしょうか？

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

>>1 けんじ さん

はじめまして^^

> "Posted by"と"Name"の間に画像リンク切れが出てしまいます。

ごめんなさいっ!!
わたしのとこでは、コメントしていただいた人の、サイトのファビコンを表示してるんですっ!!
その名残りでしたっ!!

個別エントリ・アーカイブを以下のように修正すればリンク切れがなくなります。 

<MTFaviconCommentIfAvailable>～</MTFaviconCommentIfAvailable>の1行を削除
<MTFaviconCommentIfAvailable><img src="<$MTFaviconComment$>" alt="" title="" class="favicon" /></MTFaviconCommentIfAvailable>

大変ご迷惑をおかけしました (m;_ _)mペコ

 

 Post a Comment

 

コメント用フィード