技術情報提供ブログ

StyleCatcher 用のスタイルライブラリを作成する

こんにちは。Movable Type の製品企画を担当する上ノ郷谷(かみのごうや)です。今回は Movable Type 3.3 より標準機能として同梱される StyleCatcher 機能で利用できるスタイルライブラリ(テーマファイルを格納している公開テーマスタイルリポジトリ)の公開方法をまとめます。

  1. スタイルライブラリの作成に必要なファイル
  2. 公開テーマのディレクトリ構成
  3. スタイルシートにスタイルの情報を追加する
  4. 作成したテーマのプレビュー画像を用意する
  5. スタイルライブラリページの作成

スタイルライブラリの作成に必要なファイル

スタイルライブラリを作成するにあたり、必要なファイルは以下になります。

公開テーマのディレクトリ構成

公開するテーマは以下のようなディレクトリ構成で配布する必要があります。

テーマディレクトリサンプルひとつのテーマは一つのディレクトリにまとめられ、テーマで使用される（CSS ファイル内で指定される）画像は、テーマプレビューの画像ファイルとともに、テーマディレクトリの中に含まれます。

テーマで使用される画像の形式は指定されません。またファイル名も統一する必要はありません。CSS ファイルと同じディレクトリに格納されるので、基本的に指定のサンプルは以下のようになります (background-image の場合)。

background-image: url(theme-style-image01.gif);

スタイルシートにスタイルの情報を追加する

テーマのスタイルシートファイルの最初に以下のサンプルを参考にコメントを追加します。このコメントが作成したライブラリを読み込み、スタイルを参照した時に表示される項目になります。

/*
name: Beckett
designer: Lilia Ahner
designer_url: http://www.lilia.com
developer: Lilia Ahner
developer_url: Lilia Ahner
*/

各項目の概要の基本的な項目は以下のようになります。

name
スタイルテーマの名前
designer
(StyleCatcher でテーマの詳細を表示した際に Author として表示されます)
テーマデザイナーの名前
designer_url
テーマデザイナーを示す URL
developer
テーマ開発者の名前（デザイナーと同じ場合があるので、その場合は記入の必要はありません）
developer_url
テーマ開発者を示す URL

作成したテーマのプレビュー画像を用意する

thumbnail-image.pngStyleCatcher プラグインでテーマを参照した際に表示されるプレビュー画像を用意します。画像は2種類必要で、ルールに基づいた作成が必要になります。各々の概要は以下のようになります。どの画像が StyleCatcher 管理画面でどのように使用されるかは画像を参照してください。 (クリックで拡大します)

thumbnail.gif (サンプル画像)
スタイルライブラリを読み込んだ際に表示されるテーマ一覧、これまでキャッチしたテーマ一覧に使用される小さいサイズのテーマプレビュー画像です。gif 形式で、サイズは 120px*84px である必要があります。また、ファイル名も thumbnail.gif でなければなりません。
thumbnail-large.gif (サンプル画像)
テーマ一覧から、ひとつのテーマを選択し詳細を表示した際に使用される大きいサイズのテーマプレビュー画像です。.gif 形式で、サイズは 280px*210px である必要があります。また、ファイル名は thumbnail-large.gif でなければなりません。

スタイルライブラリページの作成

スタイルシートとプレビュー用画像の準備ができたら、今度はスタイルライブラリとなるページの XHTMLファイルを作成します。ページの内容は自由に作成していただいて問題ありませんが、link 要素でテーマスタイルシートの URL を指定する必要があります。以下にサンプルを示します。

<?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.sixapart.com/movabletype/styles/bold_palettes/theme-beckett/theme-beckett.css" />
    <link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-earth/theme-earth.css" />
    <link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-green_grass/theme-green_grass.css" />
  </head>
  <body>
    ...
  </body>
</html>

サンプルのような HTML を用意し、link 要素で各テーマの CSS ファイルの URL へリンクします。この作業はスタイルライブラリを公開するにあたり、とても重要になります。link 要素一つではエラーになってしまう可能性がありますので、複数用意する事をお勧めします。ページの内容（<body></body> にコンテナされるコンテンツ）は無くても基本的にスタイルライブラリとしては機能します。

スタイルライブラリは、Movable Type を利用して構築することもできます。次回の記事では実際に Movable Type を利用して スタイルライブラリコンテンツを構築してみたいと思います。

トラックバック

トラックバック URL

»便利なムーバブルタイプ・プラグインまとめ from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

ムーバブルタイプでは、自分の必要に応じてプラグインを追加して好みのブログに仕上げていけるところが魅力ですよねぇ。。でも、最近ではプラグインも多くなってきて...

»Movable Typeのデザインテンプレート作りました from 180.style BLOG

自分のサイト用に作りましたがせっかく作ったのでいいなと思ったらお持ち帰り下さい...

コメント

情報有り難うございます。
一つお聞きしたいことがあるのですが、
Movable Typeの読み込みフォーマットに
「トラックバック送信先のURL」は
メタデータとして入れることは出来ないんでしょうか？

コメント投稿

本エントリーに関係のないご質問はサポートにお願いします。また、Movable Type に関するフィードバックは専用フォームよりお願い致します。

コメント投稿フォーム:

このページのトップへ

ProNet

WORKS掲載のお申し込み

製品一覧

  • Movable Type Advanced
  • Movable Type Training

ACTIVE ENTRIES