MT4 で StyleCatcher を使うための覚え書き

2007年11月21日 22:00 k@管理人 | 個別ページ | コメント(0) | トラックバック(1)

そういえばMT3からMT4にバージョンをあげた時、StyleCatcherの仕様がちょっと変わっててスタイルライブラリ（リポジトリ）をMT3の時の物をそのまま使うとレイアウトが崩れて悩んだので、忘れないように覚え書き。

まず、MT4のStyleCatcherではレイアウトを選択する項目が増えたので、これに対応させるようにスタイルシートの先頭にあるコメントの定型文に追加。

/*
name: mkb-weblog02
designer: k@M+KBOX
designer_url: http://mk-box.com/
developer: M+KBOX
developer_url: http://mk-box.com/
*/

/*
name: mkb-weblog02
designer: k@M+KBOX
designer_url: http://mk-box.com/
developer: M+KBOX
developer_url: http://mk-box.com/
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
*/

赤字の部分がレイアウトに関係する記述。んで、これを追加。内容は以下の通り。

layout-tw【2カラム、小・大】
layout-wt【2カラム、大・小】
layout-twt【3カラム、小・大・小】
layout-wtt【3カラム、大・小・小】

これがカラム分けするためのセレクタ名となるので、それぞれのセレクタ名に対応させてプロパティを指定。

/* これはMT4デフォルトのスタイルシートの記述例 */
/* Wide-Thin-Thin */
.layout-wtt #alpha {
  width: 560px;
  }
.layout-wtt #beta {
  left: 190px;
  width: 190px;
  }
.layout-wtt #gamma {
  right: 190px;
  width: 190px;
  }
/* 以下略 */

デフォルトのスタイルシートに沿った記述をしていれば、この辺を追加するだけで大丈夫みたい。

んで、この部分がモジュールテンプレートのフッターの

<body class="<MTIf name="body_class"><$MTGetVar name="body_class"$> </MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

この部分に変換される、と。

スタイルライブラリ（リポジトリ）作成のまとめ

【必要なファイル】

テーマスタイルシートファイル
テーマのプレビュー画像 (2点)
thumbnail.gif (120*84px）と thumbnail-large.gif (280*210px）
名前とサイズは固定
注）と、シックス・アパートのページには書いてあるけどサイズは違ってても読み込むみたい。

スタイルライブラリとして読み込むページのXHTMLファイル（index.htmlとして保存）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head profile="http://www.w3.org/2003/g/data-view">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="description" content="StyleCatcher プラグインで利用できるスタイルライブラリ" />
   <meta name="dc.title" content="Style Library" />
   <title>Style Library</title>
   <link rev="made" href="mailto:admin@mail.address" title="管理者 メールアドレス" />
   <link rel="theme" type="text/x-theme" href="http://www.sample.com/mt/themes/sample01/sample01.css" />
   <link rel="theme" type="text/x-theme" href="http://www.sample.com/mt/themes/sample02/sample02.css" />
   <link rel="theme" type="text/x-theme" href="http://www.sample.com/mt/themes/sample03/sample03.css" />
  </head>
  <body>
  ...
  </body>
</html>

赤字部分はライブラリのURLを記述。bodyの中は書いても書かなくてもいい。
このファイルは各ライブラリの上の階層に配置。

【注意する事】

スタイルシート名とそれを格納するディレクトリは同じ名前にする
スタイルで使用する画像なんかもひとまとめに同梱

これでだいじょうぶ、かな。

＜参考＞
Six Apart - 技術情報提供ブログ: StyleCatcher 用のスタイルライブラリを作成する

【追記：12月1日】
スタイルシートを対応させるために追加する部分で忘れていたところがあったので一部修正しました。時間がたってからまとめるとこれだから困る（汗

トラックバック(1)

このブログ記事を参照しているブログ一覧: MT4 で StyleCatcher を使うための覚え書き

このブログ記事に対するトラックバックURL: http://mk-box.com/txt/mt-tb.cgi/46

» デザイン－スタイルの変更(日曜プログラマのそゞろ事)~のトラックバック

StyleCatcherの後継として、MT4で標準装備されたと思われる機能だが、... 続きを読む

MT4 で StyleCatcher を使うための覚え書き

スタイルライブラリ（リポジトリ）作成のまとめ

カテゴリ:

タグ:

トラックバック(1)

コメントする

カテゴリ

デコメ素材が取り放題！

最近のブログ記事

アーカイブ

検索