お知らせ

2011年7月20日

「Movable Type 5.1 Webサイト製作ガイドVolume 2」を発売しました。
前書「Movable Type 5 Webサイト製作ガイド Volume 2」をMovable Type 5.1対応に改訂しました。「Movable Type 5.1 Webサイト製作ガイドVolume 1」の続編で、変数等の応用的な機能や、ウェブサイトやテーマなどのMovable Type 5の新機能についてしっかり解説した書籍です。
Movable TypeでWeb製作をされている方などにお勧めです。
PDFによる販売で、当サイトでのみ購入できます（書店では購入できません）。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

記事編集画面に色選択ボタンを追加するプラグイン

壱 (2008年7月 8日 10:42) | コメント(7) | トラックバック(5)

Movable Typeの記事編集画面には、文字サイズ等の書式を設定するボタンがいくつかあります。
しかし、文字色や背景色を設定するボタンがありません。
そこで、これらのボタンを追加するプラグインを作りました。
Movable Type 4.12と、MTOS4.2の最新リビジョンで動作を確認しました。

ただし、「とりあえず動く」というレベルで、ブラウザによって制限があります。
本格的にさまざまな書式設定を行いたい方は、FCKEditorなどの他のプラグインを使われることをお勧めします。

↓動作例

1.インストール

このプラグインは以下からダウンロードすることができます。

SelectColor_1_00.zip

ダウンロードしたファイルを解凍すると、「plugins」と「mt-static」の2つのフォルダができます。
これらのフォルダを、Movable Typeのインストール先ディレクトリにアップロードすると、インストール完了です。

このプラグインをインストールすると、記事編集画面に文字色と背景色の2つのボタンが追加されます。
文字色／背景色を設定したい範囲を選択して、これらのボタンをクリックし、色を選んで設定します。

2.ブラウザごとの制限

ブラウザごとに、以下のような制限があります。

ブラウザ	制限
Internet Explorer 6.0／7.0	スライダーで色を選択するタブが正しく表示されません（動作はします）
Firefox 2.0／3.0	背景色を設定することができません。
Safari 3.0	特に制限はありません。
Opera 9.5	リッチテキストエディタを使っている場合、背景色を正しく設定することができません（背景色を設定すると、テキストエディタ部分全体の背景に色がつきます）。

3.出力されるHTML

リッチテキストエディタをオンにして色を設定した場合、ブラウザごとに出力されるHTMLが異なります。

ブラウザ	HTML
Internet Explorer 6.0／7.0	文字色を設定した部分は、<font color="#xxxxxx">～<font>のタグで囲まれます。背景色を設定した部分は、<font style="BACKGROUND-COLOR : #xxxxxx">～<font>のタグで囲まれます。
Firefox 2.0／3.0	文字色を設定した部分は、<font color="#xxxxxx">～<font>のタグで囲まれます。
Safari 3.0	文字色を設定した部分は<span class="Apple-style-span" style="color : rgb(r, b, b);">～<span>のタグで囲まれます。背景色を設定した部分は<span class="Apple-style-span" style="background-color : rgb(r, b, b);">～<span>のタグで囲まれます。
Opera 9.5	文字色を設定した部分は、<font color="#xxxxxx">～<font>のタグで囲まれます。