Top / Movable Type / エントリー画面のカスタマイズ

2004.10.30 Sat.

エントリー画面のカスタマイズ

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

image


■フォントサイズ変更の参照元
単調になりがちなムーバブルタイプ(に限らず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内を検索すると、似たようなソースがずらずら並んでるところがあるんで、適当な場所に追加します。

ボタンの画像は、ソレっぽいのを作ってみました。
で、できたのがこんな感じ↓
image


他のボタンとサイズをあわせてあるんで、見栄えも違和感ないっす!

いつもながら、このような「技」を公開してくださる方に感謝っす。。


追記: (2006.11.11)
MT3.33にupgradeしたので、新たにカスタマイズ しました。

Comments (8件)

#1 : Kem37 さん
2004/10/30 20:59:27
Tバックありがとうございます。
タグをやたらと書くのも疲れるので、エントリー画面のカスタマイズはついつい力が入っちゃいますよね。
MovableTypeも、デフォルトで引用「blockquote」ボタンくらい付けておいてくれても良いような気がします・・・。
#2 : Zacky。
2004/10/31 13:34:42
Kem37さん、はじめまして。コメントありがとうございます。
確かに慣れてくるとだんだんいろんなボタンがあると便利だなぁと思いますよね。
使う使わないは別にして(笑)、いろいろ弄っていると夢中になっちゃいます。。
参考になる記事をありがとうございました。
#3 : ミッチ さん
2004/12/11 16:40:47
こんにちは。初めまして。

こちらを見て、私もエントリー編集画面にフォントサイズ変更や、フォントカラー変更出来る技を実装したかったのですが、参照元の「なかよしこよし」さんのところで躓いてしまいました。
私は、Movable Type 3.11-ja を使っていますが、edit_entry.tmplファイルの変更箇所の内容が一致しなくて、困ってます。
なかよしこよしさんでは Movable Type 3.01D-jaを使ってるようですが、バージョンが違うとtmplファイルの内容も違っちゃうんでしょうか・・・。

ぜひ、こちらのカスタマイズ技を知りたいのですが・・・!

気が向きましたら、ぜひ、よろしくお願いいたします。
#4 : Zacky。
2004/12/11 23:27:23
ミッチさん、はじめまして。
ご訪問ありがとうございます。

さてご質問いただいたサイズ変更の件ですが、正直なところ僕も行き当たりばったりで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">・・・・

の前の行に書き込みました。

と、確かこんな感じでサイズ変更が出来るようになったと思うんですが・・・イマイチ自信がありません(^_^;;
せっかく書き込んでいただいたのに、お役に立てなくて申し訳ありません。。
#5 : ポムポム さん
2004/12/20 18:14:37
こんにちは。はじめまして!

この度、こちらの記事を参照させていただいて、「投稿時の文字サイズの指定」のカスタマイズを行いました。
お陰さまで、記事作成がとても楽になり、とても助かっています。

どうもありがとうございました。
今後とも宜しくお願いいたします。
#6 : Zacky。
2004/12/20 18:38:53
ポムポムさん、はじめまして!
コメントありがとうございます。。

この手のボタンは、あるとホントに便利ですよね♪
短いタグでも、いちいち書くのはメンドクサイですし(^_^;;

皆さんの記事を参考にしてカスタマイズしているので、たいしてお力にはなれないと思いますが、こちらこそよろしくお願いします。
#7 : showBOO さん
2005/09/16 13:16:20
参考にさせていただきました。
ついでにTBも失礼致します。

ありがとうございました。
#8 : Zacky。
2005/09/16 19:45:33
お役に立ったようで良かったです(^^)
TB&コメントありがとうございます。

Please post a comment







Options


(スタイル用のHTMLタグが使えます)
太字 イタリック アンダーライン 取り消し線 ハイパーリンク
  • ※ 書き込み処理に時間がかかる場合がありますが、何度もクリックしないようお願いします。。
  • ※ 稀にエラーになった場合でも、書込みは完了していることがあります。
  • Trackbacks (6件)

    記事URL:

    トラックバックURL:
  • ※ 記事内容に関係のないトラックバックは削除させていただくことがあります。ご了承ください。
  • ※ この記事に対する言及リンクのないトラックバックは、迷惑トラックバックとして公開されないことがあります。
  • OreBlog:手抜き化計画 手抜き化計画
    作業メモを書くとコードを貼り付けることが多い。当然タグが化けるので 置換作業して...[詳しくはこちら]

    趣味と育児に明け暮れる生活:MTカスタマイズ#7(for myself(笑)) MTカスタマイズ#7(for myself(笑))
    ・エントリーの投稿画面に「色を選択するボタン」「サイズを選択するボタン」「打ち消...[詳しくはこちら]

    Project MultiBurst:エントリー画面でフォント色指定 エントリー画面でフォント色指定
    やっと見つけました、このカスタマイズ(^^;) 【エントリー画面でフォント色を指...[詳しくはこちら]

    Project MultiBurst:エントリー画面でのフォントサイズ変更(MT3.x以降?) エントリー画面でのフォントサイズ変更(MT3.x以降?)
    前々から付けたかったんですけど、 それほど必要性がないかな?って思って躊躇していたカスタマイズ。 エントリー画面でのフォントサイズ変更 参考URL: ・Hito...[詳しくはこちら]

    Project MultiBurst:エントリー画面でフォント色指定 エントリー画面でフォント色指定
    やっと見つけました、このカスタマイズ(^^;) 【エントリー画面でフォント色を指...[詳しくはこちら]

    天気晴朗ナレドモ浪高シ~明日の天気は?!:続MovableType 続MovableType
    MovableTypeのカスタマイズについて[詳しくはこちら]


    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+

    Hot!!! 09/21 21:00 Update!
    No. 1 ( 17 hits)
    人気記事ランキングを作って...
    No. 1 ( 17 hits)
    コソウダ♪
    No. 2 ( 15 hits)
    タイミング
    No. 2 ( 15 hits)
    W杯アジア最終予選 ウズベ...
    No. 3 ( 14 hits)
    タイヤ決定!
    No. 4 ( 13 hits)
    UEFAチャンピオンズリー...
    No. 5 ( 12 hits)
    シワシワの悩み
    No. 6 ( 11 hits)
    夜ウダ@多摩境
    No. 6 ( 11 hits)
    sakura
    No. 7 ( 8 hits)
    アイエス号諸々。。

    +BMW Ring+

    BMW BLOG RING
    « prev  next »
    « random »
    BMW BLOG RING

    +Linkage+

    +Blog Status+

    Entries : 447
    Comments : 721
    Trackbacks : 79

    visitors now.

    +Powered by+