MTの投稿画面にCSSカスタマイズ可能なプレビュー機能を追加するGreasemonkeyスクリプト

プラグインで既にあるのかもしれませんが、Movable Typeの投稿画面にプレビュー機能がほしいなと思って、プレビュー機能を追加するGreasemonkeyスクリプトを作ってみました。ただそれだけでは面白くないので、プレビュー・エリアのCSSをカスタマイズできるようにしました。

これを使えば、わざわざ確認画面で表示を確認する必要がなくなります。さらにCSSをカスタマイズできるので、ブログで表示したときの見栄えを再現することも可能です。

使い方

スクリプトはこちら(MT3.21で動作確認しています。MT3.3ではどうですかね？)
MT Preview (mtpreview.user.js)

このスクリプトをダウンロードして、@includeのURLを自分のMT投稿画面のURLにあわせて修正してからインストールします。

インストールしてMTの新規エントリー投稿画面を開くと、本文と追記のテキストエリアの間にプレビュー表示するエリアとCSSを入力するテキストエリアが追加されます。

本文と追記を入力すると、リアルタイムでプレビュー・エリアに反映されます。「改行設定」のセレクトエリアが投稿画面に表示されているときは、その設定に従ってプレビューしますが、表示されていないときは、とりあえず「改行を変換する」でプレビューします。

なお、imgタグの入力中はsrc属性をきちんと指定するまで画像の再読み込みが走りますが、動作に支障はありません。src属性を先に記述して最後にimg属性を記述すれば避けられます。

CSSのカスタマイズ

CSSは、Custom CSSの下のテキストエリアにCSS構文を入力して「Set CSS」ボタンを押すことで追加できます。追加したCSSはローカルに保存されるので、次回投稿画面を開いたときにはデフォルトで設定されます。

プレビュー・エリアは div#preview で指定できます。(きちんとidを指定しないと投稿画面全体に適用されます。)たとえばブログのCSSで blockquote に背景画像を指定している場合は、Custom CSSのテキストエリアに

div#preview blockquote {background:url("http://blog.fkoji.com/bq-right-bottom.png") no-repeat;}

のように入力すると、プレビュー画面でも背景画像を表示できます。CSSは複数行入力できます。

保存したCSSをクリアしたいときは「Clear saved CSS」を押すと実行されますが、ローカルに保存した値を削除するだけなので、次回投稿画面を開いたときに反映されます。

WYSIWYGよりタグ打ち派なMTユーザにおすすめです。

Greasemonkeyについてはこちら
Greasemonkey - Mozilla Firefox まとめサイト

Greasemonkeyの解説本はこちら

Amazon.co.jp： Greasemonkeyスクリプティング TIPS&SAMPLES: 本: 高山 恭介