Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

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

Feb052007
Vote:
http://bizcaz.com/archives/2007/02/05-011951.php
Categories: Template
Tags: 3.3, Fixed Layout, Template
Social Bookmark

Prev Page: アレンジ・テンプレート８
Next Page: テンプレート・フォー・ユー２

こんにちわ^^
チョビッと虫のいどころが悪いbzbellです。

先週はとうとう風邪をひいてしまい、39度まで熱がでてしまって散々な日々でした（つω-`｡）
さすがに熱が上がり過ぎだったので、病院に行って抗生物質もらってクールダウンしました（;￣∇￣A

さてさて、本日は以前から頼まれてた、友人のために作ったテンプレートのお疲労目の日(●´∀｀●)♪ 忙しい時間の中、コツコツ作ったテンプレートです。

で、風邪も治ったことだし気分良く友人宅に訪問したら、応答なし･･･。
『えっ!? 寝てるのかなぁ』と思いつつ携帯にTELしたら、その友人出張中でした Σ(￣Д￣；) ガーン!!

そりゃね、出かける前に確認しなかったわたしも悪いけどさぁ、2週間前から約束してたんだから連絡ぐらいよこせ!! とムカつきながら帰ってきましたヽ(`Д´ *) プンスカ!!
もう頼まれてもヤツには作ってやらないっ!!

ということで、そんないわくつきのテンプレートですが、良かったら使ってください。

テンプレートについて

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

ホントはプラグインによるカスタマイズなどもやってたのですが、今回の公開のためにダウングレードしました。

ですので、もしかしたら設置に戸惑うかも、ですが、その時はご連絡いただければサポート致します (m;_ _)mペコ

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou001-black.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
+-- comment-list.gif
+-- :
+-- feed-icon-200x60.gif
+-- :
+-- stlipe.png

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

また、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をそのままメインページに上書きします。そして、以下の行について各自の環境に合わせて変更します。

21行目
<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>
244行目
<td><input type="image" id="search_button" onclick="javascript:blogAjaxJsonSearch('<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" src="<$MTBlogURL$>mt-memo/site-search.gif" /></td>

次に、エントリー・アーカイブです。圧縮ファイル中の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>
189行目
<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:""}
]
}