Movable Type 備忘録

テンプレート MT.1 for Movable Type 4

Aug262007
Author: bzbell
Categories: Template
Tags: 4.0, MovableType, Template

Next Page: テンプレート MT.2 for Movable Type 4
Prev Page: Movable Type 4 用テンプレートほぼ完成したよ

こんにちわ^^

先日、寝室のエアコンのリモコンが壊れてしまったため、ビックカメラで買ってきました。
本体はまだ使えそうなのに、リモコンが壊れただけでまったく使えなくなるってのも考えものですヾ（｀Д´*）プンプン

暑い日々はまだ続きそうなので、しょうがなく買ってきたんですの。イタイ出費です（つω-`｡）
で、今時のエアコンって自動的にフィルターのお掃除してくれちゃうって知ってました (ﾟ∀ﾟ； )

わたし知らなかったんですけど、ナショナルのエアコンは使い終わると、ブーン･･･ブーンってなかんじで勝手にお掃除してくれちゃってます。10 年間お掃除いらず!? とのことです (●´∀｀●)
でも、本体 10 年持ったとしても、リモコン壊れりゃ意味ないジャン!! と思うのココロ。

さて、Movable Type 4 向けのテンプレート完成しましたのでご紹介します。
一応、StyleCatcher での設置も対応してますが、あまりオススメできません。

だって、わたしんとこのテンプレートってスタイルだけじゃなく、Ajax やプラグインによるカスタマイズ済みのテンプレートなんだもん。スタイルだけ適用しても中途半端に設置されちゃいます (;￣∇￣A

やっぱりデフォルトのテンプレートに、スタイルだけ変更する方がいいのかな。
作る側(わたし)も楽だしね･･･と思う今日この頃でございます。

- 2007.11.23 -
関連するエントリ一覧のデザインを少し変更しました。

- 2007.10.29 -
コメント投稿完了後、メッセージが表示されない不具合に対応しました。

- 2007.10.28 -
フォトウィジェット使用時のスタイルを追加しました。

- 2007.10.14 -
テンプレート構造を少し見直しました。具体的にはナビゲーションバーを<div id="container-inner">～</div>に包含するようにしました。

- 2007.09.24 -
ページアクセスランキング機能を追加しました。それに伴って prototype.ajax.js、サイドバー (2カラム)、サイドバー (3カラム)テンプレートモジュールを変更しています。
詳しくはマニュアルを参照してください。

- 2007.09.23 -
日付アーカイブのブログ内検索にて検索すると、段落ちしてしまう不具合を対応しました。
具体的にはサイドバー (2カラム)、サイドバー (3カラム)テンプレートモジュールの以下の部分を修正してます。

サイドバー (2カラム)、サイドバー (3カラム)

<div class="widget-content">
<form method="get" action="javascript:ajaxsearch_contents();">
<table><tr>
<td><input type="text" id="search_box" value="" /></td>
<td><input type="hidden" id="search_button" onclick="javascript:ajaxsearch_contents();" /></td>
</tr></table>
</form>
<div id="search-content"></div>
</div>

青い字の部分を追加しました。

- 2007.08.29 -
パンくずリストの背景をうっすらと半透明にしてみました。

- 2007.09.01 -
IE6.x で表示するとフッターの上に無駄なスペースが空いてしまう不具合に対応しました。

アーカイブテンプレートの設置の仕方を詳しく追記しました。

カレンダー表示にて、<MTDate> タグだとブログ全体の更新日付となってしまい、その月にエントリが投稿されてない場合エラーしてしまう不具合を対応しました。
具体的には、<MTDate> タグを <MTArchiveDate> タグに変更しました。

ナビゲーションバーおよび、パンくずリストを<container> 内に包含するよう変更しました。それに伴ってスタイルシートも少し変更しました。

- 2007.09.02 -
すいません。間違って本文記事を追記記事の方に上書きしちゃったため、テンプレートの設置手順消しちゃいました (´Д｀；) なので、暫定で PDF ファイルを用意しましたのでそちらを参照してください。

システムテンプレート内にある検索結果テンプレートをデフォルトのまま配布してました (´Д｀；) すいません。
正しいテンプレートを含めましたので、再度ダウンロードおよび、システムテンプレートの検索結果の更新をお願い致します。

dtree.posts.js の不具合を対応しました。
具体的には、コメントツリーのトップID(=1)、トラックバックツリーのトップID(=2)と定義してたので、コメントID=(1)または、トラックバックID(=2)の場合、ID が合致してしまい、dtree.js が無限ループに入ってしまう現象でした。
わたしのサイトでは、とっくに ID=1、ID=2 が通り過ぎちゃってたので盲点(浅はか)でした。
良かった早めに見つかって (;￣∇￣A tacky さんご協力ありがとうございます。

- 2007.09.06 -
マニュアルを更新しました。配布元の dtree.js を修正しないと正しくアイコンが表示されない説明を追加しています。
詳しくはMovableTypeのカテゴリ一覧などをツリー表示する２を参照にしてください。

テンプレートのダウンロード

テンプレート MT.1 for Movable Type 4

テンプレートの設置

Movable Type 4 テンプレート設置のためのファイルを用意しました。
以下のマニュアルをお読みください。ファイル形式は PDF です。
Movable Type4テンプレート設置マニュアル

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(14)

#1: Posted by oscar [RES]: あっ、ハリポタ・・・
Posted on August 27, 2007

#2: Posted by bzbell [RES]

>>1 oscar さん

あっ、分かりました（*^_^*）!?

Posted on August 27, 2007

#3: Posted by oscar [RES]: reCAPTCHA プラグイン部分を別にしたのは、レイアウト上の問題ですか？
Posted on August 27, 2007

#4: Posted by bzbell [RES]

>>3 oscar さん

> reCAPTCHA プラグイン部分を別にしたのは、レイアウト上の問題ですか？

いえ、デフォルト CAPTCHA 使用時は不要なのでコメントにしてるだけです。
お好みでどうぞ･･･という意味です。
てか、そんな告知してないから気づかないかな。

oscar さんのようにご存知の人は問題ないと思いますが、reCAPTCHA を知らない人にとっては「何だコレ!?」みたいなことを未然に防いでるつもりです (;￣∇￣A

Posted on August 27, 2007

#5: Posted by tacky [RES]

初めまして。tackyと申します。
とても格好いいデザインだったので、ぜひ使わせていただきたくＤＬさせていただきました。
自分では手順どおりに導入したつもりですが、どうしても仕様どおりうまく表示されません。
お手数ですが何が悪いのかアドバイスいただけませんでしょうか？

不具合箇所
１．検索　２．最近のコメント／トラックバック　３．カレンダー

もう１点。
bzbellさんのように画面上部のボタンにHOME,PLUGINS...
という風にボタンを表示させるにはどこを修正すれば良いでしょうか？
また、他にも画面を色々カスタマイズしたい時には、
どこをどのように直せば良いのか、手順を教えていただければ嬉しいです。
どうかよろしくお願いします。

Posted on September 1, 2007

#6: Posted by bzbell [RES]

>>5 tacky さん

こんばんわ^^

> とても格好いいデザインだったので、ぜひ使わせていただきたくＤＬさせていただきました。

ありがとうございます (●´∀｀●)
ご質問の件ですが、

カレンダーの設置に関しては、わたしの説明が足らなかったですね (;￣∇￣A　すいません。記事を更新しましたので参考にしてください。
検索についてですが、gryffindor.css と同じ場所にイメージファイルがアップロードされてないようです。圧縮ファイル中の themes/ フォルダの中にあるすべてのファイルをアップロードしてください。

そうすれば、検索フォームのイメージが表示されます。
最近のコメント／トラックバックについてですが、記事内の「前準備」で説明してます、dTree の JavaScript がインストールされてないようです。
配布元のサイトから dtree.zip という圧縮ファイルをダウンロードして、記事内の説明のようにアップロードすれば表示されると思います (￣∇￣)b

> bzbellさんのように画面上部のボタンにHOME,PLUGINS...
> という風にボタンを表示させるにはどこを修正すれば良いでしょうか？

はい。画面上部に表示してるバーはナビゲーションバーといいまして、テンプレートモジュールのフッターに明記されてます。
具体的には以下の部分になります。

ナビゲーションバー
<div id="navibar">
    <ul>
    <li><a href="<$MTLink template="archive_index"$>">ARCHIVE</a></li>
    <li><a href="javascript:void(0);">－</a></li>
    <li><a href="javascript:void(0);">－</a></li>
    <li><a href="javascript:void(0);">－</a></li>
    </ul>
</div>
パンくずリスト
<div id="breadcrumbs"><!-- ▼メインインデックス▼ -->
    <a href="<$MTBlogURL$>">ホーム</a><span>&gt;</span>
<MTUnless name="main_index">
    <MTIf name="entry_archive"><!-- ▼エントリアーカイブ▼ -->
       <MTIfNonEmpty tag="EntryCategory"><MTEntryPrimaryCategory>
           <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel decode_html="1" remove_html="1"$></a>
       </MTEntryPrimaryCategory><span>&gt;</span></MTIfNonEmpty>
    </MTIf>
    <em><$MTGetVar name="page_title"$></em>
</MTUnless>
</div>

上記ナビゲーションバーの 'ARCHIVE' を参考にして、tacky さんのお好みでリンクを追加していけば画面上部に表示されるようになります。
また、ナビゲーションバーのスタイルは、gryffindor.css 内の 199 行目から定義しています。

> また、他にも画面を色々カスタマイズしたい時には、
> どこをどのように直せば良いのか、手順を教えていただければ嬉しいです。

この質問はムズかしいですねぇ (;￣∇￣A どのようにお答えしてよいものか･･･。
とりえあず、各スタイルシートの役割など説明しておきます。

スタイルシート(ベーステーマ)
HTML タグやベースとなるレイアウトの定義をしたスタイルシートです。基本的にはイジる必要はないかと思います。
スタイルシート(テーマ別)
テンプレート名称からも、テーマに依存したスタイルを定義しています。配色や、'gryffindor' テーマに依存したレイアウトなどが定義されてます。お好みでイジってもよいですが、わたしの場合はこのテンプレートはイジらずに スタイルシート(ユーザ) という、わたし専用のスタイルシートを作成して、その中で配色やわたし固有のスタイルを定義するようにしています。
具体的には スタイルシート(メイン) を以下のようにします。
```
/*
****************************************************************************
* File : screen.css
* Copyright (C) 2005-2007 http://bizcaz.com/ All rights reserved.
****************************************************************************
*/

