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

Movable Type 備忘録

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

Feb112007
Vote:
http://bizcaz.com/archives/2007/02/11-214915.php
Categories: Template
Tags: 3.3, Fixed Layout, Template
Social Bookmark

Prev Page: テンプレート・フォー・ユー１
Next Page: テンプレート・フォー・ユー３

こんにちわ^^
今日散歩がてら買い物に行って、帰りに31のアイス買って公園で食べてたら、おじぃちゃんが体操してました。八極拳!? かなぁ。不思議な、またぁ～りした動きをしてました。

一通りの型!? が終わったのか、身だしなみを整えだし始めてた時、ステキなラクダ色のももひきが見え隠れ(●´∀｀●)してたのをきっかけに、このテンプレート作ってみました♪

動機はともかくとして、中々いい感じのらくだ色が作れたので、わたし個人のサイトでも使用しちゃおうかなぁ･･･と思う今日この頃。

今回はスタイル・スウィッチャーというものにTRYしてみました。
カンタンにいうとスタイル・シートをダイナミックに切り替えるものです。

前に小粋空間さんのところで、そんなかんじの記事見たことあったのを思い出して、さっそくTRYしてみましたの♪
スタイルシート切り替え

そんなわけで、こちらのANNEX::MovableType MEMOのナビゲーションバーのところに、「Black」、「Brown」というメニューがありますので、そちらをクリックすれば切り替わります。すっごく便利です♪

お気に召したら使ってくださいませ (m;_ _)mペコ

テンプレートについて

基本的にはこちらのテンプレート・フォー・ユー１の色違いバージョンとなっています。
内容も同じで、一部カスタマイズ済みです。カスタマイズした内容は以下の通りです。

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou001-brown.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:""}
]
}

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

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

修正履歴

2007.03.06: »各テンプレート内のフィードのURLが固定パスになってたのを修正しました。
2007.02.15: »rico-toggleslider.jsをバージョンアップしました。それに伴った修正も行っています。
2007.02.14: »会社の人に言われて液晶モニターでこのテンプレ見たら、わたしが作った色じゃないっ ∑(￣д￣;)!! 自宅のCRTモニターでは'らくだ'色してたのになぁ…後ほど変更入れます♪
2007.02.11: »新規作成

Edit
Permalink
8 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(8)

#1: Posted by take @ July 29, 2007 [REPLY]: はじめまして。
こちらのブラウンのテンプレート使わせてもらっています。
本当にありがとうございます。
ただ、コメントを投稿するとコメントの投稿欄が２つになってしまいます。
自分の設定がおかしいのでしょうか・・・

#2: Posted by bzbell @ July 29, 2007 [REPLY]

>>1 take さん

こんばんわ^^

> コメントを投稿するとコメントの投稿欄が２つになってしまいます。

可能であれば、take さんが設置したブログの URL を見させていただけますか (￣∇￣)

#3: Posted by take @ July 30, 2007 [REPLY]: 今は自宅サーバで弄っている状態なので公開は難しいです＞＜
ドメインを取得して公開できる状態になったときに、また戻ってきてもいいでしょうか・・・
本当に申し訳ありません。

#4: Posted by bzbell @ July 30, 2007 [REPLY]

>>3 take さん

こんにちわ^^

はい。ぜんぜん問題ありません♪
わたしも>>1の要因について考えられることを検討しみます。

#5: Posted by take @ August 4, 2007 [REPLY]

お久しぶりですー
おそらくではありますが公開できているはず！？です・・・
あれからテンプレートを変えたりいろいろ試しましたが駄目でした。
うーん。。。
最悪コメントは即時公開しないか、受け付けない方向で！・ｗ・

もし見ることができなかったらごめんなさい。

#6: Posted by bzbell @ August 4, 2007 [REPLY]

>>5 take さん

こんにちわ^^

先ほど take さんとこのサイトでコメントテストさせてもらいました。
Preview も Post も問題なさそうですよ (￣∇￣)b
>>1で言われる、コメントを投稿するとコメントの投稿欄が２つになるって現象は確認できませんでした。

でも、1つ気になることがあります。
コメントの承認を即時公開でなく、事前確認待ちにしてください。

事前確認待ちにすることで、「ありがとうございます」メッセージが表示されるようになります。
即時公開だと、コメント投稿のたびに再構築されます。
場合によっては訪問者さんにストレスをかける(ずっと、待たされる)かもしれません。とはいっても、好き好きですけどね。
即時公開の場合、投稿結果を反映させるにはページをリロードさせる必要があるため、投稿できたのかどうかが直感的に分かりにくいかもしれません。

対策としては、コメント欄部分も Ajax 化することで、コメント投稿されたらコメント欄を読み直すという手があります。

#7: Posted by take @ August 4, 2007 [REPLY]: >>6 bzbell さん
確認していただきありがとうございます。
自分の環境のせいですかねー。
早速コメントを即時公開しないように変更しました。
テンプレート使わせていただきます・ｗ・

#8: Posted by bzbell @ August 4, 2007 [REPLY]