« FINALFANTASY VII ADVENTCHILDREN | Main | キーボードにコーラぶちまけ »

2005年05月12日

エントリー時の装飾ボタン改造

かつて暇記をホームページビルダー使って直接HTMLファイルをせこせこと書いている時は
更新は少し手間でしたが、文字装飾に関してはWeblogよりもはるかに高度で自由な事が出来ました。
Weblogになってからというもの、装飾したい場合は自分でタグを手書きで入れなければならず
これが億劫なのでついつい淡白な黒い文字列だけになっていました。
そこで今日は　エントリー時に装飾を簡単に出来るようなボタンをつけようと思い改造してみる事に。
完成図はこのようになります。

Software Linkageさん、[魔]Magic Whiteさん、なかよしこよしさんを参考にしてエントリー時のボタンをカスタマイズしました。
これで太字、斜体、下線の他、サイズ、カラー、背景文字色
リンク、メール

引用文

池田プロダクションバナー画像貼り付け

といった事がボタン一発で出来るようになったのでこれからは巨大文字とかも使っていこうと思います。
大分　手書きで書いていた暇記の頃に近づいてきましたよ(´∇｀)

以下にソースコードの改造方法等を載せておきますので興味のある方は参考にしてみてください。
まず MovableTypeのCGIが設置してあるディレクトリから
tmpl→cms→edit_entry.tmpl　をエディタで開きます。
そして170行目付近にある
<script type="text/javascript">
<!--
if (canFormat) {
    with (document) {
・・・・・
　wirte('・・・・・);
・・・
　}
}

// -->
</script>

を次のように書き加えます。

<script type="text/javascript">
<!--
if (canFormat) {
    with (document) {
write('<a title="<MT_TRANS phrase="デコード">" href="#" onclick="return Decode(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/jittai_1.gif" alt="<MT_TRANS phrase="デコード">" width="26" height="18" border="0" /></a>');
        write('<a title="<MT_TRANS phrase="太字">" href="#" onclick="return formatStr(document.entry_form.text_more, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="太字">" width="22" height="16" /></a>');
        write('<a title="<MT_TRANS phrase="斜体">" href="#" onclick="return formatStr(document.entry_form.text_more, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="斜体">" width="22" height="16" /></a>');
        write('<a title="<MT_TRANS phrase="下線">" href="#" onclick="return formatStr(document.entry_form.text_more, \'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-underline.gif" alt="<MT_TRANS phrase="下線">" width="22" height="16" /></a>');
        write('<a title="<MT_TRANS phrase="文字サイズ">" href="#" <form name="szform"><select name="sz" onchange="szSelect(this)" width="48"><option value="サイズ" selected>サイズ<option value="80%">80%<option value="100%">100%<option value="120%">120%<option value="150%;line-height:150%">150%<option value="200%;line-height:200%;">200%</select><input type="button" onclick="szSet()" value="set"></a>');
write('<a title="<MT_TRANS phrase="文字カラー">" href="#" <form name="colform"><select name="colcol" onchange="colorSelect(this)" width="48"><option value="文字色" selected>文字色<option style="background-color:#FF3333;" value="FF3333">赤<option style="background-color:#FFFF33;" value="#FFFF33">黄色<option style="background-color:#3399FF;" value="3399FF">青<option style="background-color:#00FF66;" value="#00FF66">緑<option style="background-color:#FF33FF;" value="#FF33FF">シアン<option style="background-color:#CC6600;" value="#CC6600">茶色</select><input type="button" onclick="colorSet()" value="set"></a>');
write('<a title="<MT_TRANS phrase="文字背景カラー">" href="#" <form name="bgform"><select name="bg" onchange="bgSelect(this)" width="48"><option value="背景色" selected>背景色<option style="background-color:#FF3333;" value="#FF3333">赤<option style="background-color:#FFFF33;" value="#FFFF33">黄色<option style="background-color:#3399FF;" value="#3399FF">青<option style="background-color:#00FF66;" value="#00FF66">緑<option style="background-color:#FF33FF;" value="#FF33FF">シアン<option style="background-color:#CC6600;" value="#CC6600">茶色</select><input type="button" onclick="bgSet()" value="set"></a>');
write('<a title="<MT_TRANS phrase="リンク">" href="#" onclick="return insertLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="<MT_TRANS phrase="リンク">" width="22" height="16" /></a>');
        write('<a title="<MT_TRANS phrase="メール">" href="#" onclick="return insertLink(document.entry_form.text_more, 1)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-email.gif" alt="<MT_TRANS phrase="メール">" width="22" height="16" /></a>');
        write('<a title="<MT_TRANS phrase="引用">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="引用">" width="22" height="16" /></a>');
write('<a title="<MT_TRANS phrase="画像貼り付け">" href="#" onclick="return insertImage(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/nav-search.gif" alt="<MT_TRANS phrase="画像">" width="22" height="16" /></a> ');
write('<a title="<MT_TRANS phrase="テキストエリア">" href="#" onclick="return textarea(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/nav-categories.gif" alt="<MT_TRANS phrase="テキストエリア">" width="22" height="16" border="0" /></a>');
}
}
// -->
</script>

次にMovableTypeのCGIがインストールされているディレクトリのmt.js　をエディタで開き
ファイルの末尾でいいので次のコードを書き加えてください。



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>';
}
function bgSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "BG" ) return;
v = options[selectedIndex].value;
}
document.all.bg.style.backgroundColor = v;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}
function bgSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.bg.options[document.all.bg.selectedIndex].value == "BG" ) return;
v = document.all.bg.options[document.all.bg.selectedIndex].value;
document.selection.createRange().text = '<span style="background:' + v + '">' + str + '</span>';
}
function szSelect (obj) {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
with(obj) {
if (options[selectedIndex].value == "Size") return;
v = options[selectedIndex].value;
}
document.selection.createRange().text = '<font style="font-size:' + v + '">' + str + '</font>';
}
function szSet() {
var v;
if (!document.selection) return;
var str = document.selection.createRange().text;
if (!str) return;
if (document.all.sz.options[document.all.sz.selectedIndex].value == "Size") return;
v = document.all.sz.options[document.all.sz.selectedIndex].value;
document.selection.createRange().text = '<font style="font-size:' + v + '">' + str + '</font>';
}
function insertImage (e) {
    if (e == document.entry_form.text) document.entry_form.text.focus();
    if (e == document.entry_form.text_more) document.entry_form.text_more.focus();
    if (!document.selection) return;
    var range = document.selection.createRange();
    var my_img =prompt('画像', '');
    if (my_img != null)
     range.text='<img src="' + my_img + '">';
    return false;
}
function Decode(e) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
    str = str.replace(new RegExp("&","g"), "&amp;");
    str = str.replace(new RegExp("<","g"), "&lt;");
    str = str.replace(new RegExp(">","g"), "&gt;");
    str = str.replace(new RegExp('"',"g"), "&quot;");
    str = str.replace(new RegExp('  ',"g"), "&nbsp;&nbsp;");
    str = str.replace(new RegExp('&nbsp; ',"g"), "&nbsp;&nbsp;");
    setSelection(e, str);
    return false;
}
function textarea (e) {
    if (!canFormat) return;
    var str = getSelection(e);
    if (!str) return;
        setSelection(e, '<textarea COLS="80" ROWS="15" WRAP="off">' + str + '</textarea>');
    return false;
}

