ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Greasemonkey > MTの投稿画面にCSSカスタマイズ可能なプレビュー機能を追加するGreasemonkeyスクリプト
2007年01月22日 08:47
1844日前に投稿

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

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

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

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

使い方

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

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

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

MT Preview

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

なお、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: 本: 高山 恭介
Amazon.co.jp： Greasemonkeyスクリプティング TIPS&SAMPLES: 本: 高山 恭介

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - Twitterなかまでプライベートなオフ会を開催したいなら


トラックバック

このエントリーのトラックバックURL:

Greasemonkey

English version

2007/01/22 08:47:10 by F.Ko-Ji
コメント (0) トラックバック (0) Greasemonkey

前のエントリー: « 信じるのは己の
次のエントリー: 教育関連のフィード・ディレクトリ »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: