ムーバブルタイプ(MovableType)

MT投稿画面で背景画像の上にテキストで文字を表示するならテーブルを使ったほうが便利

この記事は約3分で読めます。

背景画像画像を背景にしてテキスト文字を表示する方法について再検討した。CSSを使うのが一般的だが、MT(ムーバブルタイプ)では基本デザインでCSSを使っているため、個別記事でCSSを使うのは面倒だ。そこで、テーブルを使って背景画像にテキスト文字を載せる方法が一番表示が安定することがわかった。テーブルの背景画像を使うとは、古くて新しい方法かもしれないだ。忘備録としてソースを記述しておく。

▼サンプル画像
470300

▼テーブルを組んで背景に画像を入れて、文字テキストを表示した例

 

4:ここに文章

▼上記のテーブル部分のソース(ココログの場合)
<table border="1" background="/img/2011/10/05/470300.jpg" style="width: 470px; height: 300px;">
<tbody><tr>
<td width="200" valign="top" height="100" cellpadding="0">1</td>
<td width="270" valign="top" height="100" cellpadding="0">2</td>
</tr>
<tr>
<td width="200" valign="top" height="195" cellpadding="0">3</td>
<td width="270" valign="top" height="195" cellpadding="0">4:ここに文章<br /></td>
</tr>
</tbody></table>

border="1"としてあるのは境目の罫線を表示するためで、実際には挿入する必要はない。

なお、MTでは以下のソースでもうまく表示できるはず。
画像は「01.jpg」、テーブルの背景画像は「600×400ピクセル」、
上下の境目は上から「100ピクセル」、
左右の境目は左から「200ピクセル」、という設定の場合。
<table background="01.jpg" width="600"  height="400">
<tr>
 <td width="200"  height="100" valign="top">1</td>
 <td width="400"  height="100" valign="top">2</td>
</tr>
<tr>
 <td width="200"  height="300" valign="top">3</td>
 <td width="400"  height="300" valign="top">4:ここに文章</td>
</tr>
</table>