Movable Type 備忘録
テンプレートセットの設置
テンプレートセットの設置について説明します。
テンプレートセットのアップロード
まずテンプレートセットをサーバにアップロードします。
「DOWNLOAD」タブから Movable Type のバージョンに合った圧縮ファイルをダウンロードしてください。そして template_set/mt/plugins/ を丸ごと mt/ ディレクトリの中にアップロードします。
テンプレートセットの適用
テンプレートセットを適用します。
MT の管理画面から「テンプレート」を選択してテンプレート一覧を表示します。 右側の「アクション」の中から「ブログのテンプレートを初期化」を選択することで、アップロードしたテンプレートセットを選択することができます。新規にテンプレートセットを適用する場合には「新しいテンプレートセットを適用」を選択して、「Movable Type MEMO / テンプレートセット名称」の何れかを選択してください。
選択したら、「次へ」ボタンで先に進んでください。その際、「既存のテンプレートのバックアップを作成する」にチェックしておくことをオススメします。
ブログ全体を再構築
テンプレートセットの適用が済んだらテンプレート一覧画面を表示して左図にあるように「手動」と表示されるテンプレートの再構築を行います。
この「手動」と表示されているテンプレートの左側にあるチェックボックスにチェックを入れて、上の方にある「公開」ボタンをクリックすれば再構築されます。
ちなみに、この「手動」というテンプレートは、テンプレートセット設置時一回だけ再構築すればいいもので、毎回再構築する必要のないものです。次にブログ全体を再構築します。
スクリプト、イメージファイルのアップロード
最後に Movable Type MEMO で使用する各種スクリプト、イメージファイルなどをサーバにアップロードします。
アップロード先は、ブログのトップページ( index.html )と同じ場所に template_set/mt_memo/ をそのままアップロードします。 その際、各ディレクトリのパーミッションを 755 にすることを忘れずに (￣∇￣)b
クロスドメイン環境で利用する場合
クロスドメイン環境で利用する場合には、さらに以下の手順が必要です。
mt_memo/js/prototype/crossdomain.cgi 内の 5 行目を各自の MT のインストール先 URL で変更して保存します。
crossdomain.cgi
my $mturl = 'http://●●●/mt/';
mt_memo/js/prototype/ ディレクトリ配下にアップロードします。
そして crossdomain.cgi のパーミッションを 755 のように実行権限を付けます。Ajax の確認を行います。
Ajax はブログ内検索、タグ検索、コメントプレビュー／ポストで使用しています。それぞれ正しく動作しているか確認してください。正しく動作しなかった場合、ディレクトリのパーミッション、crossdomain.cgi のパーミッションを再度確認して頂けたらと思います。
以上でテンプレートセットの設置は完了です。
こちらのテンプレートセットの選択と入れ替えと合わせて参考にしてください。
ダウンロード
お使いの Movable Type のバージョンに合ったテンプレートセットをダウンロードしてください。
バージョンに合ったものを使用しないと、思わぬトラブルの原因になります。
- Movable Type 4.2(TUBES) 用テンプレートセット
※このテンプレートセットは 3 カラム固定幅( 1024px )です。また、こちらの圧縮ファイルをダウンロードすることで自由にサイトタイトル、背景画像を作成することができます。 - Movable Type 4.2 用テンプレートセット
※こちらのテンプレートセットは任意のレイアウトが指定可能です。 - Movable Type 4.1 用テンプレートセット
カスタマイズ
主なカスタマイズについて以下に記します。
サイドバーの構成
サイドバーは以下のようにマークアップされています。
必ずコンテンツは、上記のように <dd class="widget_content clearfix"> ～ </dd> で囲うようにしてください。サイドバーのマークアップ
<div id="sidebar"><dl id="sidebeta"><dt class="widget_header gradient"><span> </span>コンテンツ1</dt><dd class="widget_content clearfix">コンテンツ1 のコンテンツを追加します。</dd><dt class="widget_header gradient"><span> </span>コンテンツ2</dt><dd class="widget_content clearfix">コンテンツ2 のコンテンツを追加します。</dd></dl><dl id="sidegamma"><dt class="widget_header gradient"><span> </span>コンテンツ3</dt><dd class="widget_content clearfix">コンテンツ3 のコンテンツを追加します。</dd><dt class="widget_header gradient"><span> </span>コンテンツ4</dt><dd class="widget_content clearfix">コンテンツ4 のコンテンツを追加します。</dd></dl></div>
サイドバー幅の変更
サイドバー幅の変更の仕方について説明します。
デフォルトではサイドバーの幅は 260px となっています。 サイドバー幅は「スタイルシート(テーマ)」内の以下の行を変更します。スタイルシート(テーマ)
<mt:setvar name="side_width" value="260">
拡げる分には問題ないのですが、デフォルトサイズより狭める際には注意が必要です。
一応計算して各コンテンツをレイアウトしていますので、その計算値によってはレイアウト崩れの原因になります。 ですので、サイドバー幅を変更する際には自己責任でお願いします。サイドバーの縦分割について
Movable Type MEMO のテンプレートセットでは、サイドバーを 2 分割にして利用できるようにしています。
たとえば、サイドバー幅( 260px )を 125px で均等分割して、それぞれにバナーを貼り付けたい場合には以下のように使ってください。<dd class="widget_content clearfix"><div class="tt_left">左辺( 125px )コンテンツ</div><div class="tt_right">右辺( 125px )コンテンツ</div></dd>
上記の青字と赤字のように div 要素で囲ってあげることで 125px 幅で分割して使用することができます。
同じ要領で、左辺 90px、右辺 160px には以下のようになります。<dd class="widget_content clearfix"><div class="tw_left">左辺( 90px )コンテンツ</div><div class="tw_right">右辺( 160px )コンテンツ</div></dd>
また、その逆( 左辺 160px、右辺 90px )の場合には以下のようになります。
<dd class="widget_content clearfix"><div class="wt_left">左辺( 160px )コンテンツ</div><div class="wt_right">右辺( 90px )コンテンツ</div></dd>
以上です。
固定幅／可変幅レイアウトの切り替えについて
以下のテンプレート内の body タグのクラス名称に以下の何れかのレイアウトを選択することでレイアウトを変更できます。
- インデックス(メイン)／インデックス(タグクラウド)／インデックス(アーカイブ)
- ウェブページ／カテゴリ別ブログ記事リスト／ブログ記事／月別ブログ記事リスト
- 1 カラム固定幅( layout-1col-fixed )
- 2 カラム固定幅( layout-2coll-fixed )
- 2 カラム可変幅( layout-2coll-liquid )
- 3 カラム固定幅( layout-3col-fixed )
- 3 カラム可変幅( layout-3col-liquid )
<mt:setvar name="body_width_fixed" value="1024">
選択できるレイアウトは以下の通りです。デフォルトは 2 カラム可変幅( layout-2coll-liquid )です。
変更したら必ず再構築してください。そうしないと指定レイアウトによる表示がされませんので。
また、固定幅を指定された場合、デフォルトは 1024px となっています。任意の幅に変更したい場合には「スタイルシート(テーマ)」内の 17 行目を以下のように変更してください。スタイルシート(テーマ)
上記青字の部分をお好みのサイズに変更して頂ければと思います。
修正履歴
Movable Type 4.2 用テンプレートセット
- [2008.07.20] 新規作成
- [2008.07.20] クロスドメインで利用する場合のスクリプト( crossdomain.cgi )が含まれてませんでした。すいません。
- [2008.07.21] 以下のファイルの修正を行いました。
- 「スタイルシート(ベース)」: Opera 9.51 にて html タグの height: 100% としたとこで支障がでたため削除。
- 「バナーフッター」: フッター部に clear 属性を追加。
- [2008.07.21] ご要望があったので Liquid / Fixed Layout を選択できるよう以下のファイルを変更しました。
- 「スタイルシート(テーマ)」
- 「インデックス(メイン)」、「インデックス(アーカイブ)」、「インデックス(タグクラウド)」
- 「ウェブページ」、「カテゴリ別ブログ記事リスト」、「ブログ記事」、「月別ブログ記事リスト」
- [2008.07.21] ご要望があったので 3 カラム固定幅を選択できるようにしました。具体的には以下のレイアウトから選択可能です。
- 2 カラム固定幅( layout-2coll-fixed )
- 2 カラム可変幅( layout-2coll-liquid )
- 3 カラム固定幅( layout-3col-fixed )
- [2008.07.21] ご指摘があり、外部サービス( AddClips )に渡す記事タイトルをエンコード変換しました。
ちなみに記事タイトル中に「'」が使用されていた場合 JavaScript の「'」と誤認されてしまい不都合が生じます。
具体的には以下のファイルを修正しました。
- 「ウェブページの詳細」、「ブログ記事の概要」、「ブログ記事の詳細」
- [2008.07.21] BLADESILVER テンプレートのナビバーとパンくずリストのデザインをチョビッと変更してみました。
変更に伴って以下のファイルを追加／変更しました。
- 「スタイルシート(テーマ)」を変更
- mt_memo/css/bladesilver/navibar.png、mt_memo/css/bladesilver/breadcrumbs.png を追加
- [2008.07.22] 3 カラム可変幅( layout-3col-liquid )のレイアウトを選択できるよう対応しました。
- [2008.07.27] 1 カラム固定幅( layout-1col-fixed )のレイアウトを選択できるよう対応しました。
- [2008.07.27] 月別アーカイブページ、年別アーカイブページにおいて、前・次リンクが表示されてませんでした。具体的には以下のファイルを変更しました。
- 「月別ブログ記事リスト」、「月別ページの詳細」
- [2008.08.03] 日別アーカイブのマッピングを追加しました。
これによりカレンダーのリンク先を日別アーカイブに変更しました。 - [2008.08.09] 以下の修正を行いました。
- キャッシュの有効／無効を制御する変数名称が cache( キャッシュ )じゃなくって chache( チャッシュ!? )になってたので修正しました。
- 1 カラムレイアウトにおいて、IE6.x だと全体がセンタリングされてませんでした。
- カテゴリツリーウィジェットの <dd> タグが閉じられてませんでした。
- パンくずリストが正しく表示されてなかったので修正しました( いつからだろ･･･ )。
- メインインデックス、カテゴリアーカイブ、日付アーカイブにおいて、キーに該当する「ブログ記事の概要」テンプレートモジュールのキャッシュが正しく使われてませんでした。
- キャッシュの保存期間を任意に設定できるよう各インデックステンプレート、アーカイブテンプレートに追加しました。Movable Type のキャッシュ保存時間はデフォルトでは 60 分になります。
- [2008.08.10] JavaScript ライブラリに、Google のThe AJAX Libraries API を使うよう変更しました。
- [2008.08.13] リキッド時の最大幅を制限( 1280px )しました。これによりスタイルシート変更、iefixed.htc というファイルが追加されます。
