簡単なダッシュボードウィジェットを作る（その3）

昨日に続いて、簡単なダッシュボードウィジェットを作る方法を解説します。
今日は、ウィジェット内で画像を使ったり、ウィジェットのスタイルシートを設定したりする方法を紹介します。

1.ファイルの配置

ウィジェット内で画像やスタイルシートを使う場合は、Movable Typeのインストール先にある「mt-static」ディレクトリに、それらのファイルをアップロードするようにします。
プラグイン全体のファイルの配置は、以下のようにします。

MTのディレクトリ
├ mt-staticディレクトリ
│ └ pluginsディレクトリ
│   └ プラグインのディレクトリ
│      ├ cssディレクトリ
│      │  └ スタイルシートのファイル
│      └ imagesディレクトリ
│         └ 画像のファイル
└ pluginsディレクトリ
   └ プラグインのディレクトリ
      ├ config.yamlファイル
      └ tmplディレクトリ
         └ テンプレートのファイル

2.画像を使う

ウィジェット内で画像を使う場合、HTMLのimgタグを普通に書けばOKです。
ただし、画像のディレクトリは、プラグインのアップロード先に依存しないように、変数で表す方が良いでしょう。
1.のようにファイルをアップロードした場合、画像のアドレスは以下のようにで表すことができます。

<mt:var name="static_uri">plugins/プラグインのディレクトリ/images/画像のファイル名

3.ウィジェットのスタイルシートを作る

ウィジェット独自のスタイルシートを指定することもできます。

まず、外部スタイルシートのファイルを作ります。
前日の記事で、MTApp:Widgetタグでウィジェットにクラスを割り当てる方法を紹介しました。
そのクラスに書式を設定します。

例えば、MTApp:Widgetタグを以下のように書いたとします。

<mtapp:widget id="sample_widget" class="widget sample-widget" label="作業メニュー" can_close="1">

この場合だと、スタイルシートで「sample-widget」というクラスに書式を設定します。

.sample-widget {
    各種の書式の設定
}

作成したファイルは、1.で示したディレクトリ(mt-staticディレクトリの中)にアップロードします。

4.外部スタイルシートの組み込み

次に、ウィジェットのテンプレートに、外部スタイルシートを組み込むための記述を追加します。
テンプレートの先頭に、以下の部分を追加します。

<mt:setvarblock name="html_head" append="1">
    <link rel="stylesheet" href="<mt:var name="static_uri">plugins/プラグインのディレクトリ/css/スタイルシートのファイル名" type="text/css" />
</mt:setvarblock>

5.サンプル

前日と前々日で紹介したサンプルを書き換えて、画像とスタイルシートを使うようにしてみました。
そのサンプルファイルは、以下からダウンロードすることができます。

DashboardWidgetSample2.zip

ダウンロードしたファイルを解凍すると、「plugins」と「mt-static」のフォルダができます。
これらのフォルダをMovable Typeのインストール先にアップロードすると、プラグインの動作を試すことができます。
また、テンプレートの書き方や、ファイルの配置などは、このサンプルの中身を参照してみてください。

お知らせ