Movable Type 備忘録

Movable Type 4.1 用テンプレート（TUBES）

Apr132008
Author: bzbell
Categories: Template
Tags: 4.1, MovableType, Template

Prev Page: Movable Type 4.1 用テンプレート（BLADESILVER）

こんばんわ^^

訪問者さんからテンプレートの作り方を質問されました。
今までも何回か同じような質問されたのですが、作り方と言われても困ってしまうというのが正直なところです。

ただ、わたしの場合は『最初ざっくり、後チマチマ (●´∀｀●)』が基本です。

要するに最初は自分がイメージした、ざっくりな近似色を割り当てといて、後で背景と前景を調整して自分が思い描いた配色に近づけていきます。
色は組み合わせによってだいぶ違いがあります( 同じ色でも明るめの背景と暗めの背景とでは印象が違うなど )ので、微妙に変えながら調整していきます。

実際に配色して気に入らない場合は、思いっきり配色を変更したりもします。

レイアウトに関してだけは最初にきっちりと計算します。
全体の幅を決めたら、サイドの幅などきっちり収まるよう計算することで、画像（サイズね）を作りやすいようにしてます。

てか、やっぱり説明しづらい（つω-`｡）
言葉で言って分かるようなら苦労しないわけでして、経験（といってもたかだか 1、2 年ですけど）的なところもあると思うので。

テンプレートはいろんなサイトさんで配布されてますので、そのテンプレートをイジくりまくって、とにかくたくさんのテンプレートを自分で作ってみるのと、ネットを徘徊していろんなサイトを見て感じるのが一番だと思います (￣∇￣)b

すいません、投げやりなかんじになってしまって (;￣∇￣A

さて気を取り直して、わたしにしてはめずらしい 3 カラムのテンプレート作ってみました。

テンプレートの作り方の話がでたのでチョビッと説明すると、このテンプレートの横幅は 960px です。左サイドバー幅は 250px、右サイドバー幅は 170px で、センターが540px になります。
そして、左右サイドバーのマージンを 10px、センターの両端も 10px 考慮してますので、実際には、左( 240px )、右( 160px )、センター( 520px )が実サイズになります。センターに関してはさらに左右パディング( 10px )を取ってますので 500px になります。

この 10px のところにチューブ( tube )の画像がくるように作成するわけですね (￣∇￣)b

テンプレートについて

Movable Type MEMO のテンプレートセットでは、以下のいずれかのテーマを選択できるようにしてます。

お好みで選択してください。
また、MailForm プラグイン用のテンプレートも同梱してます。ここでは詳しくは説明しませんが、以下のページを参考にして頂けたらと思います。

このテンプレートのヘッダ部には画像を使用してます。
ご要望があれば画像の中にサイトタイトルを埋め込みますので、その旨ご連絡頂ければと思います。
また、お気に入りの画像などありましたらセピアに変換して作成しますよ。サイズは 960px × 250px を満たせれば何でも構いません。

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

テンプレートは以下の手順で設置できます。

テンプレートセットのインストール
以下の圧縮ファイルをダウンロードして適当なフォルダに展開します。
- MT-MEMO(tubes) 1.02
圧縮ファイル中の mt/plugins/ フォルダの中を見ると、いくつかのプラグインを同梱しています。
それらはテンプレートで使用しているプラグインたちです。

既に同一のプラグインをインストール済みの場合にはご注意ください。
現象としては、重複してプラグインを mt/plugins/ フォルダの中にアップロードすると、Movable Type の管理画面でスクリプトエラーのような類のメッセージ表示がされます。
アップロードしただけでは、何もされませんので落ち着いてアップロードしたプラグインを削除して、改めて重複するプラグインがないか確認してください。

また、PageBute プラグインに関してはこちらのPageBute プラグインをカスタマイズとPageBute プラグインをカスタマイズ２でご紹介したカスタマイズを施してます。
カスタマイズ２の方が問題で、MT のデフォルトタグ名称とブッキングしているので PageBute プラグインのタグ名称を変更したものが同梱されてます。ですので、他のテンプレートで既に PageBute プラグインを使用している場合、どちらかに合わせる必要があります。

ウェブページ内でページの前・次リンクを使用しないのであれば、タグ名称がブッキングしてても特に影響はないかと思われます。
オリジナルの PageBute を使用する場合には、同梱してます PageBute プラグインの変更、およびそれに伴ったテンプレートの修正を以下の手順で行ってください。
1. 同梱してる PageBute プラグイン変更
  こちらのPageBute プラグインをカスタマイズ２でご紹介したカスタマイズ（タグ名称）を元に戻します。
2. テンプレートの修正
  PageBute プラグイン変更に伴って以下のテンプレートを変更します。
  - mt/plugins/mt_memo/templates/modules/container.mtml
  - mt/plugins/mt_memo/templates/modules/floral/container.mtml
  上記ファイル内を PageBute というキーワードで検索すると、それぞれ 12 件ずつ修正箇所が見つかります。
  PageBute を Page に変更することでオリジナルのタグ名称となります。
一通り問題なければ、圧縮ファイル中の mt/ フォルダの中を丸ごと（重複プラグインは除く）各自の Movable Type のインストール先にアップロードしてください。
テンプレートセットの適用
テンプレートセットのインストールが済んだら以下のページを参考にして、テンプレートセットを適用します。
- テンプレートセットの選択と入れ替え
その際、テンプレートセットの選択には『Movable Type MEMO / tubes 1.02』を選択します。
手順に沿ってテンプレートを適用したら、ブログ全体を再構築します。

イメージファイル／JavaScript のアップロード
最後にイメージファイル、JavaScript をアップロードします。
圧縮ファイル中の mt_memo/ フォルダを丸ごとトップページ( index.php )と同じ場所にアップロードします。たとえば、わたしのサイトで例えると、以下のようなディレクトリ構成になります。

http://bizcaz.com/
  |
  +-- mt_memo/
  |    +-- css/
  |    |    +-- tubes/
  |    |    |    +-- ajax-loader.gif
  |    |    |        ：
  |    |    |        ：
  |    |    |
  |    |    +-- base.php
  |    |    +-- styles.php
  |    |
  |    +-- js/
  |         +-- dtree/
  |         |    +-- dtree.js
  |         |        ：
  |         |        ：
  |         |
  |         +-- prototype/
  |         |    +-- prototype.js
  |         |        ：
  |         |        ：
  |         |
  |         +-- mt.js
  |
  +-- index.php

表示確認
正しくテンプレートが適用されたか、ブラウザから表示確認します。主なポイントを以下に記します。
- イメージファイルなどのリンク切れがないこと。
- ブログ内検索が正しく行えること。
- タグ検索が正しく行えること。
上記何れかに問題があった場合、イメージファイル／JavaScript のアップロード先が間違ってることが考えられます。
上記ディレクトリ構成を参考にして再度確認してください。

以上で設置は完了です。
お疲れ様でしたぁ (●＞∀＜●)／

各テンプレートの出力ファイル名

テンプレートセットを適用して再構築すると、各テンプレートは以下のようなファイル名として作成されます。

インデックステンプレート

インデックス(メイン):index.php
わたしのサイトを例にすると http://bizcaz.com/index.php となります。
インデックス(アーカイブ): archives/index.php
わたしのサイトを例にすると http://bizcaz.com/archives/index.php となります。
インデックス(タグクラウド): archives/tagcloud/index.php
わたしのサイトを例にすると http://bizcaz.com/archives/tagcloud/index.php となります。

アーカイブテンプレート

アーカイブページ（月別）: %y/%m/%i
わたしのサイトを例にすると http://bizcaz.com/archives/2008/03/index.php となります。
アーカイブページ（年別）: %y/%i
わたしのサイトを例にすると http://bizcaz.com/archives/2008/index.php となります。
ウェブページ: %-c/%-f（MT4.1 デフォルトフォーマット）
ウェブページの場合はあらかじめフォルダを作成して、その指定フォルダに任意のページ名称で作成されるます。

たとえば、わたしのサイトを例にするとMovable Type 4 で使用できるプラグインはウェブページで作成してします。
MT の管理画面から『一覧』＞『フォルダ』を選択して、あらかじめウェブページ用のフォルダを作成しておくと、ウェブページ作成時にそのフォルダを指定してあげることでお好きな場所（ディレクトリ）にウェブページを作成されます。以下の図はわたしのサイトで作成したフォルダ一覧になります。
カテゴリページ: %-c/%i
カテゴリページに関しては MT のデフォルトフォーマットをそのままテンプレートセットプラグイン内にも記述してます。
わたしのサイトを例にすると http://bizcaz.com/archives/movabletype/template/ となります。
ブログページ: %y/%m/%d-%h%n%s%x
年/月/日-時分秒というファイル名称＋『ブログの設定』＞『公開』で設定された『アーカイブの拡張子』でファイルが作成されます。
このエントリを例にすると http://bizcaz.com/archives/2008/03/23-165033.php となります。

上記はあくまでもわたしのサイトで使ってるものをそのままテンプレートセットにしているものです。
再構築で出力されるファイル名は、必要であれば各自で任意に変更してください。

また、これは『Pandora Template Set』適用前から既にブログを公開していた人にとっては重要なことです。
出力ファイル名が以前と異なっていた場合、そのページの URL が変更されてしまいますのでご注意ください。

不具合のご連絡

- 2008.04.27 - ver1.02: コメント用フィードを追加しました。
- 2008.04.21 - ver1.01: IE6.x において月別（年別）アーカイブのレイアウトが崩れる不具合を対応しました。
また、上記対応に伴ってアンカーにマウスポインタを乗せてホバー状態にすると内側から 3 番目のボックスの高さが増加したり減少したりする IE の不具合にも対応しました。結果、不本意ですがリンクのホバー時の背景色( #000b00 )をやめました。
- 2008.04.21 - ver1.00: 月別（年別）アーカイブにおいてレイアウトが崩れる不具合が発覚しました。
一時配布を中止します (;￣∇￣A
- 2008.04.13 - ver1.00: 配布開始しました。

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(31)

#1: Posted by ゆにっく [RES]: 自分のブログのデザインをするのって本当に大変ですね。特にbzbellさんと違ってイチMTユーザーでしかない人たちにとっては。こっちなんてやっとMT4.1のCSSのいじり方が分かって喜んでいるレベルやしww まあローカルに置いてしばらくいじって遊んでます
Posted on April 13, 2008

#2: Posted by bzbell [RES]

>>1 ゆにっくさん

こんばんわ^^

> こっちなんてやっとMT4.1のCSSのいじり方が分かって喜んでいるレベルやしww

わたしも MT 使い始めの頃はそうでした
その頃は人様のテンプレートをお借りしてた楽しんでたのですが、わたし好みのテンプレート欲しくって、それがきっかけでかなりマジめに勉強しました

最初っから何でもできる人なんていないので、少しずつ覚えていけばいいと思います

ところで、ゆにっくさんサイト閉めたんですか
先日から見れないんですけど

Posted on April 13, 2008

#3: Posted by ゆにっく [RES]: ブログは閉鎖しました。お世話になりましたm(_ _)m 今はブログを閉鎖したついでにちょっとローカルでMTを置いて、いじって遊んでるんですよ^^ デザインをどうしようかとか。まじめに勉強かー、Macなら真面目に勉強してるんやけどなーw MTまでどうも頭が回らないみたいですww まあMTも好きなんでいじりながら少しずつモノにできたらいいなーと思います。
Posted on April 13, 2008

#4: Posted by bzbell [RES]

>>3 ゆにっくさん

> ブログは閉鎖しました。お世話になりましたm(_ _)m

えっーーー!!
やっぱりそうなんですかぁ

ドメインがどぅのこぅのと言われたので、もしかして･･･とは思ってたんですけど。VOX もやめちゃいましたよねぇ。
mixi だけに絞ったんですね

Posted on April 13, 2008

#5: Posted by nao [RES]

はじめまして！

素敵なテンプレートですね。(^-^)

一点だけ気になることがありましたので書き込みさせて頂きます。
気になることと申しますのは、サイドバーのカレンダーをクリックしたとき
デザインが崩れる点です。（当方の環境は、IE6 。）

先ずはお知らせまで。

Posted on April 20, 2008

#6: Posted by bzbell [RES]

>>5 nao さん

こんばんわ^^

ご連絡ありがとうございます。

> サイドバーのカレンダーをクリックしたときデザインが崩れる点です。（当方の環境は、IE6 。）

サイドバーのカレンダーですか
そちらはレイアウト崩れはなさそうですけど、月別アーカイブが思いっきりレイアウト崩れてるショック
いつからだろ･･･。

可能であれば、nao さんとこのサイトを確認させていただけますか。

Posted on April 20, 2008

#7: Posted by nao [RES]

早速の対応、ありがとうございます。

tubes の月別アーカイブは修正されたようですが、
cine の方は相変わらず崩れたままです。

また、お時間のあるときにでもよろしくお願いいたします。

Posted on April 20, 2008

#8: Posted by bzbell [RES]

>>7 nao さん

> cine の方は相変わらず崩れたままです。

あちゃ
tube だけじゃなかったんですね
ちょっとお待ちください

Posted on April 20, 2008

#9: Posted by hiro [RES]: はじめまして。
すごく、いい感じのデザインなので、使いたいと、思ってるんですけど、再構築で、
Can't call method "build_dynamic" on an undefined value at lib/MT/Blog.pm line 436.
ってエラーがでちゃいます。
原因がわからくなくて、なんとかなりますか？
Posted on May 5, 2008

#10: Posted by bzbell [RES]

>>9 hiro さん

こんばんわ^^

> Can't call method "build_dynamic" on an undefined value at lib/MT/Blog.pm line 436.

どのテンプレートを再構築すると上記エラーがでますか!?
たぶん、プラグイン絡みのエラーだと思いますけど、

同梱してますプラグインはアップロード済みですか!?
プラグインが重複してるってことはないですか!?
お使いの MT は MT4.1 ですか!?

などが考えられます

Posted on May 5, 2008

#11: Posted by hiro [RES]

早速のお返事ありがとうございます。
使用したのは、MT-MEMO(tubes) 1.02 のtubesとＣＩＮＥで試してみました。
ＭＴはＭＴ4.1です。
ＭＴもいったん、削除して再インストールしたので、プラグインの重複はないと思います。
ちなみに、自宅サーバーで、データーベースはPostgresＳＱＬです。
ＰｏｓｔｇｒｅｓＳＱＬがいけないのかな・・・

Posted on May 5, 2008

#12: Posted by bzbell [RES]

>>11 hiro さん

> ＰｏｓｔｇｒｅｓＳＱＬがいけないのかな・・・

デフォルトのテンプレで再構築すると正常に終わるわけですよね
それなら大丈夫だと思います。

テンプレートセットを適用した時点ではプラグインによるエラーって表示されないのですが、各テンプレートを開くと未知のタグが使用されてない場合、エラーが表示されます。

お手数ですが、そこら辺を確認してみて頂けますか。
具体的には、

インデックス（メイン）/ インデックステンプレート
ブログページ / アーカイブテンプレート
ウェブページ / アーカイブテンプレート
コンテナ / テンプレートモジュール
コメント詳細 / テンプレートモジュール

上記テンプレートを開く／閉じるを確認して頂ければいいと思います。
プラグインによる影響だとすれば、開いた時点でエラーが表示されますので。

わたしの方も新規ブログを立ち上げて確認してみます。

Posted on May 5, 2008

#13: Posted by hiro [RES]

お手数をおかけして申し訳ないです。

いえ、エラーがでた後はデフォルトのテンプレートに設定して再構築しても同じエラーがでちゃうんですよ。
仕方なく、データーベースを削除して、新規に作成しないとだめです。
だから、テンプレートの確認のしようがないです。

よろしく、お願いします。

Posted on May 5, 2008

#14: Posted by bzbell [RES]

>>13 hiro さん

> エラーがでた後はデフォルトのテンプレートに設定して再構築しても同じエラーがでちゃうんですよ。

そぉいうことでしたら話は別で、環境（データベース）による影響も考えられますね
わたし Postgres は使ったことないので何ともいえないのですが、まずは問題点を切り分ける必要がありそうです

データベース初期化後、MT をセットアップしてからデフォルトの状態で再構築可能かどうかをご確認いただけますか。

ネットで調べたところ、同様の現象らしき人の記事を読む限り、原因は分からなかったそうですがデータベースを初期化したとのことです。
それ以上のことが書かれてないので、再発!? する可能性もありですね。

たとえば、MySQL で試してみるってのも手ではありますが手間がかかりますね

Posted on May 5, 2008

#15: Posted by nao [RES]

おはようございます。

テンプレートのcomment_preview.mtml ですが、文字コードが
SJISになっていまして日本語の部分が化けています。
また、ご確認くださいませ。

Posted on May 6, 2008

#16: Posted by bzbell [RES]

>>15 nao さん

こんにちわ^^

> SJISになっていまして日本語の部分が化けています。

ホントだぁ。comment_preview.mtml だけ SJIS になってましたね
UTF-8 に変換したものを UP しましたので、再度 DL して頂けますか。

ご連絡ありがとうございます

Posted on May 6, 2008

#17: Posted by hiro [RES]

こんにちは。

あれから、ズット、ＭｙＳＱＬをインストールしていました。エラーに悩まされながらも、無事、接続に成功！
テンプレートもしっかり読み込まれ、再構築も無事、成功！と思いきやＰＨＰなんですね。
ＰＨＰは悪戦苦闘中で、なかなかウマくいきません。
そこで、ｈhtmlでページを出力できないでしょうか。

Posted on May 6, 2008

#18: Posted by bzbell [RES]

>>17 hiro さん

こんにちわ^^

> あれから、ズット、ＭｙＳＱＬをインストールしていました。エラーに悩まされながらも、無事、接続に成功！

ご参考までにお聞きしたいのですが、結局のところ Postgres がいけなかったということでしょうか。
Postgres は周りでも使ってる人がいないもので情報がなくって。
気が向いたら TRY してみようかな･･･とは思ってます

PHP の件ですが、HTML も可能です。

MT の管理画面から、「ブログの設定」＞「公開」を選択して、「アーカイブの拡張子」を html に変更します。
インデックステンプレート画面を開いて、インデックス(メイン)、インデックス(アーカイブ)、インデックス(タグクラウド)のテンプレートの出力ファイル名を index.php から index.html に変更します。

以上で修正は完了です。
ブログ全体を再構築して表示確認してください。

Posted on May 6, 2008

#19: Posted by hiro [RES]

こんばんは。

結果的には、Ｐｏｓｔgres　が原因ということでしょうね。
Postgresのときは、再構築はおろか、ブログのテンプレートで、インデックスが表示されなかったですから。

しかし、困ったことに、今現在、文字しか表示されません。アップロード先は間違いないと思うし、あと、スタイルシートもＰＨＰだから、.cssに変更しました。そのからみで、どこか、変更しないといけないでしょうか。

Posted on May 6, 2008

#20: Posted by bzbell [RES]

>>19 hiro さん

> 結果的には、Ｐｏｓｔgres　が原因ということでしょうね。

そうですか。
Postgres のいいところ、悪いところを良く知らないのですが、あまり使われてない!? から情報も少ないんでしょうかね

PHP の件ですが、スタイルシートが正しく読込まれてないんですね。
ブラウザでスタイルシートの URL を指定した場合正しく表示されますよね。
そうしますと、スタイルシートを圧縮転送してますので各スタイルシートの 1 行目を削除してみてください。

<MTInclude widget="@GZ Handler">

Posted on May 6, 2008

#21: Posted by hiro [RES]: すごい！
無事、表示されました。感激！
ありがとうございます。
でも、このままでいいんですか。？
Posted on May 6, 2008

#22: Posted by bzbell [RES]

>>21 hiro さん

よかったぁ
あと、もう一点 PHP 化しない場合の修正が必要です。
「ヘッダー」テンプレートモジュール内の 4 行目を以下のように修正してください。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

PHP 化したページと HTML とでは異なりますので、上記のように XML 宣言の修正が必要になります。

> でも、このままでいいんですか。？

ん!? このままといいますと!?

Posted on May 6, 2008

#23: Posted by bzbell [RES]

>>21 hiro さん

あっサイトタイトルのことですか!?
スタイルシート(テーマ)内の 64 行目に以下のような行があると思います。

<mt:setvar name="is_image_title" value="1">

上記の '1' を '0' にするとテキストタイトル表示になります。
てか、デフォルトはそのようにしてたはずなのに

Posted on May 6, 2008

#24: Posted by hiro [RES]

ありがとうございます。
サイトタイトルの件、デフォルトは　1　でした。（＾＾）

指示通りにしたら、
ヘッダーの表示がちょっとおかしくなりました。
見てもらうとわかるんですが、白くなってます。

もうひとつ、これは最初からだったんですが、
ＭＯＮＴＨＬＹ　ＡＲＣＨＩＶＥの　カレンダー表示がおかしいかなというのと、その下の方に、示が表示されてます。

お手数をおかけしますがよろしくお願いします。

Posted on May 6, 2008

#25: Posted by bzbell [RES]

>>24 hiro さん

> ヘッダーの表示がちょっとおかしくなりました。

hiro さん、変更した記述が違ってますよ
今のままだと XML 宣言の定義じゃなくって、単なる定形表示になっちゃってます。
メールの内容をコピペしてるでしょ
メールの内容ではなくって、>>23 で示した内容で変更してみてください。
[追記] ごめんなさい。>>22 でした。

そうすれば、カレンダーの問題も改善されると思われまするぅ

Posted on May 6, 2008

#26: Posted by hiro [RES]

お恥ずかしい・・・
その通りで、申し訳ないです。お見通しですね（＾＾）

でも、おかげさまで、バッチシです。
いろいろ、お手数をおかけしましたが、
本当に、ありがとうございます。

ブログに関しては、全くの初心者なので、
また初心者だからこそ、いろいろやってみたくなるので、
また、これからも、つまらない質問をすると思いますが
どうぞ、よろしく、おねがいいたします。

Posted on May 6, 2008

#27: Posted by bzbell [RES]

>>26 hiro さん

> その通りで、申し訳ないです。お見通しですね（＾＾）
ふふ
どぉいたしまして。

> どうぞ、よろしく、おねがいいたします。

はい。わたしで分かることでしたら何でも教えますので、遠慮なくどうそ
こちらこそよろしくですの

Posted on May 6, 2008

#28: Posted by hiro [RES]

こんばんは。
ページが切り替わる時に、チカチカするなと思ってたら、ページ下に
カテゴリーの2番目の階層のところで、引数エラーがでていました。
そこで、これはまずいかなと思い、管理ページでそのカテゴリを削除したら
再構築をクリックしても反応しなくなってしまいました。
他の動作はするのですけれど。テンプレートを差し替えても再構築はだめでした。
おかげで、データーベースを削除して、新規に作ったのですが。
すると、今度は階層を掘り下げて作っても、大丈夫みたいです。以前のものは
ページが切り替わるごとに、一瞬白くなってたんですが、今度はそんなこともないです。いったい何が原因だったんでしょうかね。また、なんかボケをかましていたのかな。もし、お分かりになるようでしたら、お教えください。

あと、今やってみたいのが、Ｇｏｏｇｌｅ　Ａｄｓｅｓｅの挿入なんですが、ただ、スクリプをいれるだけでは駄目ですよね。右のバナーの下にいれたいと思うんですけど、どのページを編集すればいいんでしょうか。
宜しくお願いします。

Posted on May 7, 2008