mt.Vicuna Simple プラグインテーマにMovable Type 5.2 から使うことのできる、エディタへの独自CSSを適用してみるテストをやってみました。

Movable Type 5.2からは、リッチテキストエディタを使った編集画面(ウェブページ、ブログ記事共)に、任意のCSSを指定することができます。CSSの指定を行うと、編集時にCSSによる装飾が有効となります。ウェブサイト、ブログごとに、それぞれ異なるCSSを設定することが可能です。

movabletype.jp (http://www.movabletype.jp/documentation/mt5/design/cssoneditor.html)

Tutorial がないと分かりにくいという人もいるかとおもいまして（自分がそうなだけ）、やってみたことを順にメモしていきます。

確認した mt.Vcuna テーマセットのヴァージョンは、1.03 で最新でなかったですが、手を加える箇所は config.yaml だけなのでそれほどヴァージョンによる違いはないとおもいます。 Movable Type は MTOS 5.2 ja により、同梱のTinyMCEプラグイン以外にエディタに関わるプラグインは使用していません。

まず、整理しておきたいことがあるのでまとめておきます。

• Movable Type 5.2 から使える機能である
• テーマの.yamlファイルで編集画面に適用するスタイルシートを指定しておく方法と、投稿設定のフィールドに直接入力する方法とがある (今回は前者の方法)
• mt.Vicuna は、Movable Type.jp の説明にある、theme.yamlを使わずに config.yaml によるテーマ指定を採用している （今の時点のヴァージョンまで）
• 適用する CSSファイルまでのパスのほか、 {{theme_static}}変数を使うことが出来る。なお、{{theme_static}} 変数にパスに注意（後述）

作業手順
まず適用するCSSファイルを作成します。 前述の解説ページにある、サンプルファイルを参考に以下のとおりにしました。ファイル名は editor.css

body {
    font-family: serif;
}

body.entry {
    background: pink;
}

body.page {
    background: green;
}

（エディタの背景色が変更されます。ちなみにサンプルCSSファイルのほうは、このほかにある画像がつくようになっていますが、「お楽しみに」とありますのでここでも一往伏せておきます）

作成したCSSファイルは、今回はとりあえず path/to/mt-static/support/theme_static/mtVicunaSimple 直下に置きます。
mt.Vicunaの config.yaml ファイルを任意のエディタで開きます。そして、適用するCSSのパスを追記します。
追記する場所の階層は説明によれば、    elements: ＞default_prefs: ＞ data: のところですが、ここは mt.VIcuna テーマセットでは既に他の設定がありますから、CSSファイルまでのパスをdate: の階層のところに追記するだけでよいのです。

具体的に示すと以下の場所です

        data:
          file_extension: html
          convert_paras: __default__
          convert_paras_comments: __default__
          archive_type_preferred: Individual
          entries_on_index: 10
# エディタへのスタイルの追記 (この行は書かなくてもよい)
          content_css: '{{theme_static}}editor.css'
#  追記ここまで　(この行は書かなくてもよい)

以上で上書き保存します（ローカルとかターミナルからでない場合上書アップロードするなど）。

パスについてですが、 {{theme_static}} のとる値が support/theme_static/止まりでなくテーマセットまで含まれるようなので注意します（これで結構嵌りました）。

{{theme_static}}　= (path to)/mt/mt-static/support/theme_static/mtVicunaSimple/  = {{support}}theme_static/mtVicunaSimple/

ブログのデザイン ＞ テーマ を開き、 mt.Vicuna Simple テーマを適用するか、あるいは適用済の場合は [再適用] をクリックします（テーマセットで指定しないというときはこの行程はパスして次の手順のところで手動入力します）。

次に、設定 ＞ 投稿 をみてみましょう（設定できていればすぐに記事編集にいっても問題ないのですが）。

WYSIWYGエディタの設定のフォームに config.yaml に記述した、{{theme_static}}editor.css　が入っていれば、記事編集のところでリッチテキストのモードにしたときに、CSSが適用されます。なお、先の行程で再適用しないか yamlファイルに記述しなかった場合は初期のサンプルのリンクのままですから、手動で入力してみます。

この場合は「変更を保存」しておきます。これで、記事の編集画面にてリッチテキストを使ったときに、スタイルが反映されています