Top > Movable Type > テンプレートセット [全て開く]
2010年5月12日

Movable Type(MT)5 テーマ修正(プレビュー時のエラー対処)

May 12,2010 12:55 AM
Tag:[, , ]
Permalink

配布中の Movable Type 5.0 テーマを修正しました。

1.修正箇所

ブログテーマの「ウェブページ」テンプレートのプレビューで、次のようなエラーが発生する不具合を修正しました。ウェブサイト用のテーマではこの不具合は発生しません。

修正前

2.原因

theme.yamlのウェブページの定義誤りです。手動で修正する場合は、koikikukan_blog/theme.yamlに青色の1行を追加してください。

…前略…
elements:
    …中略…
    template_set:
        component: core
        importer: template_set
        name: template set
        data:
            …中略…
            templates:
                …中略…
                individual:
                    entry:
                        label: Entry
                        mappings:
                            entry_archive:
                                archive_type: Individual
                page:
                    page:
                        label: Page
                        mappings:
                            page_archive:
                                archive_type: Page
                                …後略…

Movable Type 5(MT5)テーマは、下記のページからダウンロードしてください。

Movable Type(MT)テンプレート
Comments [0] | Trackbacks [0]
2010年3月30日

Movable Type(MT)5 テーマ修正(2カラムリキッドレイアウト修正)

March 30,2010 1:33 AM
Tag:[, , ]
Permalink

配布中の Movable Type 5.0 テーマを修正しました。

1.修正箇所

2カラムリキッドレイアウト(左サイドバー)のスタイルが未設定だった不具合を修正しました。

修正前
修正前

修正後
修正後

2.スタイルシートのみを修正する場合

以下の内容をスタイルシートに追加してください。

.layout-two-column-liquid-left #content,
.layout-two-column-liquid-left #links-left-box {
    position: relative;
    display: inline;
    float: left;
}
.layout-two-column-liquid-left .blog,
.layout-two-column-liquid-left #links-left {
    position: static;
}
.layout-two-column-liquid-left #content,
.layout-two-column-liquid-left #links-left,
.layout-two-column-liquid-left .entry {
    overflow-x: hidden;
}
.layout-two-column-liquid-left #content {
    width: 100%;
    margin-left: -200px;
}
.layout-two-column-liquid-left .blog {
    margin-left: 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-left .blog {
    padding: 10px 15px;
}
*:first-child+html .layout-two-column-liquid-left .blog {
    padding-top: 18px;
}
.layout-two-column-liquid-left #links-left-box {
    top: 15px;
    right: 0px;
    width: 200px;
}
.layout-two-column-liquid-left #links-left {
    padding: 0 15px;
    height: 95%; /* for IE6 */
}
.layout-two-column-liquid-left #footer {
    margin-top: 25px;
    border-top: 1px solid #669;
    height: 60px;
    color: #fff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 5.0;
}
*:first-child+html .layout-two-column-liquid-left #footer {
    width: 100%;
}

または、一番下のリンクから最新版をダウンロードし、

themes/koikikukan_website/templates/styles-site.mtml
themes/koikikukan_blog/templates/styles-site.mtml

のみを上書きアップロードして、スタイルシートインデックステンプレートを初期化してください。なお、初期化を行うとスタイルシートの変更がすべて元に戻るので注意してください。

Movable Type 5(MT5)テーマは、下記のページからダウンロードしてください。

Movable Type テンプレート
Comments [0] | Trackbacks [0]
2009年12月23日

Movable Type(MT)5 テーマ修正(コメントのページ分割対応)

December 23,2009 3:06 AM
Tag:[, , , ]
Permalink

配布中の Movable Type 5.0 テーマを修正しました。

1.改善箇所

Movable Type 5 で提供されているコメントのページ分割機能に対応しました。コメント部分が指定した件数以上になると、次のようにコメントをページ分割します。デフォルトの分割ページ数は 50 件です。

コメントのページ分割

ページ分割の概要は下記を参照願います。

Movable Type 5 のコメントのページ分割機能(その1:概要)

2.コメントの分割件数の変更方法

「ヘッダー」テンプレートモジュールの下記の value モディファイアの値を変更してください。

<mt:var name="comments_per_page" value="50">

Movable Type 5(MT5)テーマは、下記のページからダウンロードしてください。

Movable Type テンプレート
Comments [0] | Trackbacks [0]
2009年12月14日

Movable Type(MT)5 テーマ修正(エクスポート時の不具合修正)

配布中の Movable Type 5.0 テーマを修正しました。

1.問題点

テーマのエクスポートを実行すると次のような「~のファイナライズ中にエラーが発生しました~」というエラーが発生する。

エクスポート時のエラー画面

2.原因

テーマのディレクトリ構成で、ウィジェットテンプレートのみ別ディレクトリに配置していたため。

他のテンプレートと同じディレクトリに配置するよう、ディレクトリ構成を見直し、エクスポートできることを確認しました。

Movable Type 5(MT5)テーマは、下記のページからダウンロードしてください。

Movable Type テンプレート
Comments [0] | Trackbacks [0]
2009年11月 9日

Movable Type(MT)5 テーマ修正(スタイルライブラリ対応)

配布中の Movable Type 5.0 テーマを、スタイルライブラリ対応にしました。

これまでは、スタイル機能に対応するために、mt-static/plugins 配下にスタイル用のデータをアップロードする必要がありましたが、themes ディレクトリへのアップロードだけでスタイル機能にも対応します。

小粋空間テーマ

1.ダウンロード

Movable Type 5(MT5)テーマは下記のページからダウンロードしてください。

Movable Type テンプレート

2.カラムレイアウト変更方法

テーマのカラムレイアウトを変更する場合、まず、管理画面の「デザイン」→「テーマ」で配布テーマに切り替えた後、管理画面の「デザイン」→「スタイル」で「Koikikukan Styles」が表示されるので、それをクリック。

「Koikikukan Styles」選択

表示されたサムネイル画像をクリック。

サムネイル画像

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックス

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトを選択

レイアウトの対応は次の通りです(2011年2月現在)。

名称意味
layout-three-column3カラム・固定レイアウト
layout-three-column-liquid3カラム・リキッドレイアウト
layout-three-column-right3カラム・固定レイアウト(右サイドバー)
layout-three-column-liquid-right3カラム・リキッドレイアウト(右サイドバー)
layout-two-column-right2カラム(右サイドバー)・固定レイアウト
layout-two-column-liquid-right2カラム(右サイドバー)・リキッドレイアウト
layout-two-column-left2カラム(左サイドバー)・固定レイアウト
layout-two-column-liquid-left2カラム(左サイドバー)・リキッドレイアウト
layout-one-column1カラム・固定レイアウト
layout-one-column-liquid1カラム・リキッドレイアウト

選択後、「デザインを適用」をクリック。

デザインを適用

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

テーマを適用

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません(注:画像はMT4のときのものですが、クレジットバナー以外はMT5も同じ表示になります)。

スタイルが切り替わりました

なお、Movable Type 5.0 ベータ 4 以前では使えませんのでご注意ください。

3.カラムレイアウトサンプル

