次は、選択範囲の文字色を設定するカラーセレクターを追加します。
今回も修正するファイルは
/mt/tmpl/cms/bm_entry.tmpl
/mt/tmpl/cms/edit_entry.tmpl
の２つです。
この関数を、各ファイルのスクリプトタグ内にペーストします。
(fig.1)
function colorSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "------") return;
v = options[selectedIndex].value;
}
document.all.colcol.style.backgroundColor = v;
document.selection.createRange().text = '<font color="' + v + '">' + str + '</font>';
}
function colorSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.colcol.options[document.all.colcol.selectedIndex].value == "------") return;
v = document.all.colcol.options[document.all.colcol.selectedIndex].value;
document.selection.createRange().text = '<font color="' + v + '">' + str + '</font>';
}
ツールバーの実装部分は前回と同じなので省きます。赤文字の部分が今回の追加箇所です。
(fig.2)
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="279">');
document.write('<tr>');
document.write('<td width="100"><form name="colform"><select name="colcol" onchange="colorSelect(this)" width="48"><option value="------" selected>------<option value="red">red<option value="yellow">yellow<option value="blue">blue<option value="green">green<option value="cyan">cyan</select><input type="button" onclick="colorSet()" value="set"></td>');
document.write('<td width="24"><a href="javascript:format_quote()"><img src="<TMPL_VAR NAME=STATIC_URI>images/quote-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:deCode()"><img src="<TMPL_VAR NAME=STATIC_URI>images/decode-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:format_code()"><img src="<TMPL_VAR NAME=STATIC_URI>images/code-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'b¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'i¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(¥'u¥')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write(' ');
}
</script>
色の種類などは、好みに変更してください。また、今回ツールバーの幅が100px増えますので、前回と同様、テーブルのwidthを調整する必要があります。
コメント
続いてColor Selectorも付けさせていただきました!
いつもありがとうございます♪
エントリー時｢文字にバックグラウンドカラー｣をつけられるボタン
この記事を参考に文字のバックグラウンドにカラーをつけられるようにしました｡
すみません｡
トラバ一つ失敗してしまいました｡
アドレスになってる方を消してくだされば､ありがたいです｡
お手数をおかけします｡
削除しておきました～
便利ボタン、更に発見！
ハロー、ボタンにウハビバ中です。もう止まりません。やばいです。でもつけちゃうのです。（笑）どうしてもっ！（笑） なかよしこよしさんにてエントリー時｢文字にバックグラウンドカラー｣をつけられるボタンを発見したので、こりゃいいやとまたまた取り入れました。（…
DecodeとColor Selectorを付けてみました。
とーっても編集しやすくなりました！ありがとうございます。
先日はこちらで大変お世話になりました。
そして突然で申し訳ないのですが、TBさせていただいてからわたし側のURLに設定ミスがあると分かりました。
ご迷惑をかけますが、こちらのTBを一度削除していただけないでしょうか？
「Decodeと文字色をつける」というTBになります。どうかよろしくお願いいたします。
削除しておきました～。
Decodeと文字色をつける
文字フォントを変えるに引き続き、エントリー画面をどんどん変更しまーす。 Trivial BLOGさんの「管理画面にDecodeボタンをつける」と「Color Selectorをつける」を参考にしました。 ※補記：Decodeは＜＞を自動で＆ｌｔ；とか＆ｇｔ；に直してくれるボタンです。 やっぱ…
素早いご対応ありがとうございます！
ご迷惑をかけて本当に申し訳ありませんでした。
再度、間違いないTBさせていただきました。よろしくお願いいたします。
管理画面やコメントでのボタンについて。
色々、このブログに書きましたが、 それについて書いてあるブログリファレンスを まとめてみました。 ま、順序は適当。どれが出元だか分からなくなってきたのー。＜おい。 Reference @ PC Blog @ Noel Cafe blockquoteボタン URLボタンの手直し。 HRボタンをつくる。 Deco…
ｴﾝﾄﾘの文字色を変更する
スタイルシートで好みの色にしてはありますが。 たまに強調したいときとか、あるﾃﾞｼｮ。 というわけで、またまたｶｽﾀﾏｲｽﾞ。 ※＜＞は半角に直してくださいね…
MT実験
一部だけ赤にしてみる。 あと引用用の枠も 参考サイト blockquoteを簡単に Color Selectorをつける エントリー時｢文字にバックグラウンドカラー｣をつけられるボタン…
MT実験
一部だけ赤にしてみる。 あと引用用の枠も 文字の大きさも気軽にいろいろ変えられるようにした。 参考サイト blockquoteを簡単に Color Selectorをつける エントリー時｢文字にバックグラウンドカラー｣をつけられるボタン……
MTカスタマイズ1
備忘録的に。
エントリー投稿、管理画面に各種タグ挿入ボタン等を
ﾄﾞｶﾄﾞｶﾄ…
MovableType3覚え書・その2
上記にあるように編集画面を少しカスタマイズしたので、だいぶ使いやすくなりました。…
Color Selectorを付けるに際して、参考にさせていただきました。ありがとうございました。（どうしてもトラックバックが上手くいかないようなので、こちらでリンクの報告をさせていただきますね）
申し訳ございませんっ！トラックバック、送れていたようです。（しかも2回も）それに上のコメントにはリンクを張るのを忘れているし…。
重ね重ねのミスで申し訳ないのですが、だぶったトラックバックとコメントは削除をお願いできますでしょうか。（MovableType3覚え書・その2 というトラックバックです）
お手数をお掛けして申し訳ありませんが、よろしくお願い致します。
１つ削除しておきました～。
MTカスタマイズ1
備忘録的に。
エントリー投稿、管理画面に各種タグ挿入ボタン等を
ﾄﾞｶﾄﾞｶﾄ…
投稿画面に文字色変更ボタンを付ける
Trivial BLOGさんのColor Selectorをつけるを参考にしました。…
エントリーでソースタグを表示
ウェブ上でソースを表示させる（紹介する）方法 ・大文字にして入力する （らしい） ・画面コピーして画像として引用する （らしい） ・preタグを使う （らしい） ・xmpタグを使う （らしい） 他の方法を知っている方、教えてくださ～い☆……
さらに色つけボタンも付けてみよう
エントリ編集画面に色つけボタンを付けよう
Color Selector
記事投稿時にテキストに色を付けるボタンを追加します。部分的に色を変えたいときに重宝します。 1 : ファイル編集 ・ 色付けボタンを設置する為に編集するファイルは (MT_Home)/tmpl/cms/bm_entry.tmpl と (MT_Home)/tmpl/cms/edit_entry.tmpl の二つです…