Movable Type 備忘録

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

Movable Type 3 テンプレート

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

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

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

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

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

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

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

テンプレートについて

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

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou001-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.       | +--- rico/
  13.       | | +--- rico.js
  14.       | | +--- rico-toggleslider.js
  15.       | |
  16.       | +--- prototype.js
  17.       |
  18.       +-- base-weblog.css
  19.       +-- 1column-fixed.css
  20.       +-- ajax-loader.gif
  21.       +-- bg-button.gif
  22.       +-- comment-list.gif
  23.       +-- :
  24.       +-- feed-icon-200x60.gif
  25.       +-- :
  26.       +-- stlipe.png

圧縮ファイル中の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/1column-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/js/rico/rico.js"></script>
  4. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico-toggleslider.js"></script>
  5. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
  6.  
  7. 244行目
  8. <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をそのままエントリー・アーカイブに上書きします。 そして以下の箇所を各自の環境に合わせて修正します。

  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/rico/rico.js"></script>
  4. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/rico/rico-toggleslider.js"></script>
  5. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
  6. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcomments.js"></script>
  7. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcontents.js"></script>
  8.  
  9. 189行目
  10. <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からダウンロードして、サーバにアップロードします。

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

修正履歴

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)

#1: Posted by take @ July 29, 2007 [REPLY]
user-pic

はじめまして。
こちらのブラウンのテンプレート使わせてもらっています。
本当にありがとうございます。
ただ、コメントを投稿するとコメントの投稿欄が2つになってしまいます。
自分の設定がおかしいのでしょうか・・・

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

>>1 take さん

こんばんわ^^

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

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

#3: Posted by take @ July 30, 2007 [REPLY]
user-pic

今は自宅サーバで弄っている状態なので公開は難しいです><
ドメインを取得して公開できる状態になったときに、また戻ってきてもいいでしょうか・・・
本当に申し訳ありません。

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

>>3 take さん

こんにちわ^^

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

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

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

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

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

>>5 take さん

こんにちわ^^

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

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

  • 事前確認待ちにすることで、「ありがとうございます」メッセージが表示されるようになります。

  • 即時公開だと、コメント投稿のたびに再構築されます。
    場合によっては訪問者さんにストレスをかける(ずっと、待たされる)かもしれません。とはいっても、好き好きですけどね。

  • 即時公開の場合、投稿結果を反映させるにはページをリロードさせる必要があるため、投稿できたのかどうかが直感的に分かりにくいかもしれません。

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

#7: Posted by take @ August 4, 2007 [REPLY]
user-pic

>>6 bzbell さん
確認していただきありがとうございます。
自分の環境のせいですかねー。
早速コメントを即時公開しないように変更しました。
テンプレート使わせていただきます・w・

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

>>7 take さん

こんばんわ^^

> 自分の環境のせいですかねー。

う~ん、どぅですかねぇ。
わたしもオッチョコチョイなとこありますから (; ̄∇ ̄A はは

> テンプレート使わせていただきます・w・

はい。ありがとうございます。
何か不都合な点などありましたらご連絡くださいな♪

 Post a Comment

 

コメント用フィード