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

2007年11月21日 22:00 k@管理人 | | コメント(0) | トラックバック(1)
071120_01.jpg

そういえば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の中は書いても書かなくてもいい。
    このファイルは 各ライブラリの上の階層に配置。

【注意する事】

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

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

071120_02.jpg

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

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

カテゴリ:

タグ:

トラックバック(1)

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

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

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

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

2008年3月 5日 00:29

コメントする

Captcha Image

Type the characters you see in the picture above.

カテゴリ

sozai ranking

  • 素材NAVI
  • 素材FAN
  • Web素材屋サーチ（イラスト・写真・画像検索）
  • sozai-R

デコメ素材が取り放題！

  • iミラクル★デコメ (i-mode公式)
    Aミラクル★デコレ (au公式)

M+KBOXの素材もあります。
ヨロシクね♥

QRコード

 

QRコード
  • ※各キャリア共通
  • 月額294円（税込）

最近のブログ記事

アーカイブ

Sponsored Links

検索


Powered by Movable Type 4.01a