ボタンとして使っているgif画像がない場合は自分で適当なGIF画像使ってください。
Software Linkageさん、[魔]Magic Whiteさん、なかよしこよしさんのHPで配布されている画像を使っています。

要は、mt.jsに動作させたい関数を書いておいて
edit_entry.tmpl　で作った関数を呼び出してボタンを配置して機能させる。という事ですね。
この二つのファイルをいじくってれば自作のオリジナルボタン作れます(´∇｀)

Posted by kenta at 2005年05月12日 21:26

Trackback Pings

TrackBack URL for this entry:
http://ikeda.gotdns.com/cgi/MovableType/mt-tb.cgi/237

Listed below are links to weblogs that reference エントリー時の装飾ボタン改造:

» エントリーボタン追加: textareaボタン from mayu*can
エントリーを書きやすくするためのボタンの追加方法の覚書を数回に分けて書きます。 今回はtextareaボタンです。 [Read More]

Tracked on 2006年02月22日 00:25

Comments

なっがい文章だなｗ
お疲れ様。何かよく分からないけどとにかく頑張ったんだね（*´▽｀*）
　プログラムの修正がうまく行かないよー。
軽くへこむ(ーーll)

またねー☆

Posted by: sakura at 2005年05月13日 12:32

池田プロダクションは常に新しい技術を模索しているんですね！
毎回参考になる記事で頭が下がります・・( ；´Д`)

Posted by: tanaka at 2005年05月13日 16:51

＞さくら
やりだしたら楽しくてね♪
掲示板とかカスタマイズすると楽しいよね、あれと同じ感覚だよ〜
さくらもプログラム頑張れ〜(´∇｀)

＞田中氏
おお〜　参考になれば幸いです。
今は物凄い数の人が解説サイトや批評サイトを立ち上げているので
情報が多くて便利な時代になったと思うよ〜
昔はこの手の事始めようと思ったらまずは本屋で参考書探しだったもんなぁ

最新技術いじくるのは楽しいよ〜(^-^
田中氏もWeblogを始めるのだ！

Posted by: 健太 at 2005年05月13日 19:10

はじめまして！
なかよしこよし の こだるまです。
Blog の改造している時って、ひたすら楽しいですよね♪
これからも頑張ってください。
今回は当方の記事を参考にしていただきありがとうございましたー。

Posted by: こだるま at 2005年05月15日 18:38

初めまして、池田です(^-^
とても参考になる情報、ありがたく使わせて頂いております！
いつにも増して更新作業が楽しくなっちゃいました♪
これからもいろいろと参考にさせて頂きます、どうぞ宜しくお願いしますm(_ _)m

Posted by: 健太 at 2005年05月15日 20:01

Post a comment




Remember Me?

(you may use HTML tags for style)