layout-three-column(3カラム・固定レイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-three-column-liquid(3カラム・リキッドレイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-three-column-right(3カラム・固定レイアウト(右サイドバー))
layout-three-column(3カラム・固定レイアウト)

layout-three-column-liquid-right(3カラム・リキッドレイアウト(右サイドバー))
layout-three-column(3カラム・固定レイアウト)

layout-two-column-right(2カラム(右サイドバー)・固定レイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-two-column-liquid-right(2カラム(右サイドバー)・リキッドレイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-two-column-left(2カラム(左サイドバー)・固定レイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-two-column-liquid-left(2カラム(左サイドバー)・リキッドレイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-one-column(1カラム・固定レイアウト)
layout-three-column(3カラム・固定レイアウト)

layout-one-column-liquid(1カラム・リキッドレイアウト)
layout-three-column(3カラム・固定レイアウト)

Comments [2] | Trackbacks [0]
2009年10月27日

Movable Type(MT)5 テーマ:ウェブサイト用

Movable Type 5(MT5)用のテーマ(テンプレート)の配布を開始します。このエントリーで配布するのはウェブサイト用のテーマです。ブログ用のテーマは「Movable Type(MT)5 テーマ:ブログ用」を参照ください。

小粋空間テーマ

Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。

1.Movable Type 5(MT5) テーマのダウンロード

Movable Type 5(MT5)テーマのアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type(MT) テーマの利用方法です。

2.Movable Type 5(MT5)テーマのインストール

ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_website フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。

ウェブサイト管理画面の「デザイン」→「テーマ」で「小粋空間テーマ(ウェブサイト用) 5.0」が表示されていればインストールOKです。

テーマの表示

テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ(mt-static)の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。

3.Movable Type 5(MT5)テーマの入れ替え

2項で表示されている「小粋空間テーマ(ウェブサイト用) 5.0」の右上にある「適用」をクリックします。

適用をクリック

少し待つと、次のように現在のテーマの表示が切り替わります。

テーマの適用

あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。

2010.04.14
スタイルに関する記述を変更しました。

Comments [10] | Trackbacks [0]
2009年10月21日

Movable Type(MT)5 テーマ:ブログ用

Movable Type 5(MT5)用のテーマ(テンプレート)の配布を開始します。このエントリーで配布するのはブログ用のテーマです。ウェブサイト用のテーマは「Movable Type(MT)5 テーマ:ウェブサイト用」を参照ください。

小粋空間テーマ

Movable Type 5 で追加されたテーマ機能を用いれば、テーマを簡単に入れ替えることができます。

1.Movable Type 5(MT5) テーマのダウンロード

Movable Type 5(MT5)テーマのアーカイブを下記のページからダウンロードしてください。

Movable Type テンプレート

以下、Movable Type(MT) テーマの利用方法です。

2.Movable Type 5(MT5)テーマのインストール

ダウンロードしたテーマアーカイブを解凍し、themes フォルダにある koikikukan_blog フォルダを、Movable Type の themes ディレクトリに丸ごとアップロードしてください。

ブログ管理画面の「デザイン」→「テーマ」で「小粋空間テーマ(ブログ用) 5.0」が表示されていればインストールOKです。

テーマの表示

テーマのカラムレイアウトを変更したい場合は、mt-static/plugins フォルダにある KoikikukanTemplateSet フォルダを、スタティックディレクトリ(mt-static)の plugins ディレクトリに丸ごとアップロードしてください。カラムレイアウトを変更する必要がない場合はこの作業は不要です。「デザイン」→「スタイル」でスタイル選択画面に移動し、「Koikikukan Styles」を選択してください。

3.Movable Type 5(MT5)テーマの入れ替え

2項で表示されている「小粋空間テーマ(ブログ用) 5.0」の右上にある「適用」をクリックします。

適用をクリック

少し待つと、次のように現在のテーマの表示が切り替わります。

テーマの適用

あとは全体を再構築し、冒頭のようなデザインで表示されればテーマの入れ替えは完了です。

2010.04.14
スタイルに関する記述を変更しました。

Comments [13] | Trackbacks [1]
2009年9月16日

_default モディファイア

September 16,2009 1:10 AM
Tag:[, , ]
Permalink

Movable Type のグローバルモディファイア、_default を紹介します。

1.機能

このモディファイアは、テンプレートタグから出力する値が空の文字列ときに、デフォルト値として出力する内容を指定します。ただし、テンプレートで出力する値が 0 のときは「値がある」と判断されるので、_default モディファイアの値は適用されません。

2.動作例

制御系テンプレートタグを用いた動作例を以下に掲載します。もちろん通常のテンプレートタグでも利用可能です。

変数 foo の値が "OK" の場合

<mt:SetVar name="foo" value="OK" />
<mt:GetVar name="foo" _default="NG" />

実行結果

OK

変数 foo の値が空の文字列の場合

<mt:SetVar name="foo" value="" />
<mt:GetVar name="foo" _default="NG" />

実行結果

NG

変数 foo の値が 0 の場合

<mt:SetVar name="foo" value="0" />
<mt:GetVar name="foo" _default="NG" />

実行結果

0

_default の値に変数を利用

<mt:SetVar name="default" value="NG" />
<mt:SetVar name="foo" value="" />
<mt:GetVar name="foo" _default="$default" />

実行結果

NG
Comments [0] | Trackbacks [0]
2009年8月 7日

Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)修正

August 7,2009 1:55 AM
Tag:[, ]
Permalink

現在配布中の「Movable Type 4.2 用のテンプレートセット(コミュニティブログ対応版)」にいくつか不具合があったため修正しました。修正内容は次の通りです。

  1. サインインした状態でコメント投稿および確認ができない不具合を修正
  2. サインイン時に実行中のローディング画像が表示されない不具合を修正
  3. ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正

1.サインインした状態でコメント投稿および確認ができない不具合について

この不具合は、具体的には、「投稿」または「確認」をクリックすると、ボタンが disabeled 状態になるところまでは正常なのですが、その後、それぞれの CGI が起動しません。

変更前

原因は、このテンプレートセットは、MT4.2(通常版)の配布テンプレートを流用して作っており、コメント投稿フォーム部分を XHTML valid にするために、form 要素の name 属性を削除したマークアップにしていたのですが、コミュニティブログではグローバルテンプレートの mt.js を利用するため、name 属性がないと正常に動作しません。

以下の name 属性を追加することでこの不具合は解消します。

<form method="post" action="<mt:CGIPath /><mt:CommentScript />" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

2.サインイン時に実行中のローディング画像が表示されない不具合について

サインイン時にローディング画像が表示されないため、画面が停止したように見えます。

コミュニティブログのサインイン(変更前)
変更前

コメントのサインイン(変更前)
変更前

原因はローディング画像をテンプレートセットに含んでませんでした。修正後のサインイン時の画面は、次のようになります。

コミュニティブログのサインイン(変更後)
変更後

コメントのサインイン(変更後)
変更後

3.ページ右上のサインインリンクによるサインイン中のフォントサイズが大きくなる不具合を修正

サインイン中だけフォントサイズが大きくなる不具合です。違いは2項の画像を参照してください。該当のスタイルシートを下記のように修正しました。

変更前

#header div.widget-sign-in #signin-widget-content {
    color: #fff;
    font-size: 14px;
}
#header div.widget-sign-in #signin-widget-content a {
    font-size: 83%;
}

変更後

#header div.widget-sign-in #signin-widget-content {
    color: #fff;
    font-size: 83.3%;
}
#header div.widget-sign-in #signin-widget-content a {
    font-size: 100%;
}

4.ダウンロード

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版(フッタ付きリキッドレイアウト対応)」にコミュニティ用のテンプレートを追加したものです。

Movable Type(MT)テンプレート
Comments [0] | Trackbacks [0]
2009年5月11日

Movable Type 4.2 テンプレートセット(コミュニティ用)修正

May 11,2009 1:21 AM
Tag:[, , ]
Permalink

配布中の Movable Type 4.2 テンプレートセット(コミュニティ用)を修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

  • template_4_2_utf8_1_2_community_style_liquid.zip

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、3項の修正を行ってください。

今回の問題で改修するテンプレートは、「スタイルシート」インデックステンプレートのみです。

1.問題点

IE7 で表示すると、内側のボックスが外側のボックスの高さを越えて表示される(下記)。

2.原因

CSS2.0 の仕様で、float させている要素の高さが、回り込んだ要素の高さより大きい場合や、ボックス内の最後の要素を float 指定している場合、float させた要素が親ボックスからはみ出てしまいます。

IE7 以外のモダンブラウザは after 擬似要素を利用して、上記を回避する設定を行なってますが、IE7 は after 擬似要素に対応しておらず、上記の仕様にしたがった動作を行なうようになったため、このような不具合が発生しているようです(認識が誤まっていたらご指摘ください)。

3.対処内容

スタイルシートに下記の青色部分を追加してください。

.clearfix {
    display: inline-table;
    min-height: 1%;
}

調べると、下記の設定に修正することで解消するようですが、解消されなかったので上記の対処にしています(あまり調べきれてません)。

.clearfix {
    display: inline-block;
}

修正後の IE7 での表示は下記のようになります。

Comments [0] | Trackbacks [0]
2009年2月12日

Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)修正

