MovableType画像にテキストまわりこみ　参考サイトまとめ

MT時代メモ

参考記事
POCHIKING*さん
うねり。さん
1976design.comさん
Dr.Blog 助け合い掲示板■書初めテンプレートで画像の回り込み(2005/01/16)
ごみのやまさん(残念ながら削除なさってしまったご様子)
ふち付&影付画像をテキストにまわりこみの手順
1.CMS.pmに追加記述
2.スタイルシートに追加記述
3.各アーカイブに追加記述
4.影画像をアップロード
以下の操作はすべてバックアップをとった上でやってください。
1.MTがインストールされているディレクトリをたどっていくとlib/MT/App/となっており、その中にCMS.pmというファイルがあります。これをローカルに保存して追加記述します。
MT3.15-jaだと2024行目あたり。「img」というキーワードで検索していくとわかりやすいかもです。
赤字部分を追加してください。

if ($thumb) {
return <<HTML;
<div style=”clear: left;”><br /></div><div class=”img-bg img_L” style=”width: $width px;”><a href=”$url”><img alt=”$fname” src=”$thumb” width=”$thumb_width” height=”$thumb_height” border=”0″ /></a></div>
HTML
} else {
return <<HTML;
<div style=”clear: left;”><br /></div><div class=”img-bg img_L” style=”width: $width px;”><img alt=”$fname” src=”$url” width=”$width” height=”$height” border=”0″ /></div>
HTML
}
} elsif ($q->param(‘link’)) {
return <<HTML;
<a href=”$url”>Download file</a>
HTML
}
}

これを元の場所にアップロード。
2.スタイルシートに以下を丸ごとコピペ

/* 画像に影をつける（フチなし） */
.img-bg {
background-image: url(./images/shadow_001.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px;
padding: 0px;
position: relative;
}
.img-bg img {
background-color: #FFFFFF;
margin: -5px 5px 5px -5px;
padding: 0px;
position: relative;
}
/* 画像に影をつける（フチあり） */
.img-bg2 {
background-image: url(./images/shadow_001.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px;
padding: 0px;
position: relative;
}
.img-bg2 img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
/* 投稿画像からのオフセット指定 */
.img-bg img {
background-color: #FFFFFF;
margin: -5px 5px 5px -5px;
padding: 0px;
position: relative;
}
/* 画像にテキストを回り込み（画像：左寄せ） */
.img_L {
float: left;
margin: 6px 10px 5px 0px;
border: none;
}

赤字にしているところですが、なぜか個サイト差があります(笑)
参考サイトではこれでうまくいっていたようなのですが、うちではこのままだと影が左にずれ込んでしまうので赤字部分を0pxにしています。
3.画像の縦幅に満たないテキストを書いたときに、エントリーエリアを画像がつきぬけてしまうことを防ぐため、各アーカイブのエントリー記事終了あたりにまわりこみを解除する記述をします。
テンプレートのメインページの

</MTEntryIfExtended>
ココ
<p class=”posted”>

ココと赤字で書いてあるあたりに
<div style=”clear: left;”></div>
と記述をいれます。
各アーカイブの表示でつきぬけてしまうという方は上記の要領でまわりこみ解除の記述をそれぞれのアーカイブテンプレートに記述してください。
4.影画像をアップロードしておしまいです。
これで画像をアップデートするときに