MT4.x 画像配置をスマートにするカスタマイズ

1.画像配置する際に吐き出されるstyle属性を削除するカスタマイズ

/mt/lib/MT/Asset/Image.pm
280行目付近(MT-4.2-ja)。

if ( $param->{wrap_text} && $param->{align} ) {
    $wrap_style = 'class="mt-image-' . $param->{align} . '" ';
    if ( $param->{align} eq 'none' ) {
        $wrap_style .= q{style=""};
    }
    elsif ( $param->{align} eq 'left' ) {
        $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    }
    elsif ( $param->{align} eq 'right' ) {
        $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
    }
    elsif ( $param->{align} eq 'center' ) {
       $wrap_style .= q{style="text-align: center; display: block; margin: 0 auto 20px;"};
    }
}

ここでimgタグに直接スタイルを指定しているので、
スタイルをコメントアウト。
そして、クラス追加部分を、下記のように変更。

if ( $param->{wrap_text} && $param->{align} ) {
    $wrap_style = 'class="mt-image-' . $param->{align} . '" ';
    if ( $param->{align} eq 'none' ) {
#        $wrap_style .= q{style=""};
    }
    elsif ( $param->{align} eq 'left' ) {
          $wrap_style = 'class="l" ';
#        $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    }
    elsif ( $param->{align} eq 'right' ) {
          $wrap_style = 'class="r" ';
#        $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
    }
    elsif ( $param->{align} eq 'center' ) {
         $wrap_style = 'class="c" ';
#       $wrap_style .= q{style="text-align: center; display: block; margin: 0 auto 20px;"};
    }
}

画像左 = l
画像右 = r
画像中央 = c

という名前のクラスを指定します。

2.styleタグを削除するプラグインの導入

MTがimgタグを吐き出す際、styleタグにて囲まれてしまう。
これも直接ソースでstyle指定されてしまって邪魔なので、削除する。

・StylelessImage
Junnama Online (Mirror)：(続)MT4で画像挿入の際にclassやstyleが付くのが嫌! なあなたに。

3.cssにて、回り込み等を制御する

リンクしているcssに、以下のものを追加。
マージンなどは、レイアウトに沿って変更してください。

img.r {
    float: right;
    margin:0 0 20px 2px;
    vertical-align:top;
}
img.l {
    float: left;
    margin:0 2px 20px 0;
    vertical-align:top;
}
img.c {
    display:block;
    text-align:center;
    margin:0 auto 20px auto;
}

4.float解除（画像の回り込みを解除）するbrタグ挿入ボタンの追加

編集画面に、

・CustomEditorButton2
blog.aklaswad.com：CustomEditorButton2

以上をDLし、インストールする。
簡単にボタン機能を追加できるので、非常に便利です。

このプラグインをベースに、wasavi-designオリジナルボタンを追加します。
・InsertUtilityButton_1_00
InsertUtilityButton_1_00.zip

以上で完了。
imgタグ周りが、別ファイルのcssで制御できるようになります。
細かいレイアウト調整や、ブログデザインを変更するときに、かなり重宝すると思います。
実際、サイトのリニューアル作業のときに、MTログに書き込まれたstyleで、ものすごく苦労することも多いので・・・