先日配布を開始した、「Movable Type 4.2 用のテンプレートセット(コミュニティブログ対応版)」を修正しました。修正内容は次の通りです。

  • プロフィールページにサイドバー追加
  • プロフィールページのレイアウト修正

修正後のプロフィールページは、次のようになります。

プロフールページ

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版(フッタ付きリキッドレイアウト対応)」にコミュニティ用のテンプレートを追加したものです。

Movable Type(MT)テンプレート
Comments [0] | Trackbacks [0]
2009年2月 9日

Movable Type 4.2 テンプレートセット(コミュニティブログ対応版)

Movable Type 4.2 用のテンプレートセット(コミュニティブログ対応版)の配布を開始します。現状はα版という位置づけでお試しください。

テンプレートセットは下記のページからダウンロードしてください。このテンプレートセットは「スタイル対応版(フッタ付きリキッドレイアウト対応)」にコミュニティ用のテンプレートを追加したものです。

Movable Type(MT)テンプレート

追加機能は次の通りです。

1.サインアップ・サインイン

ブログのページからサインアップやサインインが行なえます。

サインイン前
サインイン前

サインイン後
サインイン後

2.ブログ記事の投稿

メインページ下にある「新しいブログ記事を作成」をクリックすれば、ブログのページからブログ記事の投稿が行なえます。

ブログ記事の投稿

3.プロフールページ

ユーザー名をクリックすれば、ユーザーのプロフィールページを表示します(サイドバー部分は未作成です)。

プロフールページ

Comments [0] | Trackbacks [0]
2009年2月 7日

Movable Type 4.2 配布テンプレートセット修正(カテゴリーアーカイブ・コメント完了)

February 7,2009 1:33 AM
Tag:[, ]
Permalink

配布中の Movable Type 4.2 テンプレートを修正しました。修正内容は次の2点です。

  • カテゴリーアーカイブに月別カテゴリーリストが表示されない不具合を修正
  • 「スタイル」機能で、コメント完了ページのカラムレイアウトが変更されるよう改善

カテゴリーアーカイブに月別カテゴリーリストが表示されない原因は、カテゴリアーカイブでのカテゴリ月別リスト表示の判定に使用していた予約変数 module_category-monthly_archives が、4.2 ではカテゴリアーカイブで「1」が設定されなくなったためです(4.1からの動作変更)。

テンプレートをご利用中で不具合を修正したい場合は、下記のリンクから最新版のテンプレートセットをダウンロードしてください。

Movable Type(MT) テンプレート

ダウンロードしたテンプレートセットを plugins ディレクトリにアップロードして、下記のテンプレートを個別に初期化すればOKです。

  • システムテンプレート:コメント完了
  • ウィジェット:カテゴリ月別アーカイブ

テンプレートを初期化したくない場合は、次に示す内容にしたがって変更してください。

1.システムテンプレート:コメント完了

赤色部分を削除して青色部分を追加してください。

<__trans_section component="koikikukantemplateset">
<mt:setVar name="page_layout" value="layout-one-column" />
<mt:if name="body_class" eq="mt-comment-confirmation">
...中略...
<mt:include module="ヘッダー" />
 
<mt:unless name="page_layout" eq="layout-three-column-right">
  <mt:if name="page_layout" like="three|left">
<div id="links-left-box">
  <dl id="links-left">
<mt:include module="サイドバー2" />
    <mt:if name="page_layout" like="two">
<mt:include module="サイドバー" />
    </mt:if>
  </dl>
</div>
  </mt:if>
</mt:unless>
 
<div id="content">
<div class="blog">
...後略...

2.ウィジェット:カテゴリ月別アーカイブ

赤色部分を削除して青色部分を追加してください。

<mt:if name="module_category-monthly_archives">
<mt:if name="archive_class" like="category-archive|category-monthly-archive">
  <mt:ifArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <mt:categoryLabel />
</dt>
 
<dd class="side">
    <mt:archiveList archive_type="Category-Monthly">
      <mt:archiveListHeader>
  <ul>
      </mt:archiveListHeader>
    <li><a href="<mt:archiveLink />"><mt:archiveTitle /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
  </ul>
      </mt:archiveListFooter>
    </mt:ArchiveList>
</dd>
  </mt:ifArchiveTypeEnabled>
</mt:if>
Comments [6] | Trackbacks [0]
2008年11月21日

Movable Type 4.2 テンプレートセット修正(アーカイブインデックス追加等)

November 21,2008 1:33 AM
Tag:[, ]
Permalink

現在配布中の Movable Type 4.2 テンプレートセットを修正しました。

修正内容は次の通りです。

  • アーカイブインデックスの追加
  • テンプレートセットにバージョン番号付与(プラグイン一覧画面に表示)
  • 不要な制御テンプレートタグの削除

1.アーカイブインデックスの追加

デフォルトテンプレートと同様のアーカイブインデックスを追加しました。アーカイブインデックスへのリンクはメインページの下部に表示しています。

アーカイブインデックス

2.テンプレートセットにバージョン番号付与

テンプレートセットにバージョン番号を付与しました。バージョン番号はプラグイン一覧で確認することができます。なお、各テンプレートセットはレイアウト機能以外の機能追加や不具合を統一して、v1.11 としました。

プラグイン一覧での各バージョンの表記は次のようになります。

ノーマル
ノーマル

スタイル対応
スタイル対応

フッタリ付きキッドレイアウト対応
フッタリキッドレイアウト対応

3.不要な制御テンプレートタグの削除

4.2 テンプレートセットは、4.1 テンプレートセットを流用していたため、一部のテンプレートに不要な制御テンプレートタグ(特に MTSetVar タグ)が残っており、これらを整理しました。

4.ダウンロード

修正版の最新のテンプレートセットは次のリンク先からダウンロードしてください。

Movable Type(MT)テンプレート
Comments [2] | Trackbacks [1]
2008年11月19日

Movable Type 4.2 テンプレートセット(Movable Type 3 ライク)

November 19,2008 1:55 AM
Tag:[, ]
Permalink

現在配布中のMovable Type テンプレート(4.2 対応)を、Movable Type 3 のテンプレート構成に見直したものを配布します。
テンプレートの機能やデザインは変わっていません。

Movable Type 4.2 テンプレート

見直した箇所は下記の部分です。

  • テンプレートモジュールを一切使用せず、ヘッダー・フッターや他のモジュールをメインとなるテンプレートにすべて移動
  • アーカイブテンプレートの「ブログ記事リスト」を「カテゴリアーカイブ」と「日付アーカイブ」に分割

