blue

MTの編集ボタンを追加・改造する

  • Posted by: SOMA Hitoshi
  • October 6, 2005 8:11 PM
  • mt

以下の内容はMT 3.3以降には当てはまりません。新しい記事「MTの編集ボタンを追加・改造(3.3対応プラグイン版)」を書きましたので、そちらを参照ください。

MTの記事投稿画面にはタグの入力補助をするボタンが付いているが品揃えがいまいちで、かえって便利さよりも「ほしいタグがない」不便さのほうが勝っている。それとこれは Firefox で動作させた場合なのだが、文章をたくさん書いて入力欄(textarea)にスクロールバーが出ているとする。その文章の下部(スクロールバーが下りている状態)で入力しているときにこのボタンを使うと、タグが挿入されるたびにいちいちスクロールバーが上まで戻ってしまい、ひどく不便なのである。

051006_mtbuttons.png

そこで上図のようにひととおりのボタンを追加し、使用する JavaScript を代えて「スクロールバーが上に行かないようにする」ための方法。

その1: mt_ja.js

まず代替に使う JavaScript を、投稿画面が読み込んでいる外部 jsファイルの「mt_ja.js」に付け足す。/MT/mt-static/ にある「mt_ja.js」を開き、以下のスクリプトを追加する。

なお、この JavaScript は「はてなダイアリー」の「日記を書く」画面で用いられているもので、それに少しだけ手を加えた。ありがとう「はてなダイアリー」。

その2: styles.css

同じく /MT/mt-static/ にある「styles.css」をいじる。追加するボタンの表示位置を確保するためと、ボタン用にいちいち画像を用意しているのは面倒なので追加分のボタンは皆テキストリンクにしてしまい、それをスタイルシートで装飾して「ボタン感」を出すため。

2030行目付近〜の、

#edit-entry .field-header {
  width: 580px;
  height: 18px;
  position: relative;
  }

#edit-entry .field-header {
  width: 580px;
  height: 36px;
  position: relative;
  }

に。
2043行目付近〜の、

#edit-entry .field-buttons {
  position: absolute;
  bottom: -3px;
  right: 0;
  }

に1行追加して、

#edit-entry .field-buttons {
  position: absolute;
  bottom: -3px;
  right: 0;
  text-align: right;
  }
とする。
最後に、その付近の適当なところに以下を追加。
#edit-entry .field-buttons br {
  display: block;
  clear: both;
  margin: 3px 0 0 0;
  }

#edit-entry .field-buttons a.textbuttons {
  display: block;
  float: left;
  padding: 2px 5px;
  margin: 0 0 0 3px;
  border-bottom: 1px solid #8FAEBE;
  border-right: 1px solid #8FAEBE;
  background-color: #fff;
  line-height: 1em;
  }

その3: edit_entry.tmpl

そうしたら、/MT/tmpl/cms/ にある「edit_entry.tmpl」をいじる(テンプレートHTMLの修正)。

344行目付近にある、

<script type="text/javascript"> <!-- if (canFormat) { with (document) { write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-bold.gif" alt="<MT_TRANS phrase="Bold">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.entry_form.text, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-italic.gif" alt="<MT_TRANS phrase="Italic">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.entry_form.text, \'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-underline.gif" alt="<MT_TRANS phrase="Underline">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Insert Email Link">" href="#" onclick="return insertLink(document.entry_form.text, 1)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-email.gif" alt="<MT_TRANS phrase="Insert Email Link">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>'); } } // --> </script>

に置き換え。
それと、そのすぐ下のほうにある、

<script type="text/javascript"> <!-- if (canFormat) { with (document) { write('<a title="<MT_TRANS phrase="Bold">" 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="Bold">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Italic">" 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="Italic">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Underline">" 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="Underline">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-link.gif" alt="<MT_TRANS phrase="Insert Link">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Insert Email Link">" 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="Insert Email Link">" width="22" height="16" /></a>'); write('<a title="<MT_TRANS phrase="Quote">" 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="Quote">" width="22" height="16" /></a>'); } } // --> </script>

に置き換え。

もしこれ以外に追加したいボタンがある場合、<xxx>〜</xxx> と選択範囲を囲むタグであれば、上記のところに任意に、

を付け足せばいい。以上。

関連記事

トラックバック(6)

トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/71

以下のリストにある記事は、当記事 " MTの編集ボタンを追加・改造する " を参照しています :

MTの編集機能 from nobubu Eyes
エントリー投稿のカスタマイズを久々にしてみました。 アップデートしてるうちに消え...

2005年10月21日 15:36

「MTの編集ボタンを追加・改造する」にconducさんからコメントをいただいていた。 ボタンは正常に動いていて、非常に助かっているのですが、ページ自体を下...

2005年10月23日 21:15

Movable Typeを3.2-ja-2にアップグレードしてからエントリー投...

2005年10月25日 21:19

MTの編集ボタンを追加・改造しました。 ・Heading 見出しをつける ・Pa...

2006年1月14日 15:34

web-conte.com | MTの編集ボタンを追加・改造する...

2006年2月 6日 19:22

1年ちかく前に「MTの編集ボタンを追加・改造する」という記事を書いたが、それはMT 3.2までを対象としたカスタマイズの手順になっている。MTは3.2→3...

2006年9月 5日 22:47
 

広告