Movable Type で画像挿入をきれいにする「StylelessImage」

このエントリーをはてなブックマークに追加

Movable Type4では画像挿入を使いFTPなどを使わずに画像をアップロードできるのですが、これがちょっと曲者です。

画像挿入に挿入されるHTMLソースは以下のような感じになります。

<form mt:asset-id="1" class="mt-enclosure mt-enclosure-image"> <img alt="画像挿入" src="http://blog.webcreativepark.net/img/20071023_01.jpg" width="500" height="361" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/> </form>

デフォルトですとimg要素にclassが自動的に挿入されます。

MT4のプラグイン「StylelessImage」を利用すると、このclassが挿入されなくなります。
(「Web2.0言うな」で有名なJunnamaさんが作成されています。)

設置方法はダウンロードしたStylelessImage.pl.zipを解凍、生成されたStylelessImage.plディレクトリ内のStylelessImage.plをMovable Type を設置しているディレクトリ内のpluginsディレクトリに置くだけです。

このプラグインの素敵な所に、画像アップ時の配置設定に「左」、「中央」、「右」に「なし」を追加してくれます。

画像挿入の際に寄せなし

これはちょっと便利

form要素!?

画像挿入時に自動的に挿入されるform要素。最初は毎回、手動で消していたのですが実は意味があるようです

参考:画像を挿入したときにformタグがつく理由

アイテムとエントリーを関連付けるために使用されており、『MTEntryAssets』というタグを使用するときに、その効力を発揮するようです。

しかも、再構築の際にspan要素に置き換えられるようです。

StylelessImageは、置き換えられる要素をspan要素以外にも設定することができます。

MTEntryBodyのassetelement属性で置き換える要素であったり、class名を設定できます。またnを設定することにより空の要素と置き換えるようになります。

<$MTEntryBody assetelement="p"$>
         ↓
<p><img alt="foo" src="bar" width="n" height="n" /></p>
<$MTEntryBody assetelement="p,photo"$>
         ↓
<p class="photo"><img alt="foo" src="bar" width="n" height="n" /></p>
<$MTEntryBody assetelement="div,thumb"$>
         ↓
<div class="thumb"><img alt="foo" src="bar" width="n" height="n" /></div>
<$MTEntryBody assetelement="0"$>
         ↓
<img alt="foo" src="bar" width="n" height="n" /></code>

そもそもform要素なんていらない

MTEntryAssetsなんて使わないし、今までform要素を消していたので今後も使えないし・・・

という方は結構多いかもしれません。私もそうですし・・・

私はStylelessImageを改造して、form要素も挿入されない形で利用さしてもらってます。

StylelessImage.plの120行目あたりに以下の2文を追加しています。

if (align == 'none') {
    tag = tag.replace(/style=.*?>/, '/>');
    tag = tag.replace('class="mt-image-none" ', '');
    tag = tag.replace(/<form mt:asset-id="[0-9]+" class="mt-enclosure mt-enclosure-image">/, '');
    tag = tag.replace('</form>', '');
}

form要素がいらない方は試してみてください。

スポンサードリンク

«理想論というよりは営業トークもしくは逃げ口上 | メイン | アコーディオン形式で内容を表示できるAccordion v2.0»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1178
コメント

こんばんわ。どうしてもうまくいかなくて聞きたいのですが、
window.parent.app.insertHTML( tag, '' );
closeDialog();
にどのように挿入したらformタグがなくなるのですかね?

何度試してもMT4.2でうまくいきません。よろしければコードの前後も交えて教えてください。

通りすがりで勝手に聞いてすみません。よろしくお願いします。

投稿者:通りすがり | 2008年9月20日 00:17

>通りすがりさん

StylelessImageがMT4.0用のプラグインの為、MT4.2でそれを改造してもうまく動くことはありません。

投稿者:西畑一馬 | 2008年9月29日 15:55

通りすがりさんへのコメントになりますが、僕もどうしてもformタグを取るのをやりたくて、同じこのto-RさんがつくられているLightBox2MTを改造してできました。

LightBox2MTをDLして、解凍、
LightBox2Mt.plの42行目の

tag = tag.replace('/, '');
tag = tag.replace('', '');


に置き換えると、form要素がきれいに消えます。

MT4.2だとスタイルなしを選んだ際に
class="mt-enclosure mt-enclosure-image"
のあとにstyle="display:inline"が指定されてしまうので、
この記事にあるform要素をとるときの2行、をそのまま加えても置換されません。

ので、/style=.*?>/を1行目の置換前の最後に加える必要がありました。

あと、できれば、画像挿入の左右の寄せのないときだけ、formを取るという風に場合わけをしたいのですが、それはこれからがんばりたいと思います。

万年初心者の僕にここまでできるような環境を整えてくれたto-Rさん、本当に感謝です!

次にここに来てくた人に参考になるといいのですが。

投稿者:yasuoogle | 2008年10月12日 10:05
コメントを投稿