Movable Type 備忘録
テンプレート・フォー・ユー２
- Next Page: テンプレート・フォー・ユー３
- Prev 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
- »新規作成
Trackback Pings(0)
No trackbacks found.
Comments(8)
- #2: Posted by bzbell [RES]
>>1 take さん
こんばんわ^^
> コメントを投稿するとコメントの投稿欄が２つになってしまいます。
可能であれば、take さんが設置したブログの URL を見させていただけますか (￣∇￣)
- #3: Posted by take [RES]
今は自宅サーバで弄っている状態なので公開は難しいです＞＜
ドメインを取得して公開できる状態になったときに、また戻ってきてもいいでしょうか・・・
本当に申し訳ありません。
- #5: Posted by take [RES]
お久しぶりですー
おそらくではありますが公開できているはず！？です・・・
あれからテンプレートを変えたりいろいろ試しましたが駄目でした。
うーん。。。
最悪コメントは即時公開しないか、受け付けない方向で！・ｗ・もし見ることができなかったらごめんなさい。
- #6: Posted by bzbell [RES]
>>5 take さん
こんにちわ^^
先ほど take さんとこのサイトでコメントテストさせてもらいました。
Preview も Post も問題なさそうですよ (￣∇￣)b
>>1で言われる、コメントを投稿するとコメントの投稿欄が２つになるって現象は確認できませんでした。でも、1つ気になることがあります。
コメントの承認を即時公開でなく、事前確認待ちにしてください。事前確認待ちにすることで、「ありがとうございます」メッセージが表示されるようになります。
即時公開だと、コメント投稿のたびに再構築されます。
場合によっては訪問者さんにストレスをかける(ずっと、待たされる)かもしれません。とはいっても、好き好きですけどね。即時公開の場合、投稿結果を反映させるにはページをリロードさせる必要があるため、投稿できたのかどうかが直感的に分かりにくいかもしれません。
対策としては、コメント欄部分も Ajax 化することで、コメント投稿されたらコメント欄を読み直すという手があります。
- #7: Posted by take [RES]
>>6 bzbell さん
確認していただきありがとうございます。
自分の環境のせいですかねー。
早速コメントを即時公開しないように変更しました。
テンプレート使わせていただきます・ｗ・
- #8: Posted by bzbell [RES]
>>7 take さん
こんばんわ^^
> 自分の環境のせいですかねー。
う～ん、どぅですかねぇ。
わたしもオッチョコチョイなとこありますから (;￣∇￣A はは> テンプレート使わせていただきます・ｗ・
はい。ありがとうございます。
何か不都合な点などありましたらご連絡くださいな♪
はじめまして。
こちらのブラウンのテンプレート使わせてもらっています。
本当にありがとうございます。
ただ、コメントを投稿するとコメントの投稿欄が２つになってしまいます。
自分の設定がおかしいのでしょうか・・・