また、モジュール化をやめたことに伴い、ヘッダーなどに記述していた振り分け用テンプレートタグ(MTIf タグなど)も削除しているので、テンプレートの見通しは良くなったと思います。
ただし、ウィジェットについては利便性を考慮して、Movable Type 4.2 のままにしています。

以下のテンプレート一覧を見て頂ければ、おおよその構成が分かると思います。

テンプレート一覧

テンプレートセットは下記のリンクからダウンロードしてください。

template_4_2_utf8_1_3_like_mt3.zip
2008.11.19 v0.01 初版
2008.11.20 v0.02 MTIfタグをさらに削除
2008.11.25 v0.03 コメントプレビューテンプレートの不具合を修正

テンプレートセット設定方法やカラムレイアウト切り替え方法については、次のページを参考にしてください。

Movable Type 4.2 テンプレートセット(スタイル対応版)
Comments [4] | Trackbacks [0]
2008年10月 9日

Movable Type 4.2 配布テンプレートセット修正(検索結果ページ)

October 9,2008 1:55 AM
Tag:[, ]
Permalink

配布中の Movable Type 4.2 テンプレートをバージョンアップしました。変更内容は、検索結果画面について、4.2 の検索結果ページのページ分割機能への対応です。

検索結果ページのページ分割機能への対応

テンプレートをご利用中で検索結果機能を利用したい場合は、下記のリンクから最新版のテンプレートセットをダウンロードしてください。

Movable Type テンプレート

ダウンロードしたテンプレートセットを plugins ディレクトリにアップロードして、下記のテンプレートを初期化すればOKです。

  • インデックステンプレート:スタイルシート
  • システムテンプレート:検索結果
  • ウィジェット:検索

変更箇所は次の通りです。テンプレートを初期化したくない場合は、該当する内容を追加または変更してください。ただし、システムテンプレートの「検索結果」は全面的に作り直しているため、初期化をお願い致します。

1.インデックステンプレート:スタイルシート

下記のセレクタを追加してください。

.search-results-header {
    margin: 8px 0 15px;
    font-size: 120%;
}

2.ウィジェット:検索

下記の青色部分を追加してください。

<dt class="sidetitle">
Search this site
</dt>
 
<dd class="side">
  <form method="get" action="<mt:CGIPath /><mt:SearchScript />">
    <fieldset>
      <input type="hidden" name="IncludeBlogs" value="<mt:blogID />" />
      <input type="hidden" name="limit" value="<mt:searchMaxResults />" />
      <input id="search" tabindex="8"  accesskey="t" name="search" size="20" value="" />
      <input type="submit" tabindex="9" accesskey="s" value="Search" />
    </fieldset>
  </form>
</dd>
Comments [0] | Trackbacks [0]
2008年9月18日

Movable Type 4.2 テンプレートセット修正

September 18,2008 1:23 AM
Tag:[, ]
Permalink

配布中の Movable Type 4.2 テンプレートセットを修正致しました。

Movable Type テンプレート

修正したテンプレートは、下記のバージョンで配布しています。

  • template_4_2_utf8_1_4
  • template_4_2_utf8_1_4_style
  • template_4_2_utf8_1_6_style_liquid

ご利用の皆様にはご迷惑をおかけして申し訳ございませんが、以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、下記の修正を行ってください。

今回の問題で改修するテンプレートは、「ウェブページ」アーカイブテンプレートのみです。

1.問題点

  • ウェブページの表示時に JavaScript エラーが発生する。
  • スタイル対応版で、切り替えたスタイルがウェブページに反映されない(常に3カラム固定レイアウトで表示)。

2.原因

JavaScript エラーについては、Movable Type 4.1 まで使用していた mt.js に実装されている関数 individualArchivesOnLoad を起動していたため。エラー自体は引数に設定している commenter_name が未定義によるものです。

スタイルが反映されない問題については、body 要素で設定する CSS レイアウト用の変数 page_layout の値が、body 要素の直前にある MTSetVar タグで layout-three-columns という値で上書きされてしまっていたため。

3.対処

JavaScript エラーが発生する問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを次のように修正してください。

変更前(赤色部分を削除)

<mt:setVar name="body_onload" value="individualArchivesOnLoad(commenter_name)" />

変更後(青色部分を追加)

<mt:setVar name="body_onload" value="mtEntryOnLoad()" />

スタイルが反映されない問題については、「ウェブページ」アーカイブテンプレートの先頭の方にある下記の MTSetVar タグを1行削除してください。

<mt:setVar name="page_layout" value="layout-three-column" />
Comments [8] | Trackbacks [1]
2008年9月 2日

Movable Type 4.2 テンプレートセット(フッタ付きリキッドレイアウト対応)

September 2,2008 1:55 AM
Tag:[, , ]
Permalink

Movable Type 4.2 用のテンプレートセット(スタイル対応版)にフッタ付きリキッドレイアウトを追加したバージョンの配布を開始します。

これまで配布していたテンプレートセットのリキッドレイアウトは、CSSレイアウトの構造上、背景つきのフッタを表示させると、フッタの表示がサイドバーに重なってしまうという欠点があったため、簡易なテキストのみをフッタとして中央カラムに表示していました。

今回、リキッドレイアウトについては、ネガティブマージンを利用したCSSレイアウトに変更したので、背景つきのフッタもサイドバーに重ならずに表示させることができると思います。

今回追加したリキッドレイアウトは以下の 3 種類です。

3カラムリキッド(左右サイドバー)
3カラムリキッド(左右サイドバー)

3カラムリキッド(右サイドバー)
3カラムリキッド(右サイドバー)

2カラムリキッド(右サイドバー)
2カラムリキッド(右サイドバー)

表示は、Windows XP + IE6/Firefox 2/Oprea 9/Safari 3 で確認しています。

なお、ネガティブマージンによるリキッドレイアウトについてはファイルサイズが大きくなると動作が重たくなる可能性があります。以前、当ブログでもこの手法を用いたレイアウトで一度デザインを変更したのですが、IE6 でファイルサイズの大きなページでは実用に耐える表示ができなかったため、一週間ほどで取りやめた経緯があります。

そういう経緯に加え、CSSを作りこむ余裕もなく、リキッドレイアウト+ネガティブマージンによるフッタ付きのCSSレイアウトについては積極的ではなかったのですが、IE7 や FireFox、Safari などのモダンブラウザが主流になり、それらでは問題なく表示できるはずですので、公開することにします。
ただし、動作の保障は致しかねますので、ご利用に関してはご自身の責任でお願い致します。

1.テンプレートセットのダウンロード

「4.2 スタイル対応版(フッタ付きリキッドレイアウト対応)」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

プラグインの一覧

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

ブログ管理画面

右下にある「ブログのテンプレートを初期化」をクリック。

ブログのテンプレートを初期化

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

新しいテンプレートセットを適用

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

テンプレートセットの入れ替え開始

「テンプレートの初期化を完了しました。」が表示されれば完了です。

テンプレートの初期化完了

サイトの再構築アイコンをクリック。

サイトの再構築

「すべてのファイル」を選択して「再構築」をクリック。

再構築

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

再構築完了

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

サイト表示

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

完了

4.スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

ブログ管理画面

「既定のスタイル」の左側にある + マークのアイコンをクリック(「既定のスタイル」の部分は選択状態によって異なります)。

アイコンをクリック

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

テーマURLを入力

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ(mt-static ディレクトリがある位置)までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

サムネイル画像

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックス

