1.画像配置する際に吐き出されるstyle属性を削除するカスタマイズ
2.styleタグを削除するプラグインの導入
3.cssにて、回り込み等を制御する
4.float解除(画像の回り込みを解除)するbrタグ挿入ボタンの追加
より直感的に、ソース的にも美しくなります。
imgタグに直接style属性かかれると、あとからのレイアウト編集や、サイトリニューアルの時に、本当に苦労するから。
HTMLソースにstyle指定することは絶対に避けておきたい。
1.画像配置する際に吐き出されるstyle属性を削除するカスタマイズ
2.styleタグを削除するプラグインの導入
3.cssにて、回り込み等を制御する
4.float解除(画像の回り込みを解除)するbrタグ挿入ボタンの追加
より直感的に、ソース的にも美しくなります。
imgタグに直接style属性かかれると、あとからのレイアウト編集や、サイトリニューアルの時に、本当に苦労するから。
HTMLソースにstyle指定することは絶対に避けておきたい。
MT4.xにおいて、画像を配置する際、右、左等の回りこみを設定したとき。
タグに直接書かれたstyle属性にてfloatやマージンを制御している。
(X)HTMLタグへの直接のstyle属性は、外部cssからの制御ができず、いろいろと苦労します。
ので、極力、classによって制御したい。
ということで、このstyle属性が記述されないようにする。
ついでに、クラスも任意のものに変更してしまう。
(MTをCMSとして使用するとき、極力MTの痕跡をソースにのこしたくないので)
/mt/lib/MT/Asset/Image.pm
270行目付近(MT-4.1-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;"};
}
}
ここでスタイルを指定しているので、
スタイルをコメントアウト。
そして、クラス追加部分を、下記のように変更。
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;"};
}
}
これで不用意なstyle属性はつかなくなるので、任意のclssにて、スタイルを指定する。
img.r {
float: right;
border: none;
margin:0 0 25px 2px;
vertical-align:top;
}img.l {
float: left;
margin:0 2px 25px 0;
vertical-align:top;
}img.c {
display:block;
text-align:center;
margin:0 auto 25px auto;
}