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

Movable Type 備忘録

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

Apr012007
Vote:
http://bizcaz.com/archives/2007/04/01-021005.php
Categories: Template
Tags: 3.3, Fixed Layout, Template
Social Bookmark

Prev Page: テンプレート・フォー・ユー４
Next Page: テンプレート・フォー・ユー６

こんにちわ^^

訪問者さんからのご要望で、わたしのサイトで使ってるテンプレートを公開して欲しいとのことだったので、汎用的に作り変えたものを公開いたします。
多少アレンジしちゃいました (;￣∇￣A

元々、コンテスト用に急遽作ったテンプレートだったのですが、わたしの性格的にもそろそろテンプレートを変更しようと思ってましたのでちょうど良かったです (●´∀｀●)

今わたしが使ってるテンプレートなんかより、ぜんぜんカックいくしたつもりです。

ある日、ある時、メールでご連絡して頂いた、訪問者さんへ･･･Present for You。

テンプレートについて

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

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou004-green.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
| +--- comment_res.js
|
+-- base-weblog.css
+-- 2column-fixed.css
+-- ajax-loader.gif
+-- bg-button.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/2column-fixed.css";

上記はstyles-site.cssがある場所からの相対パスとなっています。問題なければそのままコピーして上書きしてしまいます。

次に、メインページです。
圧縮ファイル中のtemplate/main_index.tmplをそのままメインページに上書きします。そして、以下の行について各自の環境に合わせて変更します。

20行目
<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>

次に、エントリー・アーカイブです。
圧縮ファイル中の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/comment_res.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>
190行目
<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からダウンロードして、サーバにアップロードします。

もう1つ、コメント投稿時の返信機能を追加してますので、こちらのmt-link-numberプラグインをインストールします。
上記URLからmt-link-number.zipという圧縮ファイルをダウンロードして、サーバにアップロードしてください。

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

修正履歴

2007.04.01: »新規作成

Edit
Permalink
8 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(8)

#1: Posted by つつみ @ April 2, 2007 [REPLY]

テンプレートありがとうございます！
早速使ってみたいと思います。

本当にありがとうございました！

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

>>1 つつみさん

こんにちわ^^

遅くなりましたが、使ってみてください♪
気に入ってもらえますように･･･。

何か不明点などありましたらご連絡ください (￣▽￣)/

#3: Posted by ぷーこ @ April 3, 2007 [REPLY]: あ、これカッコいいテンプレですよね～♪
bzbellさんのセンスが光ってて素敵です（*^_^*）
そうそう、bzbellさんオススメのハーブティー、
レッドジンガーとレモンジンガーを毎日飲んでますよｗ
レッドは本当に安いのに美味しい！！
教えてもらって良かったですm(_ _"m)ペコリ

#4: Posted by bzbell @ April 3, 2007 [REPLY]

>>3 ぷーこさん

こんにちわ^^

> あ、これカッコいいテンプレですよね～♪
> bzbellさんのセンスが光ってて素敵です（*^_^*）

ありがとうございますぅ (ノ_<。)うぅ

> レッドジンガーとレモンジンガーを毎日飲んでますよｗ

カルディ・コーヒーファーム行ったんですね!?
よかったぁ（＾▽＾喜）気に入ってもらえて♪

店舗によって品揃えが違うらしいんですよ。
すべての商品じゃないけど、ネットでも買えるので便利ですよね。

今度ぷーこさんのお気に入りなどあったら教えてください ☆⌒(＊＾∇゜)
そそ、またコンビニで新種!? の紅茶見つけてましたね。後ほど遊びに行きます（*＾。＾*）

#5: Posted by Riz @ April 7, 2007 [REPLY]

こんばんは！
新しいテンプレートが出たって事で、早速設置してみました♪

私にしては珍しく（？）設置が一発でうまくいき、ホッとしたところですが･･･何点か質問があります。

main-index.tmpl　をコピーする際、１９行目～２３行目

上の１行目、js/　は要らないような気がします。
同２行目、'text/javascript' 　のククリだけ他と違うようですが･･･何故でしょう。。

正常に設置出来たようなので問題はなさそうですが･･･ちょっと聞いてみました＾＾；

後、サイト全体の色合いを緑から赤っぽくカスタマイズしてみようと思うのですが、
どの辺りのCSSをいじればいいのかヒントを下さると嬉しいです。

よろしくお願いします

#6: Posted by bzbell @ April 7, 2007 [REPLY]

>>5 Riz さん

こんにちわ^^

> 上の１行目、js/は要らないような気がします。

はい。必ずしも必要ではないです。
記事にも明記してますが、青い字(<$MTBlogURL$>mt-memo/)の部分は各自の環境に合わせて使用します。

> 同２行目、'text/javascript' 　のククリだけ他と違うようですが･･･何故でしょう。。

はっΣ(￣Д￣；)!!
すいません。わたしのミスです。

でも、どちらの記述でも問題ありません。お好みで記述してください (;￣∇￣A

> 正常に設置出来たようなので問題はなさそうですが･･･ちょっと聞いてみました＾＾；

ご連絡ありがとうございます。
そういったご連絡はとっても助かります (m;_ _)mペコ

> 後、サイト全体の色合いを緑から赤っぽくカスタマイズしてみようと思うのですが、どの辺りのCSSをいじればいいのかヒントを下さると嬉しいです。

どこら辺を緑から赤っぽくカスタマイズしたいですか (￣∇￣)
たとえば、リンクの色を変更したい場合には、以下の箇所を変更します。

2column-fixed.css / 59行目
a,
a:link,
a:active,
a:visited,
a:active {
color: #97bd78;        <--- リンクの前景色
}
a:hover {
color: #ffb400;          <--- ホバーリンクの前景色
text-decoration: none;
}

Riz さんがイメージしてる、具体的にやりたいことを教えていただければ、もっと的確にお答えすることができるかと思います (￣∇￣)b

#7: Posted by Riz @ April 7, 2007 [REPLY]

こんにちは！
素早いお返事ありがとうございますｖ

なるほど、納得できました！お役にたてて（？）良かったです＾＾；

＞Riz さんがイメージしてる、具体的にやりたいことを教えていただければ、もっと的確にお答えすることができるかと思います (￣∇￣)b

具体的に申しますと、最上部を、画像を背景としたBackgroundにカスタマイズしたいなと思ってるんです。（footerで使われてる画像の大きさ位の）
最下部も、既存の画像を差し替えて明るい桜色の背景でも創ろうかなぁと思ってます。
カスタマイズの箇所を自分で検索したりしてたのですが、どうも場所が分らなくて四苦八苦しております＞＜；

後は先ほどbzbellさんが言ってた、リンク要素の辺りですね。この辺りもいじってみたいなと思います。

#8: Posted by bzbell @ April 7, 2007 [REPLY]

>>7 Riz さん

こんにちわ^^

> ･･･最上部を、画像を背景としたBackgroundにカスタマイズしたいなと思ってるんです。

ヘッダ部の高さを画像が表示できるくらいの高さにしたい･･･ということですかね (￣∇￣)
それでしたら、以下の場所でヘッダの高さなど調整できます。

2column-fixed.css / 95行目
#header {
margin: 0 624px 0 0;
padding: 0;
width: 400px;      <--- 幅
height: 100px;     <--- 高さ
float: left;
text-align: left;
}

このテンプレートでは、ヘッダ部のイメージ＝サイトの背景となってます。ですので、以下の場所を削除すれば、ヘッダ部のイメージを非表示することができます。

2column-fixed.css / 12行目
body {
margin: 0 auto;
color: #aaaaaa;
background: #13171b url(site-body.gif) repeat-x top left;  <--- ヘッダ部のイメージ
text-align: center;
font-size: 80%;
}

> 桜色の背景でも創ろうかなぁと思ってます。

わたしも今 'さくら'色のテンプレート作ってますの(●´∀｀●)
http://bzbell.com/annex/

ステキなテンプレートができるといいですね♪
がんばってください o(￣∇￣)o