リキッドレイアウトは次のものから選択してください。

  • 3カラムリキッド(左右サイドバー):layout-three-column-liquid
  • 3カラムリキッド(右サイドバー):layout-three-column-liquid-right
  • 2カラムリキッド(右サイドバー):layout-two-column-liquid-right

テンプレート

選択後、「デザインを適用」をクリック。

デザインを適用1

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

デザインを適用2

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

切り替え後のテンプレート

5.スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート(styles-site.css)」を編集してください。

Comments [31] | Trackbacks [2]
2008年8月19日

Movable Type 4.2 テンプレートセット(スタイル対応版)

August 19,2008 1:13 AM
Tag:[, , ]
Permalink

Movable Type 4.2 用のテンプレートセット(スタイル対応版)の配布を開始します。

テンプレート

Movable Type 4.1 で追加されたテンプレートセット機能を用いれば、これまでのようにテキストエリアにテンプレートをペーストせずに、簡単に入れ替えることができます。

バージョン 4.1 では、ウィジェットセットがテンプレートセットに未対応でしたが、バージョン 4.2 からウィジェットセットもテンプレートセットに含めることができるようになったため、サイドバーのパーツをウィジェットに移動しました。

ウィジェットに移動

1.テンプレートセットのダウンロード

「4.2 スタイル対応版」のテンプレートセットアーカイブを、下記のページからダウンロードしてください。

Movable Type テンプレート

以下、テンプレートセットの利用方法です。

2.テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

プラグインの一覧

3.テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

ブログ管理画面

右下にある「ブログのテンプレートを初期化」をクリック。

ブログのテンプレートを初期化

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

新しいテンプレートセットを適用

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

テンプレートセットの入れ替え開始

「テンプレートの初期化を完了しました。」が表示されれば完了です。

テンプレートの初期化完了

サイトの再構築アイコンをクリック。

サイトの再構築

「すべてのファイル」を選択して「再構築」をクリック。

再構築

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

再構築完了

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

サイト表示

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

完了

4.スタイルの切り替え

ここではカラムレイアウトを切り替える方法を説明します。

ブログ管理画面より「デザイン」→「スタイル」をクリック。

ブログ管理画面

「既定のスタイル」の左側にある + マークのアイコンをクリック(「既定のスタイル」の部分は選択状態によって異なります)。

アイコンをクリック

開いたウィンドウに小粋空間テンプレートセットをインストールしたスタティックディレクトリのテーマURLを入力。

テーマURLを

具体的には、次のような URL になります。

http://[user-domain]/mt-static/plugins/KoikikukanTemplateSet/themes/

赤色の部分は、MT のスタティックディレクトリ(mt-static ディレクトリがある位置)までの URL を設定してください。

正しい URL であれば、次のような画面になるので、表示されたサムネイル画像をクリック。

サムネイル画像

右側に大きな画像が表示され、その下にレイアウト選択用のセレクトボックスが表示されます。

セレクトボックス

セレクトボックスからお好きなレイアウトを選択してください。ここでは「layout-two-column-right」を選択します。

レイアウトを選択

レイアウトの対応は次の通りです。このテンプレートセットには3カラム(右サイドバー)を新しく追加しました。

名称意味
layout-three-column3カラム・固定レイアウト
layout-three-column-right3カラム・固定レイアウト(右サイドバー)
layout-three-column-liquid3カラム・リキッドレイアウト
layout-two-column-right2カラム(右サイドバー)・固定レイアウト
layout-two-column-liquid-right2カラム(右サイドバー)・リキッドレイアウト
layout-two-column-left2カラム(左サイドバー)・固定レイアウト
layout-two-column-liquid-left2カラム(左サイドバー)・リキッドレイアウト
layout-one-column1カラム・固定レイアウト
layout-one-column-liquid1カラム・リキッドレイアウト

選択後、「デザインを適用」をクリック。

デザインを適用

「テーマを適用しました。レイアウトも変更されたので、再構築する必要があります。 設定を有効にするために再構築してください。」と表示されるので、ブログ全体を再構築してください。

テーマを適用

スタイルが切り替わりました。サイドバーの内容もテンプレート編集画面で入れ替える必要はありません。

スタイルが切り替わりました

5.スタイルの編集

スタイルを変更する場合は、インデックステンプレートにある、「スタイルシート(styles-site.css)」を編集してください。

Comments [8] | Trackbacks [2]
2008年8月13日

Movable Type 4.1 テンプレートセット修正

August 13,2008 12:03 AM
Tag:[, ]
Permalink

配布中の Movable Type 4.1 テンプレートセットを修正致しました。

Movable Type テンプレート

修正したテンプレートは template_4_1_utf8_1_3 および template_4_1_utf8_1_3_style で配布しています。template_4_1_utf8_1_2_style または template_4_1_utf8_1_2 以前のバージョンで本エントリーの不具合が発生している場合は、テンプレートのバージョンアップを行うか、下記の修正を行ってください。

なお、今回の問題で改修したテンプレートは、「サイドバー」テンプレートモジュールのみです。

1.問題点

月別アーカイブリストが正常に機能しない場合がある。

2.原因

月別アーカイブリストで MTArchiveListHeader タグ(MTArchiveListFooter タグ)を用いていないため。

この問題は以前エントリーした「「月別アーカイブリスト」が月別アーカイブで正常に表示されない不具合について」の類似問題と思われます。

3.対処

月別アーカイブリスト、月別カテゴリリストにMTArchiveListHeader タグ、MTArchiveListFooter タグを追加。

変更前(赤色部分を削除)

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <$MTCategoryLabel$>
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Category-Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
</MTIfArchiveTypeEnabled>

変更後(青色部分を追加)

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<dt class="sidetitle">
Monthly <$MTCategoryLabel$>
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader><ul></MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader><ul></MTArchiveListHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</dd>
</MTIfArchiveTypeEnabled>
Comments [0] | Trackbacks [0]
2008年8月 5日

Movable Type 4.2 公開テンプレートセット再修正

August 5,2008 12:55 AM
Tag:[, ]
Permalink

先日公開した「Movable Type 4.2 テンプレートセット」に不具合がまだ残っていましたので、再修正致しました。
コメント周りを中心にかなりバグがありました。申し訳ありません。

現在、template_4_2_utf8_1_3 にバージョンアップして配布しています。

Movable Type テンプレート

1.問題点

  1. サイドバーに「Recent Entries」が表示されません。
  2. コメントを投稿すると「不正な要求です。」というエラーになります。
  3. コメントの「返信」をクリックして投稿すると、返信元の情報が文字化けします。
  4. サインイン後にコメントの「返信」をクリックしても「~からのコメントに返信」が表示されません。
  5. コメントの「返信」をクリックして表示される「~からのコメントに返信」がチェックボックスの右に表示されません。
  6. コメント投稿をしたときに、フォームボタンが disable になりません。

2.原因および対処

2.1 サイドバーに「Recent Entries」が表示されません

テンプレートセットに同梱している「Recent Entries」ウィジェットのファイル名が recent_entries になっていました。正解は recent_entries.mtml です。

2.2 コメントを投稿すると「不正な要求です。」というエラーになります

form 要素の内容が 4.1 のままでした。

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

2.3 コメントの「返信」をクリックして投稿すると、返信元の情報が文字化けします

テンプレートセットに同梱しているコメント表示用ファイルのcomment_detail.mtml の文字コードが Shift_JIS になっていました。正解は UTF-8 です。

2.4 サインイン後にコメントの「返信」をクリックしても「~からのコメントに返信」が表示されません

コメントフォームのマークアップが誤って、id 属性 comments-open-data の中に返信用表示の input 要素を入れてしまっていました。

