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

2007/1/22 08:47

この記事ではアフィリエイト広告を利用しています。

プラグインで既にあるのかもしれませんが、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ユーザにおすすめです。

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。