風のまにまに号
以前depologさんのエントリーを参考にMTの編集画面に「引用」ボタンを設置させていただいたのですが、これを応用してDreamweaver MX 2004風の各種タグ挿入ボタン一式を組み込んでみました。これを入れるとDWで編集するのと同じ感覚で色々なタグを使うことができます。
今回作ったボタンは、MX 2004になって新しくDreamweaverに追加された「挿入」バーの「テキスト」というカテゴリーのボタン類をモデルにしています。ここには、<strong>、<em>、<h1>、<h2>、<h3>、<blockquote>、<pre>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>などのタグを挿入するボタンが並んでいます。いずれもCSS的というかSEO的というか、装飾タグではなくて意味を表す「論理タグ」となっています。この辺のタグが今後重要になるよ、というMacromediaの判断でもあると思うのですが、これらのタグをエントリー本文内でどんどん使えば、よりMovable Typeの利点を生かせると思います。
Dreamweaver MX 2004の挿入バー
そこでDWに習って<b>の代わりに<strong>、<i>の代わりに<em>を挿入するボタンを追加。MTのデフォルト・テンプレート内で<h1>～<h3>までは使われているので、代わりに<h4>～<h6>ボタンを追加。右端の「URL」ボタンはそのままですが、ついでにこれもDW風のデザインで作り直してみました。
このボタンの追加方法ですが、まず下記のGIF画像をMTのディレクトリ内の /images/ にアップします。
⇒まとめてダウンロード（Windows用exeファイル）
⇒まとめてダウンロード（Mac用sitファイル）
次にMTディレクトリの /tmpl/cms/edit_entry.tmpl というファイルの374～394行目のソースを、
のように変更してください。これをアップロードして上書きするとDW風編集画面ができあがりです。<tr>
<td width="402"><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font></td>
<td width="98" align="right" valign="top">
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top"><script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="378">');
document.write('<tr>');
document.write('<td width="27"><a href="javascript:formatStr(\'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/strong-button.gif" alt="より強調" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/em-button.gif" alt="強調" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h4\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/h4-button.gif" alt="見出し 1" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h5\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/h5-button.gif" alt="見出し 2" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'h6\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/h6-button.gif" alt="見出し 3" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif" alt="ブロック引用" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'pre\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/pre-button.gif" alt="プリフォーマットテキスト" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'ul\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/ul-button.gif" alt="リスト" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'ol\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/ol-button.gif" alt="番号リスト" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'li\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/li-button.gif" alt="リスト項目" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dl\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/dl-button.gif" alt="定義リスト" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dt\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/dt-button.gif" alt="定義する用語" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:formatStr(\'dd\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/dd-button.gif" alt="定義の詳細" width="27" height="27" border="0"></a></td>');
document.write('<td width="27"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="ハイパーリンク" width="27" height="27" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write(' ');
}
</script></td>
</tr>
（※注意）DWと同じようにALTにも日本語でテキストを入れてあるので、アップロードする前にedit_entry.tmplの文字コードをMTの文字コードと同じになるようエディタ等で保存し直してください。文字コードが一致しないと文字化けしてしまいます。
＜補足＞
上記のソース変更についてですが、JavaScriptの部分だけ単純に変更すると、テーブルの幅がピクセル固定になっているためボタンが右側にはみ出してしまいます。そこで、この下にもう一行セルを追加してみました。この手のテンプレート編集もDreamweaverを利用すると便利です。*.tmplのままでは読み込めないので、一度edit_entry.html等の名前で保存し直してからDWで開きます。
内部テンプレートをDWで開いたところするとこのようにテーブル構造が分かるので「Ctrl+M」で一行追加して、そちらにJSのコードを移してしまいます。さらにセンター合わせにすると調度よく収まりました。
これ、すごく良さそうで、トライしてみましたが、エラーが出てしまいました。375行目から何行目までを、置き換えればいいのでしょうか？ 恐縮ですが、教えていただけませんか？
返事が遅くなってすみません。デフォルトテンプレートで言うと、374～394行目に当たる部分を上記のソースに置き換える形になりますね。
ありがとうございます。うまくいきましたよ。
新年明けましておめでとう御座います。
導入は一様上手く言ったのですが、URLのアイコンが以前のままでサーバー側を消してアップしても変わりませんが、キャッシュのゴミですかね～っ！？
それとボタンにカーソルを合わせたらAltで説明は出るのですが、文字化けしています。
Movable Typeは
にしていますのでそれでなのでしょうか！？
UTF-8でも文字化けしないようにするにはedit_entry.tmpl に何かUTF-8の設定をすれば良いのですか～っ！？
お正月でノンビリされているのに申し訳ないですが、よろしくお願い致します。
(^^)/デハデハッ！
＜ちなみに＞URLはMovable Typeのサイトがが出来てからにさせてください。MyProfileのは有るんですが、どうせ使わなくなると思いますので・・・。
玉屋村長さん、こんにちは＆あけましておめでとうございます。
（うちのサイトではコメント内のHTMLタグを禁止にしているので、玉屋村長さんが書かれたタグは消えてしまったのですが・・）文字コードを変更するというのはメタタグの部分ではなくて、edit_entry.tmpl というファイル自体が持っている文字コードの属性を変えるという意味です。
Dreamweaverでは（多分）そういう機能はないので、私の場合、秀丸http://hide.maruo.co.jp/software/hidemaru.html
でedit_entry.tmpl を開いてから、「ファイル」→「名前を付けて保存」で「文字コード」を「UTF-8」に設定して同名で保存し直す、ということをやっています。確かデフォルトでは*.tmplファイルは全てSHIFT-JISになっていたので、そのせいで文字化けが起こってしまうようです。
私も秀丸を使っていますが、「文字コード」の指定が「動作環境の設定」にあると思い探していたのですが見つからず困っていたのですよ～っ！助かりました～っ！「保存」のダイアログに出てくるように成っているんですねっ！新しくなった部分をちゃんと読まずに使っているからこんな事になるんですね～っ！（反省 ^_^;）
一度Movable Typeのエントリーは元に戻したのですが、これで「DW風ボタン」を使えます。
嬉しい～～っ！(^0^)
-
(＾＾)/デハデハッ！
こんばんわ
これすごく便利ですよね活用させてもらいました
あと初トラックバックもさせていただきました＾＾
ではまた
ありがとうございます！
凄く使いやすくなりました。
こんばんは～。
とても便利なボタンをありがとうございます。
早速使わせていただきます。
Mac用画像も用意されていたので試してみたのですが、表示されませんでした。
そもそも、Win IEなどでデフォルトで表示されるボタンさえも、Macのブラウザでは表示されません。
それでも、ご紹介頂いた方法を使えば表示されるのでしょうか？
つじさん、はじめまして。
Macでタグ挿入ボタンが表示されない、と噂には聞いていたのですが、実際に確認してみたらほんとに表示されないようですね・・。これはデフォルトの編集ボタンでも、私のカスタマイズしたDW風ボタンでも同様に表示されませんでした。
管理画面のHTMLの組み方に問題があるのかもしれないので、ボタンを違う場所に設置したら見えるようになるかもしれません。何か分かったらまたお知らせしたいと思います。
※ちなみに、残念ながらMT3.0でもこの不具合は解消されていないようです・・。
早速、ご丁寧にありがとうございます。
私はMacしか使ったことがないので、タグ挿入ボタンの存在すら知りませんでした。
こういう不具合があるとわかっただけでも満足です。
ありがとうございました。
http://fumika.jp/nikki/2004/02/mt_button.html
マックOSXのNetscapeとかでですが、表示させる方法が書かれています。そのままですと標準のBやIやURLのボタン類ですが、カスタマイズすればyouthkeeさんのようにすごいボタン類もだせると思います！
あとsafariだと表示されるけどちゃんと動きません。IEでは全然表示されません。
http://hwp-w.sub.jp/hwp_blog/archives/200406161147.php
こちらも参考になるかと思います。
初めまして♪
流れ流れて、こちらにたどり着きました。
すごく便利そうなボタンがつけられてうれしいです。
ありがとうございます。
はじめまして
BLOG初心者で実はトラバの意味も未だに解ってないのですが
とりあえずカスタマイズからガンバローなんて言いながら
色々サイトを流れてたらココにたどり着きました
掲載されているスプリクトをそのまま使おうとしたのですが
どうやら古いバージョンのMT用みたいなので
MT3.0で使えるように何とか書き換えて使っています
ボタン画像はこちらで配布されているものを使わさせていただきました
http://sin.or.tv/mttest/archives/2004/08/post.html
SiNさん、はじめまして。
早速3.0対応を作っていただいてありがとうございます。私も近いうちに3.0用のボタンを考えてみたいと思っているので、その時は参考にさせていただきます。
遅ればせながら使わせていただきました。
リンク - Ctrl-Shift-aは元から使えたのですが
これってどこで設定してるんですかね?
一生懸命探したんだけど･･･
じつは、ショートカットが使えないのでMT3にする必要なしと判断しました。
リンクさせていただこうと思ってトラバみすしてしまいました；； ログ汚しすいませんです。
今晩早速試してみようと思います。ありがとうございました。
delgraphixxさん、はじめまして。
トラックバックの重複分は削除しておきました。DW風ボタンについては、私もまだMT3.15では試していないのですが、参考になれば幸いです。ぜひお試しください。
昨日は大変失礼致しました。
さっそく試してみたところ簡単な書き換えだけでうまく導入することが出来ました。と、ここまで書いてSiNさんがすでに紹介されていたことに気がつきました。とほほ。
それはさておき、このたびはお世話になりありがとうございました。ボタン画像、私も作って見たいと思ってます。でわでわ。
日頃から、このサイトにはとてもお世話になっています。
お陰様で、徐々にですが自分が満足できるサイトになってきました。（内容云々はともかくとしてシステム的に）
それで、今回、このDW風ボタンをSinさんの記事を参考に、MT3.17に自分なりにアレンジを加えて採用してみました。
エントリーの編集がとても便利になって助かっています。
一応、参考になれば幸いですので、アドレスを記入しておきます。
http://mr.moonlit.to/archives/2005/0704200549.php