画像に文字入れ ズボラ術 ＜button＞でキャプション入れ編

入力フォームをつくるため、
＜button＞タグを調べていたら　 http://www.htmq.com/html/button.shtml
こんな使い方もできるのですね↓


<button> <font size="2">今月の</font> <font size="5" color="red">おすすめ商品</font> </button>


<button> <font size="1">ランキング</font><br /> <font size="5" color="darkgoldenrod">1位</font> </button> <button> <font size="1">ランキング</font><br /> <font size="5" color="gray">2位</font> </button> <button> <font size="1">ランキング</font><br /> <font size="5" color="sienna">3位</font> </button>


<button> <img src="sample/sample.gif"><br /> <font size="5" color="blue">ひんや〜りグッズ</font> </button>


<button> <font size="3" color="red">8千円以上で</font><br /> <span style="padding:3px; font-weight:bold; font-size:24px; line-height:150%; color:#ffffff; background-color:red;">送料無料</span> </button>



そこで、ズボラな技を考えました！
実際に、かなり使ってます（笑）↓



<button><span style="font-size:1.5em; line-height:1.2em; font-weight:bold; color:red; ">【 タイトル1 】</span><br /><img src="http://www.moshimo.com/item_image/0053600000002/2/r.jpg" alt="" title="" width="150" /><br />キャプション1</button> <button><span style="font-size:1.5em; line-height:1.2em; font-weight:bold; color:red; ">【 タイトル1 】</span><br /><img src="http://www.moshimo.com/item_image/0053600000002/4/r.jpg" alt="" title="" width="150" /><br />キャプション2</button> <button><span style="font-size:1.5em; line-height:1.2em; font-weight:bold; color:red; ">【 タイトル3 】</span><br /><img src="http://www.moshimo.com/item_image/0053600000002/3/r.jpg" alt="" title="" width="150" /><br />キャプション3</button>


なぜ“ズボラ”かと言うと、、、
横に3列並べる場合、
＜table＞タグだと下記の通り ややこしいのですが↓

＜table＞
　　＜tr＞
　　　　＜td＞【 タイトル1 】＜/td＞
　　　　＜td＞【 タイトル2 】＜/td＞
　　　　＜td＞【 タイトル3 】＜/td＞
　　＜/tr＞＜tr＞
　　　　＜td＞＜img src="【 画像 】" /＞＜/td＞
　　　　＜td＞＜img src="【 画像 】" /＞＜/td＞
　　　　＜td＞＜img src="【 画像 】" /＞＜/td＞
　　＜/tr＞＜tr＞
　　　　＜td＞【 キャプション1 】＜/td＞
　　　　＜td＞【 キャプション2 】＜/td＞
　　　　＜td＞【 キャプション3 】＜/td＞
　　＜/tr＞
＜/table＞

＜button ＞タグだと簡単だからです（笑）↓

＜button ＞
　　【 タイトル1 】＜br /＞
　　＜img src="【 画像 】" /＞＜br /＞
　　【 キャプション1 】
＜/button＞
＜button ＞
　　【 タイトル2 】＜br /＞
　　＜img src="【 画像 】" /＞＜br /＞
　　【 キャプション2 】
＜/button＞
＜button ＞
　　【 タイトル3 】＜br /＞
　　＜img src="【 画像 】" /＞＜br /＞
　　【 キャプション3 】
＜/button＞

【関連記事】
≫ 画像に文字入れ　ズボラ術　＜table＞タグ編

画像に文字入れ ズボラ術 ＜table＞タグ編

【もしも大学　特待生として受講中】

最近忙しくしており、
ドロップシッピングの作業もあまりできていません…
そんな私の「ズボラ術」。

画像に文字を入れたい場合、
いつもは Photoshop という画像編集ソフトを使っているのですが、、、
あ〜 も〜 時間がなーい!!! って時は、
＜table＞タグで、画像の上に文字を載せてしまうのです（笑）


【文字】 左上

これ美味しいのかな？ 一度飲んでみたいです。

<!-- ★画像の上に文字★ --><table><tr><td></td><td rowspan="2"><img src="http://www.moshimo.com/item_image/0004100000012/1/l.jpg" width="300" height="300" alt="" /></td></tr><tr><td colspan="2" align="left" valign ="top"><span style="padding:1px; font-weight:bold; font-size:24px; line-height:150%; color:red; background-color:gold;">これ美味しいのかな？<br />一度飲んでみたいです。</span></td></tr></table><!-- /★画像の上に文字★ -->


【文字】 中央

これ美味しいのかな？ 一度飲んでみたいです。

<!-- ★画像の上に文字★ --><table><tr><td></td><td rowspan="2"><img src="http://www.moshimo.com/item_image/0004100000012/1/l.jpg" width="300" height="300" alt="" /></td></tr><tr><td colspan="2" align="left" valign ="top"><span style="padding:1px; font-weight:bold; font-size:24px; line-height:150%; color:#ffffff; background-color:green;">これ美味しいのかな？<br />一度飲んでみたいです。</span></td></tr></table><!-- /★画像の上に文字★ -->


【文字】 右下

これ美味しいのかな？ 一度飲んでみたいです。

<!-- ★画像の上に文字★ --><table><tr><td></td><td rowspan="2"><img src="http://www.moshimo.com/item_image/0004100000012/1/l.jpg" width="300" height="300" alt="" /></td></tr><tr><td colspan="2" align="right" valign ="bottom"><span style="padding:1px; font-weight:bold; font-size:24px; line-height:150%; color:#ffffff; background-color:red;">これ美味しいのかな？<br />一度飲んでみたいです。</span></td></tr></table><!-- /★画像の上に文字★ -->