画像を背景にしてテキスト文字を表示する方法について再検討した。CSSを使うのが一般的だが、MT(ムーバブルタイプ)では基本デザインでCSSを使っているため、個別記事でCSSを使うのは面倒だ。そこで、テーブルを使って背景画像にテキスト文字を載せる方法が一番表示が安定することがわかった。テーブルの背景画像を使うとは、古くて新しい方法かもしれないだ。忘備録としてソースを記述しておく。
▼サンプル画像
▼テーブルを組んで背景に画像を入れて、文字テキストを表示した例
1 | 2 |
3 | 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>
この記事を書いた遠田幹雄は中小企業診断士です
遠田幹雄は経営コンサルティング企業の株式会社ドモドモコーポレーション代表取締役。石川県かほく市に本社があり金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントです。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係る総合的なコンサルティング活動を展開しています。実際にはWEBマーケティングやIT系のご依頼が多いです。
民民での直接契約を中心としていますが、商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣や中小企業基盤整備機構の経営窓口相談に対応したりもしています。
保有資格:中小企業診断士、情報処理技術者など
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介していますので興味ある方はご覧ください。
お問い合わせは電話ではなくお問い合わせフォームからメールにておねがいします。新規の電話番号からの電話は受信しないことにしていますのでご了承ください。
【反応していただけると喜びます(笑)】
記事内容が役にたったとか共感したとかで、なにか反応をしたいという場合はTwitterやフェイスブックなどのSNSで反応いただけるとうれしいです。
遠田幹雄が利用しているSNSは以下のとおりです。
facebook https://www.facebook.com/tohdamikio
ツイッター https://twitter.com/tohdamikio
LINE https://lin.ee/igN7saM
チャットワーク https://www.chatwork.com/tohda
また、投げ銭システムも用意しましたのでお気持ちがあればクレジット決済などでもお支払いいただけます。
※投げ銭はデジタルコンテンツ購入という通販のしくみにしました。
※投げ銭は100円からOKです。シャレですので笑ってください(笑)