@import url(<$MTLink template="base_theme"$>);
@import url(<$MTLink template="スタイルシート(テーマ別)"$>);
@import url(<$MTLink template="スタイルシート(ユーザ)"$>);
```

以上ですが、何か分からないことありましたらご連絡ください (￣∇￣)/

Posted on September 1, 2007

#7: Posted by bzbell [RES]

>>5 tacky さん

すいませぇ~ん。
カレンダー表示の件ですが、わたしのミスでエントリがブログの更新日付でカレンダー表示してしまう不具合がありました。

たとえば、エントリの投稿が 8 月までなのに、9 月分のカレンダーを表示しようとしてしまい、でも、エントリが投稿されてないから 9 月分の calenar.html が作成されないため、エラーしてしまう現象です。

おそらく、tacky さんとこでも同様の現象がでてるはずです。

お手数ですが、再度テンプレート一式をダウンロードして以下のテンプレートのみ更新後、ブログ全体を再構築してください。

フッター: default_templates/footer.mtml
サイドバー (2カラム): default_templates/sidebar_2col.mtml
サイドバー (3カラム): default_templates/sidebar_3col.mtml
コンテナ: 追加テンプレート/テンプレートモジュール/コンテナ.tmpl
スタイルシート(ベーステーマ): default_templates/base_theme.mtml
スタイルシート(テーマ別): themes/gryffindor/gryffindor.css

ご迷惑をおかけしてすいません (m;_ _)mペコ

Posted on September 1, 2007

#8: Posted by tacky [RES]

bzbell様
素人丸出しの漠然とした質問にも関わらずお返事をいただきありがとうございました。
残念ながら未だ解決していません。

まず、#6のresをいただいた段階でご指示通りやってみたところ、
１．カレンダーの表示については、まさに#7のレスのとおりの表示となりました。
９月のエントリーを作るまでは９月のカレンダーは出ないのかしらとすっごく悩んでました（笑）
２．検索については再確認したところ、ご指摘のとおりアップロードする階層を間違っていました(^_^;)。
正しい階層にアップしなおしたところフォームが表示されるようになりました。大変失礼しましたm(__)m
３．最近のコメント／トラックバックは相変わらず駄目です。
　dtreeとprototypeフォルダは　/home/tacky-sky/www/js/配下に置きそれぞれファイルを入れました。
フォルダ内にはそれぞれdtree.posts.jsとprototype.ajax.jsが入っていたので置いた場所は間違っていないと思うのですが。。。(^_^;)

そして#7の指示通りテンプレートの差し替えと再構築を行ったところ、ページを表示させるとブラウザ(IE7)がしばらく凍りついたあとに「Stack overflow at line 244」というメッセージが出ます。
表示はツールバー、サイドバーなどが表示されなくなりました(T_T)
差し替え方を間違えたんでしょうか？
重ね重ね申し訳ありませんが、再度思いつくところがあればアドバイスをいただけないでしょうかm(__)m
よろしくお願いいたします。

カスタマイズに関しては、スタイルシートの勉強をきちんとやって、この問題が解決したら次に取り組んでみたいと思います。

Posted on September 2, 2007

#9: Posted by bzbell [RES]

>>8 tacky さん

こんばんわ^^

今 tacky さんとこ遊びにいったら大変なことになってた Σ(￣Д￣；)!!
確認して頂きたいのですが、gryffindor.css のファイルが途中でちょん切れてる!? かんじなんです。
そのため、スタイルが適用されず、しかも変に処理時間がかかってるように見えます。

再度、gryffindor.css を確認後、再構築してみてください。
それ以外では、JavaScript 関連も設置されてますし、スタイルも問題なかったです (●´∀｀●)

Posted on September 2, 2007

#10: Posted by tacky [RES]

お世話になっております。
んーーーーーあと一声のようなんですが上手く行かないです(^_^;)
　
gryffindor.css　入れ直しました。TeraPadで開き、最終行が1200行でした。ctr+Aで全コピーし貼り付けました。
　
dtree.js　教えていただいたところからダウンロードして、入れ替えました。

ついでにprototype.jsも念のため再度ダウンロードしてきて入れ替えました。
　
ここで一旦再構築しましたが、「Stack overflow at line 244」の症状は変わりません(T_T)重たいです。
エラー処理が終わったあとは、最近のコメント／トラックバックは相変わらず駄目ですが、それ以外はほぼよさげですね。
　
テンプレート一式を再ダウンロードし、search_results.mtmlは差し替えました。
現在再構築中です。さてどうなることやら。
　
大変恐縮です。もし宜しければもう少しお付き合いくださいm(__)m

Posted on September 2, 2007