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

Movable Type 備忘録

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

May282007
Vote:
http://bizcaz.com/archives/2007/05/28-005131.php
Categories: Template
Tags: 3.3, Template
Social Bookmark

Prev Page: テンプレート・フォー・ユー８
Next Page: Movable Type 4 用テンプレート作ってみた

こんにちわ^^

昨日の同窓会で飲みすぎたせいか、何もやる気が起きなくて、1日のんびり過ごしたbzbellです。
お昼くらいまで頭痛で寝込んでました (;￣∇￣A

すっかり元気になったので、テンプレート作ってみました。

こちらのテンプレートもテンプレート・フォー・ユー８と同様に、以前作ったテンプレートですが、わたし的に気に入っていたテンプレートの1つだったので復刻させてみました。

ただし、WIN/IE6.0、IE7ではナビゲーションバーが表示できない現象がでてまして、まだ調整中です (´･д･`)
それに伴ってCSSを多少変更することになると思いますので、後日CSSのみアップデートしていただければと思います。

- 2007.05.29 追記 -

WIN/IE6.0、IE7.0対応しました。

Firefox2.0、Opera9.2では表示確認済みです。

テンプレートについて

このテンプレートでは、MovableType備忘録でご紹介した、以下の内容がカスタマイズ済みになってます。

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

まずテンプレート一式をダウンロードします。
以下から圧縮ファイルをダウンロードして適当なフォルダに展開します。
foryou006-gryffindor.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. | +--- prototype.js
13. | +--- comment_res.js
14. |
15. +-- base-weblog.css
16. +-- 3column-liquid.css
17. +-- ajax-loader.gif
18. | ：
19. +-- site-search.gif
CSSファイル内の1行目に記述されている文字コード指定を変更してください。
1. @charset "utf-8";
そして、圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。
次に、各テンプレートを設置します。
変更するテンプレートを以下に記します。
- スタイルシート( styles-site.css )
- メインページ( index.html OR index.php )
- エントリー・アーカイブ
- カテゴリー・アーカイブ
- 日付アーカイブ
- コメント・プレビュー
- コメント・保留
- コメント・エラー
- コメントの一覧
- 検索結果
まずはスタイルシートから。
先ほどのディレクトリ構成を元に説明しますので、異なるディレクトリ構成の場合にはその都度読み替えてください。
1. @charset "<$MTPublishCharset$>";
3. @import "mt-memo/base-weblog.css";
4. @import "mt-memo/3column-liquid.css";
上記はstyles-site.cssがある場所からの相対パスとなっています。問題なければそのままコピーして上書きしてしまいます。
次に、メインページです。
圧縮ファイル中のtemplate/main_index.tmplをそのままメインページに上書きします。そして、以下の行について各自の環境に合わせて変更します。
1. 20行目
2. <script type='text/javascript' src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
3. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
次にエントリー・アーカイブです。
圧縮ファイル中の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/comment_res.js"></script>
4. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
5. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcomments.js"></script>
6. <script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcontents.js"></script>
8. 188行目
9. <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. }
最後にプラグインをインストールします。
コメント投稿時の返信機能を追加してますので、こちらのmt-link-numberプラグインをインストールします。
上記URLからmt-link-number.zipという圧縮ファイルをダウンロードして、サーバにアップロードしてください。

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

修正履歴

2007.05.29

»やむを得ずテンプレートの構造を変更しました。
具体的にはナビバーをテンプレートの下の方に配置しました (;￣∇￣A
これにより IE6.0、IE7.0 でも問題なくナビバーが表示されます。

»ナビバーをposition:fixedにすることで固定配置に変更しました。

»IEにおいてナビバーが表示されたり、されなかったりする現象わかった。
IEで position:absolute した要素が消えるバグ
 IEで position:absolute した要素が消えるバグ

わたしも position:absolute なんてあまり使わないので絶対配置によるレイアウトに思いの他苦戦中です (;￣∇￣A

2007.05.26

»新規作成

Edit
Permalink
4 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(4)

#1: Posted by さんきゅう @ July 22, 2007 [REPLY]: 使わせていただいてます。
お洒落でホントに良いです(^o^)
が・・・・いろいろハードルが高いです(^_^;

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

>>1 さんきゅうさん

はじめまして^^

テンプレート使っていただいてありがとうございます (●´∀｀●)

> が・・・・いろいろハードルが高いです(^_^;

はぅ（*ﾉД`*）ごめんなさい。

テンプレートや CSS 内にコメント入れたりなど、できる限り分かりやすく、各自でカスタマイズできるようにしてるつもりなのですが･･･わたしもまだまだ勉強中の身でして、どぅも、その 'つもり' の部分に温度差があるみたいです (;￣∇￣A

今後のためにも、さんきゅうさんが設置する上で、つまづいたところなど教えていただけると嬉しいです。

ところで･･･ライブカメラですか!!
おもしろそうですね (●＞∀＜●)

そそ、モダンブラウザ(Firefox など)と IE6.x とでは横幅に違いがあるようです。
おそらく、IE6.x で表示した場合横幅を 'auto' で指定してませんか。
90% とするとこで、同様の表示が可能になります (￣∇￣)b

あと、ご連絡いただいたサイトさんには、勝手ながらリンクを貼らさせてもらってます。
ご都合が悪い場合にはその旨ご連絡ください♪

#3: Posted by さんきゅう @ July 23, 2007 [REPLY]

こんにちは、bzbellさん。
コメント返信いただきありがとうございます。

> が・・・・いろいろハードルが高いです(^_^;
新しい物になかなか対応出来ません、、です。
テンプレート記述はが入ってホントに分かりやすいです。
こんなに親切なテンプレートはないですね(^o^)

>今後のためにも、さんきゅうさんが設置する上で、つまづいたところなど
>教えていただけると嬉しいです。
設置はスムーズにいきましたσ(^^)
ただ、うちはトップページ、ライブページ、アニメーションページを
別で作ったんでテンプレートをよく理解する必要はありました。
トップページがIE7等では正常ですがIE6.xで下がってしまって
原因を探すのに苦労しました(>_<)
原因は</div> が一つ多かった←基本を知らないバカな私・・・

>勝手ながらリンクを貼らさせてもらってます。
ありがとうございます。
今後ともよろしくお願いします。

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