<div id="comments-open-data">
   <div id="comment-form-name">
   ...中略...
   </div>
   <div id="comment-form-reply" style="display:none">
      <input type="checkbox" id="comment-reply" name="comment_reply" tabindex="5" accesskey="c" value="" onclick="mtSetCommentParentID();" onkeypress="mtSetCommentParentID();" />
      <label for="comment-reply" id="comment-reply-label"></label>
   </div>
</div>

<div id="comments-open-data">
   <div id="comment-form-name">
   ...中略...
   </div>
</div>
<div id="comment-form-reply" style="display:none">
   <input type="checkbox" id="comment-reply" name="comment_reply" tabindex="5" accesskey="c" value="" onclick="mtSetCommentParentID();" onkeypress="mtSetCommentParentID();" />
   <label for="comment-reply" id="comment-reply-label"></label>
</div>

2.5 コメントの「返信」をクリックして表示される「~からのコメントに返信」がチェックボックスの右に表示されません

次のCSS の設定がもれていました(2つめのセレクタはこの問題とは関係ありませんが同じくもれていました)。

#comment-reply-label {
  display: inline;
}
#comment-form-reply {
  margin-bottom: 8px;
}

2.6 コメント投稿をしたときに、フォームボタンが disable になりません

コメントフォームに次の script 要素がもれていました。

<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>
Comments [10] | Trackbacks [0]
2008年8月 4日

Movable Type 4.2 公開テンプレートセット修正

August 4,2008 12:03 AM
Tag:[, ]
Permalink

先日公開した「Movable Type 4.2 テンプレートセット」に不具合がありましたので修正致しました。

1.問題点

テンプレートセットを入れ替えて再構築を実施すると、次のようなエラーが発生します。

「テンプレート「Atom」の再構築中にエラーが発生しました: タグでエラーがありました: 'atom'というテンプレートが見つかりませんでした。 」

2.原因

「ヘッダー」テンプレートモジュールおよび、Atom 用テンプレートの次の設定が、再構築エラーの原因です。

<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" />
<link rel="self" type="application/atom+xml" href="<$MTLink template="atom"$>" />

赤色部分は Atom テンプレートを指定する設定で、ここには「テンプレートの種別」、またはテンプレート名(半角の場合、大文字・小文字も一致)を指定する必要がありますが、Atom という名称がいずれにも一致していませんでした。

3.対処

「Movable Type 4.2 テンプレートセット」の、template_4_2_utf8_1_1 をご利用の場合、次の修正を行うことで正常に再構築できるようになります。

ヘッダーテンプレートモジュール(変更後)

<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="feed_recent"$>" />

Atom インデックステンプレート(変更後)

<link rel="self" type="application/atom+xml" href="<$MTLink template="feed_recent"$>" />
Comments [0] | Trackbacks [0]
2008年7月25日

export-ts で利用中のテンプレートセットをエクスポートする

July 25,2008 1:33 AM
Tag:[, , ]
Permalink

export-ts は Six Apart 提供のツールで、Movable Type で利用しているテンプレートを、テンプレートセットとしてエクスポートすることができるコマンドラインツールです。

以下、使用方法を簡単に説明します。

Movable Type 4.2 RC4 and some of our latest hacks」の記事にある「Download from code.sixapart.com」をクリック。

「Download from code.sixapart.com」をクリック

「export-ts」のリンクを右クリックして、export-ts というファイル名で保存。

「export-ts」のリンクを右クリック

ダウンロードした export-ts をアプリケーションディレクトリ配下の tools ディレクトリにアップロードして、実行権を付与します。

TeraTerm などでサーバにログインし、アプリケーションディレクトリに移動した後、次のコマンドを入力します。

./tools/export-ts --blog=1 --key="MyTemplate-Set"

オプションの --blog にはエクスポートしたいブログのID番号、--key にはテンプレートセット名を設定します。

実行すると、アプリケーションディレクトリに、テンプレートセット名に「-1.0」がついたディレクトリが生成され、その配下にテンプレートセットが出力されます(スクリーンショット下の左側)。

テンプレートセット出力1

plugins ディレクトリ配下はこのような感じです。

plugins ディレクトリ配下

テンプレートセットが出力されています。

テンプレートセット出力2

WIndows ローカル環境で起動する場合は次のようにします。

perl tools\export-ts --blog=1 --key="test"

WIndows ローカル環境で起動する場合

ウィジェットは未対応のようですが、インデックステンプレートやアーカイブテンプレートなどをテンプレートセットにするには便利です。
Windows 上では日本語にも対応していることを確認しています。

README はこちらをどうぞ。

README

2008.08.03
export_ts という表現があったため、export-ts に修正しました。

Comments [2] | Trackbacks [0]
2008年2月28日

テンプレートセットで独自のカラムレイアウトを適用させる方法(その3:ユーザーのカラムレイアウトを適用する&まとめ)

February 28,2008 3:03 AM
Tag:[, ]
Permalink

「その3」は、このシリーズの本題である、独自のカラムレイアウトを適用させる方法の説明です。

1.これまでのまとめ

その1」と「その2」から、ユーザーのカラムレイアウトを適用するにあたって、ポイントとなる事項は次の通りです。

  • テンプレートセットのテーマディレクトリ配下に配置した screen.css に記述しているカラムレイアウト名が適用される
  • スタイルを利用してカラムレイアウトを変更すると、変数 page_layout に適用したレイアウト名が設定される(デフォルト以外の名称も利用可能)
  • スタイルを利用してテーマあるいはカラムレイアウトを変更すると、スタイルシート(styles.css)の内容が、ベースファイル・テーマファイルへの import 命令に書き換えられる

また、テンプレートセットにカラムレイアウトを組み込むにあたっては、これまでの考察より、次のA・BとX・Yの組み合わせ(計4通り)が考えられます。

  • A.デフォルトのカラムレイアウト名を利用する
  • B.ユーザーのカラムレイアウト名を利用する
  • X.テーマを利用する(テンプレートのスタイルシートにはimport命令のみ)
  • Y.テーマを利用しない(テンプレートのスタイルシートにimport命令を書き込ませない)

その2」では、A+X のケースについて述べましたので、順を追って、残りの組み合わせを行うにあたっての実現方法を説明します。

2.テーマを利用しない場合、スタイルシートに import 命令を書き込ませない方法

結論から申し上げると、スタイルシートに import 命令を書き込ませない仕組みを作るのは困難なため、次の方法を考えました。

  • import 命令が書き込まれるスタイルシートをダミーとしてテンプレートセットに登録する
  • 本来のスタイルシートは別のインデックステンプレートとして登録する

テンプレートの構成はイマイチですが、こうすればカラムレイアウトの変更でスタイルシートが import 命令で上書きされる事象を回避できます。

具体的には config.yaml に次のように設定します。

styles-site:
    label: Stylesheet
    outfile: styles-site.css
    rebuild_me: 1
styles:
    label: Stylesheet_Dummy
    outfile: styles.css
    rebuild_me: 0

上がCSSの実体があるテンプレート、下はダミー用のスタイルシートです。実験時にわかったことは、次の2つです。

  • styles という種類のテンプレートを探して import 命令を書き込むため、実体の CSS は別のファイル名が良い。
  • styles という種類のテンプレートが存在しない場合は他の css ファイルを検索して import 命令を書き込むため、必ずダミーを用意する

3.テーマを利用しない場合の screen.css の設定

screen.css はテーマを利用しない場合は不要なファイルですが、カラムレイアウトを読み込ませるためには必須です。
よって、テーマを利用しない場合の screen.css の中身はヘッダのみとし、CSS の実体は前項の通り、インデックステンプレートに記述します。

4.ユーザーのカラムレイアウト名を利用する場合の対処

