2004.10.30 Sat.
| Movable Type |
エントリー画面のカスタマイズ
MTにエントリー(投稿)する際の記事を書く画面をカスタマイズしてみました。
MT3.11にはdefaultで「太字」「斜字」「下線」「ハイパーリンク」など、いくつかのタグを挿入するボタンが用意されているんですが、今回は「フォントサイズ」「フォントカラー」のタグをワンタッチで挿入できるようにしてみました。

■フォントサイズ変更の参照元
■フォントカラー変更の参照元
こりゃ、なかなか便利♪
「canFormat」でedit_entry.tmpl内を検索すると、似たようなソースがずらずら並んでるところがあるんで、適当な場所に追加します。
ボタンの画像は、ソレっぽいのを作ってみました。
で、できたのがこんな感じ↓

他のボタンとサイズをあわせてあるんで、見栄えも違和感ないっす!
いつもながら、このような「技」を公開してくださる方に感謝っす。。
MT3.11にはdefaultで「太字」「斜字」「下線」「ハイパーリンク」など、いくつかのタグを挿入するボタンが用意されているんですが、今回は「フォントサイズ」「フォントカラー」のタグをワンタッチで挿入できるようにしてみました。

■フォントサイズ変更の参照元
単調になりがちなムーバブルタイプ(に限らずBlog)の記事。
これからどんどんBlogを始められる方が少しでも華やかで
見る側も楽しいページを作れるようにと
今回はエントリー時、簡単に文字の大きさを変えるためのスクリプト。
■フォントカラー変更の参照元
Marblog.netさんの「投稿画面の便利タグ機能追加」に文字色を指定するタグを入れる改造がついていたので、さっそくMobavleType3.0に応用してみた。
こりゃ、なかなか便利♪
・・・と、
弄っているうちに、見よう見まねで思いついた「取り消し線」ボタンとかもオマケでつけてみたり。。
下記のソースを、mt/tmpl/cms/edit_entry.tmplの中に追加したらできちゃいました(^^)
write('<a title="<MT_TRANS phrase="Strike">" href="#" onclick="return formatStr(document.entry_form.text, \'strike\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/strike-button.gif" alt="<MT_TRANS phrase="Strike">" width="22" height="16" /></a>');
「canFormat」でedit_entry.tmpl内を検索すると、似たようなソースがずらずら並んでるところがあるんで、適当な場所に追加します。
ボタンの画像は、ソレっぽいのを作ってみました。
で、できたのがこんな感じ↓

他のボタンとサイズをあわせてあるんで、見栄えも違和感ないっす!
いつもながら、このような「技」を公開してくださる方に感謝っす。。
追記: (2006.11.11)
MT3.33にupgradeしたので、新たにカスタマイズ しました。Please post a comment
Trackbacks (6件)
記事URL:
トラックバックURL:
※ 記事内容に関係のないトラックバックは削除させていただくことがあります。ご了承ください。
※ この記事に対する言及リンクのないトラックバックは、迷惑トラックバックとして公開されないことがあります。
前々から付けたかったんですけど、 それほど必要性がないかな?って思って躊躇していたカスタマイズ。 エントリー画面でのフォントサイズ変更 参考URL: ・Hito...[詳しくはこちら]

