2004年 12月 11日(土)   先負    今日は何の日?   2005年の今日のエントリ

TopMovableTypeMTカスタマイズ > 今度は文字の背景に色を付ける小技を装備

MTカスタマイズ今度は文字の背景に色を付ける小技を装備 new

どんどん、いっちゃいますよ~!今度も なかよしこよし さまの記事の応用です。
エントリー時「文字にバックグラウンドカラー」をつけられるボタン ←こちらを参考に
例によって mt.js と edit_entry.tmpl に記述を追加することで、実現しました。
まず、mt.js には、以下を追加します。

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 = '<div style="background:' + v + '">' + str + '</div>';
}

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 = '<div style="background:' + v + '">' + str + '</div>';
}



そして、edit_entry.tmpl には、以下を追加します。
write('<a title="<MT_TRANS phrase="Setbgcolor">" href="#" <form name="bgform"><select name="bg" onchange="bgSelect(this)" width="48"><option value="BG" selected>BG<option style="background-color:#FF3333;" value="#FF3333">red<option style="background-color:#FFFF33;" value="#FFFF33">yellow<option style="background-color:#3399FF;" value="#3399FF">blue<option style="background-color:#00FF66;" value="#00FF66">green<option style="background-color:#CC6600;" value="#CC6600">brown</select><input type="button" onclick="bgSet()" value="set"></a>');


今度は、「エントリ編集画面に文字色楽チンセットの小技装備」 で付けた 文字色のプルダウンと同じく
body の方に付けても エラーになりませんでした。
では・・・早速使ってみます。 文字の背景に色を付ける小技って、要するにこういうことなのよ。
<div style="background:***"></div> ←こんなタグが 一発で入れられます。楽チンです。

ちなみに div のところは、span に替えてもOK。ふたつの違いは
div だと、こんなふうに その行全体に背景が付きますが、

span だと、こんなふうに 文字のあるところだけに背景が付きます。お好みで。


MT3.2 へのカスタマイズは こちら をごらんください。(2005年11月8日 追記)

Posted by Caetla at 23:58 | Category : MTカスタマイズ | Comments [2] | Trackbacks [3] | Clip!! | Ranking
Tag : MovableType , カスタマイズ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.1) 総合点:(1392) 投票人数:(456)

エントリーURL


 

トラックバックURL


 

トラックバック

エントリーをラクチンにするために(3.x 以降) from http://nakayoshikoyoshi.main.jp/mt/archives/2004/12/post_610.php なかよしこよし
エントリー時に「文字色や文字の大きさを変えたいなー」なんて 思う方もいらっしゃると思います。 ワタクシがそうなんですが(爆 某所よりスクリプトをパクってきました... [続きを読む]

Tracked on 2004年12月12日 21:22

エントリー画面の改造 from toybox-gu
風邪で頭がボーーー ( ̄△ ̄)っとなりながらもMTをいじってました(苦笑) やむ... [続きを読む]

Tracked on 2004年12月21日 14:38

エントリー書きやすくするその8 from http://blog.magicwhite.jp/archives/2004/12/22/1919_93.php Magic White
シリーズ化しずつあるらしいエントリーボタン関連エントリーです。 いろんな所参考に... [続きを読む]

Tracked on 2004年12月22日 19:34
コメント
1

はじめましてVery Happy 記事を見させて頂き早速文字に背景をつけたく思いトライしてみたのですがうまくいきません。文字のあるとこだけ背景をつけたいと思い、divのところをspanに変更したのですが1行全てに背景がついてしまいます。 それと、背景色がやむやむさんのと比較すると濃くなります。もう少し色を薄くできないのでしょうか? お手数おかけしますがサポートの程宜しくお願いします。

Posted by ゲスト panser at 2005年11月08日 00:52 [RES]
2

>>1 panserさん
一つ前にいただいたコメントに さえらがお返事してるの読んでいただけましたでしょうか?
このエントリのときは 3.1x を使っていたので、これで使えたんですけど、3.2 では こちら を ご参考になさってください。
色は #FF3333 とかの部分を #FFCCCC 等 好きな色に 変えられたらいいだけです。

Posted by 管理人 さえら http://caetla.oops.jp/blog2/ at 2005年11月08日 01:20 [RES]
Amazon Search
Google Similar