もうひとつ隠れた問題があります。それは、ユーザーのカラムレイアウト名を利用する場合、テンプレートセットを入れ替えただけでは、変数 page_layout にユーザーのカラムレイアウト名が設定されません。
設定されるのは、スタイルでカラムレイアウトを切り替えた後です。

たとえば、当ブログの配布テンプレートのデフォルトのカラムレイアウトは

layout-three-columns

となっていますが、MTのデフォルトテンプレートのカラムレイアウトは

layout-wtt

となっているため、テンプレートセット入れ替え直後は、変数 page_layout に

layout-wtt

が設定されたままです。

これを回避するために、テンプレート(メインインデックスやブログ記事リストなどの、カラムレイアウトが必要なメインのテンプレート)の先頭(=ヘッダーが呼び出される前)に設定します。
カラムレイアウトがどのページでも同じであれば、「ヘッダー」テンプレートモジュールのbody要素より手前に設定しておけば一箇所の設定で済みます。

に、次のようなしかけを設定しておきます。

<mt:unless name="page_layout" like="column"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

これは「変数 page_layout に column という文字列が含まれていなければ、layout-three-column を設定する」という意味です。つまり、Movable Type デフォルトテンプレートのカラムレイアウト名には column という文字列が含まれていないので、デフォルトテンプレートからテンプレートセットを入れ替えた場合には変数を上書きします。

変数を上書きした後、カラムレイアウト切り替えを行っても、この MTUnless タグの条件にマッチしない(=columnという文字列が含まれる)ので、選択したカラムレイアウトが適用される、というわけです。

ただし、色々なテンプレートをインストールしていると、この方法では限界があるかもしれませんので、よりユニークなカラムレイアウト名を自テンプレートセットに設定して、マッチする条件を厳しくした方が良いかもしれません。

つまり、

layout-three-columns

であれば、他のテンプレートセットのカラムレイアウト名とバッティングする可能性があるので、

koikikukan-layout-three-columns

と変更して、

<mt:unless name="page_layout" like="koikikukan"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

という判定にした方が確実でしょう。

5.各ケースのテンプレートセット構成

最後に各組み合わせのテンプレートセット構成を掲載しておきます。間違ってたらすいません。

カラムレイアウト切り替えをテンプレートセットに導入する構成がやや複雑なため、まずは当サイトのテンプレートセット(スタイル適用版)を試してみて、ファイルの内容がどうなっているか確認してください(ローカライズも行っているので、ファイル構成がサンプルと若干異なっています)。

5.1 A+X:デフォルトのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
 ├ mt-static/
 │ └ plugins/
 │   └ テンプレートセット名
 │     └ themes/
 │       ├ index.html
 │       └ テーマ名/
 │         ├ screen.css(実体あり、デフォルトのカラムレイアウトを指定)
 │         ├ thumbnail.gif
 │         └ thumbnail-large.gif
 └ plugins/
   └ テンプレートセット名/
     ├ config.yaml
     └ templates
       ├ styles.mtml(import命令あり)
       └ 他の各テンプレート

5.2 A+Y:デフォルトのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
 ├ mt-static/
 │ └ plugins/
 │   └ テンプレートセット名
 │     └ themes/
 │       ├ index.html
 │       └ テーマ名/
 │         ├ screen.css(ヘッダのみ、デフォルトのカラムレイアウトを指定)
 │         ├ thumbnail.gif
 │         └ thumbnail-large.gif
 └ plugins/
   └ テンプレートセット名/
     ├ config.yaml
     └ templates
       ├ styles.mtml(ダミー)
       ├ styles-site.mtml(CSS の実体)
       └ 他の各テンプレート

5.3 B+X:ユーザーのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
 ├ mt-static/
 │ └ plugins/
 │   └ テンプレートセット名
 │     └ themes/
 │       ├ index.html
 │       └ テーマ名/
 │         ├ screen.css(実体あり、ユーザーのカラムレイアウトを指定)
 │         ├ thumbnail.gif
 │         └ thumbnail-large.gif
 └ plugins/
   └ テンプレートセット名/
     ├ config.yaml
     └ templates
       ├ styles.mtml(import命令あり)
       └ 他の各テンプレート

5.4 B+Y:ユーザーのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
 ├ mt-static/
 │ └ plugins/
 │   └ テンプレートセット名
 │     └ themes/
 │       ├ index.html
 │       └ テーマ名/
 │         ├ screen.css(ヘッダのみ、ユーザーのカラムレイアウトを指定)
 │         ├ thumbnail.gif
 │         └ thumbnail-large.gif
 └ plugins/
   └ テンプレートセット名/
     ├ config.yaml
     └ templates
       ├ styles.mtml(ダミー)
       ├ styles-site.mtml(CSS の実体)
       └ 他の各テンプレート

このシリーズは以上です。

Comments [0] | Trackbacks [0]
2008年2月27日

テンプレートセットで独自のカラムレイアウトを適用させる方法(その2:デフォルトテンプレートのレイアウトを適用する仕組み)

今回は、デフォルトで用意されているレイアウトをテンプレートセットに適用させる方法を紹介します。この方法では、Movable Type の「既存のブログ」のベーステーマ、

mt-static/themes-base/blog.css

のスタイルに依存することになるので、その点を注意してください。

なお、テンプレートセットの設定には、config.yaml を用いた例で紹介します。

1.テンプレートセットの構成

インデックステンプレートのスタイルシートを、「styles」の種類で登録します(下)。

styles:
    label: Stylesheet
    outfile: styles.css
    rebuild_me: 1

このスタイルシート、styles.mtml には次のような内容を記述してください。

/* Default Layout: <mt:setvar name="page_layout" value="layout-wtt"> */
@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>plugins/MyTemplateSet/themes/sample/screen.css);

1行目はデフォルトテンプレートに倣っているだけです。テンプレートセットを切り替えたときにこの設定が適用されると思ったのですが、そうでもないようです。
他のテンプレートの説明は、ここでは省略します。

また、テーマファイルの実体(screen.css)は、

mt-static/plugins/テンプレートセット名/themes/テーマ名

配下においてください。

また、screen.css のヘッダ部分に、適用したいレイアウト(青色部分)を記述します。適用させるカラムレイアウトが複数存在する場合は、カンマで区切ります。

/*
 
name: Koikikukan
designer: Yujiro Araki
designer_url: http://www.koikikukan.com/ 
layouts: layout-wtt, layout-twt
 
*/

デフォルトで用意されているレイアウト名は次のものがあります。これらはローカライズが適用され、スタイル選択画面では日本語で表示されるようになっています。

  • layout-wt(2カラム:大小)
  • layout-tw(2カラム:小大)
  • layout-wm(2カラム:大中)
  • layout-mw(2カラム:中大)
  • layout-wtt(3カラム:大小小)
  • layout-twt(3カラム:小大小)

2.テンプレートセットの入れ替えとスタイルの切り替え

作成したテンプレートセットを plugins ディレクトリおよび、mt-static/plugins ディレクトリにアップロードします。

アップロードしたテンプレートセットに入れ替えた後の、スタイル切り替え(テーマの切り替えまたはレイアウトの切り替え)方法は「その1」の3項を参照してください。

先ほどの screen.css のヘッダに設定した内容が、セレクトボックスに反映されます(画面下)。
ここではセレクトボックスの表示を確認しているだけであり、当サイトのテンプレートセットに実際に適用できることを意味しているのではありません。

スタイル選択

なお、テーマまたはカラムレイアウトを切り替えると、スタイルシートは次のような内容に置き替わります。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/blog/MT-4.1-ja/mt-static/themes-base/blog.css);
@import url(/blog/MT-4.1-ja/mt-static/support/themes/sample/sample.css);
/* end StyleCatcher imports */