loading ...
+Monthly Archives+
+Recent 5 Entries+
- 2012.01.10 Tue.
- └ 上州夜ウダ@2012
- 2011.06.04 Sat.
- └ ヤツが帰ってきた!
- 2011.05.30 Mon.
- └ F1 モナコGP決勝
- 2011.05.15 Sun.
- └ 新moblogサービスの...
- 2011.05.04 Wed.
- └ 化粧水で誤魔化して...
+Categories+
+Recent Comments+
- 上州夜ウダ@2012
- └ YUKIO (01/10)
- └ Zacky。 (01/10)
- ヤツが帰ってきた!
- └ LB (06/05)
- └ Zacky。 (06/06)
- └ 亜門 (06/07)
- └ Zacky。 (06/07)
- 化粧水で誤魔化してみる?
- └ Debow (05/06)
- └ Zacky。 (05/07)
- お肌の悩み
- └ LB (04/25)
- └ Zacky。 (04/26)
- └ YUKIO (04/26)
- └ Zacky。 (04/26)
- 久しぶりの満腹
- └ 亜門 (04/10)
- └ Zacky。 (04/10)
- 東北地方太平洋沖地震
- └ (03/12)
- └ LB (03/12)
- └ Zacky。 (03/12)
- 大雪
- └ YUKIO (02/15)
- └ Zacky。 (02/15)
- AFCアジアカップ決勝 日...
- └ Zacky。ローニ (01/31)
+Recent Trackbacks+
- ブラボー!
- └ 上村より「里... (02/16)
- コソウダ♪
- └ 突発的召集 (07/05)
- └ 突発オフミ (07/07)
- コメントスパム対策 完...
- └ MT-Keystro... (04/06)
- MovableType 3.35→3...
- └ Movable Typ... (02/27)
- 恒例!暮れの夜ウダ@...
- └ 年末恒例の夜... (12/30)
- 海ほたるで夜ウダ!
- └ 夏の風物詩・... (08/22)
- UDA 夏のBBQオフミ
- └ UDAでBB... (08/04)
- ブラッとLB工房へ
- └ メンテオフ (01/29)
- バーガーキングが帰っ...
- └ バーガーキン... (12/22)
+Hot Topics Top10+
- No. 1 ( 8 hits)
- デカ目っ!
- No. 2 ( 6 hits)
- エンジンマウント交換@DI...
- No. 2 ( 6 hits)
- UDAカートオフ
- No. 3 ( 5 hits)
- 霧
- No. 3 ( 5 hits)
- アルツ
- No. 3 ( 5 hits)
- ネット不調
- No. 3 ( 5 hits)
- タイヤ決定!
- No. 3 ( 5 hits)
- 久しぶりのディーラー
- No. 3 ( 5 hits)
- なんだっけなぁ…
- No. 3 ( 5 hits)
- 雪が凄いゾ
- No. 3 ( 5 hits)
- 人気記事ランキングを作って...

+BMW Ring+
« prev next » « random » ![]() |
+Style+
+Blog Status+
Entries : 447
Comments : 721
Trackbacks : 79
visitors now.
Comments (8件)
タグをやたらと書くのも疲れるので、エントリー画面のカスタマイズはついつい力が入っちゃいますよね。
MovableTypeも、デフォルトで引用「blockquote」ボタンくらい付けておいてくれても良いような気がします・・・。
確かに慣れてくるとだんだんいろんなボタンがあると便利だなぁと思いますよね。
使う使わないは別にして(笑)、いろいろ弄っていると夢中になっちゃいます。。
参考になる記事をありがとうございました。
こちらを見て、私もエントリー編集画面にフォントサイズ変更や、フォントカラー変更出来る技を実装したかったのですが、参照元の「なかよしこよし」さんのところで躓いてしまいました。
私は、Movable Type 3.11-ja を使っていますが、edit_entry.tmplファイルの変更箇所の内容が一致しなくて、困ってます。
なかよしこよしさんでは Movable Type 3.01D-jaを使ってるようですが、バージョンが違うとtmplファイルの内容も違っちゃうんでしょうか・・・。
ぜひ、こちらのカスタマイズ技を知りたいのですが・・・!
気が向きましたら、ぜひ、よろしくお願いいたします。
ご訪問ありがとうございます。
さてご質問いただいたサイズ変更の件ですが、正直なところ僕も行き当たりばったりでTRY&errorを繰り返しながら…といった具合なので、今となってはよく覚えていないんです(T_T)
で、あらためて自分のファイルを確認してみたので、お役に立つかわかりませんが、わかる範囲で記載しますね。
まずmt.jsというファイルがMTをインストールしたディレクトリにあるので、そこにスクリプトの部分を書き込みます。(といっても参照元の内容をコピペさせていただいただけですが(^_^;;)
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>';
}
次にedit_entry.tmplの180行目付近に、デフォルトのボタン(太字や斜字)の記述がある箇所がありますので、デフォの書式に習ってそこに下記を追記します。
write('<a title="<MT_TRANS phrase="szSelect">" href="#" <form name="szform"><select name="sz" onchange="szSelect(this)" width="48"><option value="size" selected>size<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="Bold">・・・・
の前の行に書き込みました。
と、確かこんな感じでサイズ変更が出来るようになったと思うんですが・・・イマイチ自信がありません(^_^;;
せっかく書き込んでいただいたのに、お役に立てなくて申し訳ありません。。
この度、こちらの記事を参照させていただいて、「投稿時の文字サイズの指定」のカスタマイズを行いました。
お陰さまで、記事作成がとても楽になり、とても助かっています。
どうもありがとうございました。
今後とも宜しくお願いいたします。
コメントありがとうございます。。
この手のボタンは、あるとホントに便利ですよね♪
短いタグでも、いちいち書くのはメンドクサイですし(^_^;;
皆さんの記事を参考にしてカスタマイズしているので、たいしてお力にはなれないと思いますが、こちらこそよろしくお願いします。
ついでにTBも失礼致します。
ありがとうございました。
TB&コメントありがとうございます。