テーマファイルは、mt-static/support/themes にコピーされるようです。

3.まとめ

この方法を独自デザインにカラムレイアウト切り替えに適用できればスッキリするのですが、ベーステーマが必ず import されてしまうため、独自のデザインをテンプレートセットに適用したい場合には有効ではありません。

また、スタイルシートがテンプレート上に配置されないため、スタイルシートを編集するケースには向いていません。つまりこの方法は、テンプレートセット配布元が多くのデザインを用意し、ユーザーは好きなデザインを選択し、かつそれらをカスタマイズしないケースに適していると思われます。

Comments [0] | Trackbacks [1]
2008年2月26日

テンプレートセットで独自のカラムレイアウトを適用させる方法(その1:テーマ切り替えの仕組み)

Movable Type 4.1 で追加されたテンプレートセット機能で、切り替えたテンプレートセットを、さらに「スタイル」を利用してカラムレイアウトを適用さえる方法を紹介します。

カラムレイアウトを切り替えるためには、「スタイル(ブログ管理画面の「デザイン」→「スタイル」)」の機能を少し知っておく必要があります。「スタイル」は、MT3 の時代には「Style Catcher プラグイン」として配布されていた機能で、以前「StyleCatcher リポジトリ公開方法」というエントリーで一度説明しています。

MT4 ではカラムレイアウト選択機能が追加されているので、今回は「汎用ウェブサイト」を用いて、リポジトリの構成とテーマ切り替えの仕組みなどを解説します。

1.リポジトリの構成

「リポジトリ」とは、テーマを公開するにあたっての、必要な資材のセットを指します。
リポジトリの構成は、おおむね次のようになっています。

themes/
 ├ index.html
 ├ テーマ名1/
 │ ├ screen.css
 │ ├ thumbnail.gif
 │ └ thumbnail-large.gif
 └ テーマ名2/
   ├ screen.css
   ├ thumbnail.gif
   └ thumbnail-large.gif
      :

リポジトリ内に複数のテーマを設定できますが、ひとつでも構いません。

以下、それぞれのファイルの役割を説明します。

index.html

テーマスタイルを登録するファイルです。このファイルに記述したスタイルがスタイル選択画面の選択対象となります。
汎用テンプレートセットの HTML ファイル(universal.html)の内容は次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript"  />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>Universal Themes</title>
 
    <link rel="theme" type="text/x-theme" href="universal-black/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-blue/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-green/screen.css" />
    <link rel="theme" type="text/x-theme" href="universal-pink/screen.css" />
  </head>
  <body>
    <p>This is the Universal Theme set.</p>
  </body>
</html>

ご自身のテーマ登録ファイルを作成するときは、このファイルをコピーして index.html として使うと良いでしょう。meta 要素はそのまま、title 要素の内容はスタイル選択画面の「カテゴリ」欄に表示されます。link 要素に記述した screen.css が、実際に選択対象になるテーマ(スタイルシート)です。スタイルシートは冒頭の構成のように、テーマ名ディレクトリの下に配置するのが一般的です。
body要素は空でも構いません。

screen.css

テーマ用スタイルシートです。キモとなるのは、このファイルのヘッダ部分に記述するフォーマット(下)です。

/*
 
A Six Apart theme adapted for Movable Type default templates 
name: Cityscape Paris  
designer: Tiffany Chow  
designer_url: http://tiffany.vox.com/ 
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
 
*/

青色で示した内容が、スタイル切り替え時、右下のセレクトボックスにカラムレイアウトとして反映されます。

スタイル切り替え

thumbnail.gif

テーマ選択時に表示されるテーマのサムネイル画像です。120×90 で表示されます。
テーマスタイルと同じディレクトリに配置してください。

thumbnail-large.gif

サムネイルをクリックした後にこの画像が右側に表示されます。300×250 で表示されます。
テーマスタイルと同じディレクトリに配置してください。

2.テンプレートセットの構成

本体となるテンプレートセットの説明は省略していますが、テンプレートセットにリポジトリを同梱する場合のファイル構成は次のようになります。

テンプレートセット名
 ├ mt-static/
 │ └ plugins/
 │   └ テンプレートセット名
 │     └ themes/
 │       ├ index.html
 │       └ テーマ名/
 │         ├ screen.css
 │         ├ thumbnail.gif
 │         └ thumbnail-large.gif
 └ plugins/
   └ テンプレートセット名/
     ├ config.yaml
     └ templates
       └ 各テンプレート

このように、テンプレートセットにリポジトリを同梱する際には、ユーザーがアップロードしやすいよう、テンプレートセットに「mt-static/plugins/テンプレートセット名」のフォルダを作っておき、その下にリポジトリを同梱します。
リポジトリに限らず、mt-static にプラグイン資材をアップロードする時のお作法となっています。

また、上記の構成からお分かりのとおり、テンプレートセットのリポジトリのアップロード位置は、

mt-static/plugins/テンプレートセット名

を推奨します。

その理由は、プラグイン形式で配布するお作法にしたがっていることと、複数のテンプレートセットをアップロードした時に、どのテンプレートセットのリポジトリであるかを、ユーザーが容易に判別できるためです。

mt-static/themes でも構いませんが、この位置ではリポジトリを設定するHTMLファイルが存在しないため、スタイル一覧にサムネイルが表示されない(つまり目的のカラムレイアウト選択ができない)と思います(間違っていたらご指摘ください)。また、mt-static 配下に配置する資材がリポジトリ以外に何かある場合は、アップロード先が分断しないよう一ヶ所にまとめた方が良いでしょう。

3.ユーザーの作成したテーマをスタイル選択画面に表示する

1項でユーザーが任意のリポジトリを作成したと仮定し、ここではそれを読み込ませてみます。

ユーザーの作成したテーマを「デザイン」→「スタイル」画面から読み込ませるには、「+」アイコンをクリックします。

スタイル切り替え

そして、このファイルがあるURLを指定します。

スタイル切り替え

入力するURLは、

http://user-domain/mt-static/plugins/テンプレートセット名/themes/

という感じです。

汎用ウェブサイトでは、universal.html となっていますが、ユーザーがリポジトリを公開する場合は index.html としておいた方が、リポジトリURLの設定が簡単になります。

4.カラムレイアウトの切り替え

スタイル選択画面でカラムを切り替えると、セレクトボックスで選択した screen.css に対応した値(下の青色部分)が、変数 page_layout に選択したカラムレイアウトが保存されます。

/*
 
A Six Apart theme adapted for Movable Type default templates 
name: Cityscape Paris  
designer: Tiffany Chow  
designer_url: http://tiffany.vox.com/ 
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
 
*/

MT インストール時にはデフォルトのレイアウトが適用されます(変数 page_layout に初期値が設定されるようになったのはこのためかもしれません)。

5.インデックステンプレートのスタイルシート

最後に、インデックステンプレートのスタイルシート(styles.css)を説明します。

styles.css はテーマスタイルとベーステーマを呼び出すための import 命令が記述された簡素な内容です。
テーマスタイル(screen.css)は、前述のとおり、独自のファイルを適用できますが、ベーステーマファイル(themes-base/blog.css)は、テンプレートセットやスタイルを切り替えても必ず指定されます。

例として、下に汎用ウェブサイトの styles.css の内容を掲載します。

@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>addons/Commercial.pack/themes/universal-black/screen.css);

つまり、スタイルを切り替えた際には、screen.css のパスが自動的に書き換えられます。

Comments [0] | Trackbacks [0]
Now loading...
Introduction
List of "テンプレートセット"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12