☆画像と説明文字を並べる時の枠タグ

説明写真
	近江妙蓮資料館 6/1～9/30開館
	花の構造(縦割り)

以前にも書いた枠タグです。
本文欄に枠がない「カスタムテンプレート」を使っている方には便利です。

一応tableの横幅を600に設定しています。
でも文字が増え、改行しないと横幅が広くなります。

文字を沢山書けるように増やしたい時は全体の幅を大きくするか、
画像の横幅設定(width="400" height="300")を小さくすれば
文字部分が増えます。(画像は400*300で作ってあります。)

枠線の色(#33cc99)、表題枠の高さ40、背景色白(#ffffff)、
文字サイズ(2)、色(blue)

＜TR＞＜TD＞～＜/TD＞＜/TR＞までが一行なので、
枠を増やしたい時はその部分をコピー・ペーストしてくだされば
幾らでも増やせます。


＜div align="center"＞＜TABLE width="600" cellpadding="3" height="20" cellspacing="0" border="1"＞＜table bordercolor="#33cc99" border="3"＞＜TR＞＜TD bgcolor="#ffffff" height="40" align="center" colspan="2"＞＜font size="2" color="blue" style="line-height:160%;"＞＜b＞説明写真＜/b＞＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD align="center" bgcolor="#ffffff" width="400"＞＜IMG src="https://blogimg.goo.ne.jp/user_image/06/88/9345d74c828739f8795c055aa98a881c.jpg" width="400" height="300" border="1"＞＜/TD＞
＜TD align="center" bgcolor="#ffffff"＞＜font size="2" color="blue" style="line-height:160%;"＞＜b＞近江妙蓮資料館
6/1～9/30開館＜/b＞＜/font＞＜/TD＞＜/TR＞
＜TR＞＜TD align="center" bgcolor="#ffffff" width="400"＞＜IMG src="https://blogimg.goo.ne.jp/user_image/67/28/030199e0ae1c0caeb4bfde356c637f6a.jpg" width="400" height="300" border="1"＞＜/TD＞
＜TD align="center" bgcolor="#ffffff"＞＜font size="2" color="blue" style="line-height:160%;"＞＜b＞花の構造(縦割り)＜/b＞＜/font＞＜/TD＞＜/TR＞＜/table＞＜/div＞＜/font＞

☆近江妙蓮で使った「マウスオン」のタグ

常蓮(単頭蓮)と妙蓮(多頭蓮…突然変異による)
<ロータス館前蓮 <烏丸半島の蓮 <噴水前の蓮1
<噴水前の蓮2	<近江妙蓮蕾	<近江妙蓮開花	<近江妙蓮凡そ満開

※下にずらっと書いたタグが上の「マウスオン」のタグ。
7/28付けの「クリックオン」画像のタグを書き換えました。

といっても「マウスオン」にし、枠線が入ったのと文字のフォント(色サイズ)を設定
中央揃えにしただけです。
日本語の説明文の部分から類推してどの部分か分かって頂けると思います。

ただ「マウスオン」で「javascript」を使用しているので、gooブログ用に
アドレスの前に「＜font style="color:white"＞＜＜」の記号とタグが入っています。
(HPに使用の場合は必要ありません。)

フォルダーに入れた画像は400*300、ご自分の画像アドレスをその部分に
貼り付けてください。

小さい画像サイズが縦列と横列で違うのは、table(横幅600)用数字合わせなので
お好みのサイズにされる時は縦横共書き換えて下さい。

＜div align="center"＞＜TABLE width="600" cellpadding="3" height="20" cellspacing="0" border="1"＞＜table bordercolor="#33cc99" border="3"＞＜TR＞＜TD bgcolor="#ffffff" height="40" align="center" colspan="4"＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞常蓮(単頭蓮)と妙蓮(多頭蓮…突然変異による)＜/b＞＜/font＞＜/TD＞＜/TR＞＜TR＞
＜TD＞＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/64/fd/25be02a618672589c64d9841f0b49605.jpg" width="106" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/64/fd/25be02a618672589c64d9841f0b49605.jpg'"＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞ロータス館前蓮＜/b＞＜/font＞＜/font＞
＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/27/49/eb1953f609884b5e6dd7030158376326.jpg" width="106" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/27/49/eb1953f609884b5e6dd7030158376326.jpg'"＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞烏丸半島の蓮＜/b＞＜/font＞＜/font＞
＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/0c/0a/4c3b7f86aa47836f19216fcaa3360960.jpg" width="106" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/0c/0a/4c3b7f86aa47836f19216fcaa3360960.jpg'"＞＜/font＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞噴水前の蓮1＜/b＞＜/font＞＜/td＞
＜/TD＞
＜TD colspan="3"＞＜img src="https://blogimg.goo.ne.jp/user_image/3c/20/96097050e4e22c523f519e486d4cbd82.jpg" name="big1"＞＜/TD＞
＜/TR＞
＜TR＞
＜TD＞＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/6e/ae/6729b1adadf7534d340781bfccae250c.jpg" width="106" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/6e/ae/6729b1adadf7534d340781bfccae250c.jpg'"＞＜/font＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞噴水前の蓮2＜/b＞＜/font＞＜/TD＞
＜TD＞＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/23/69/cebb877a9720028fe5850b16dd2e6080.jpg" width="106" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/23/69/cebb877a9720028fe5850b16dd2e6080.jpg'"＞＜/font＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞近江妙蓮蕾＜/b＞＜/font＞＜/TD＞
＜TD＞＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/65/fc/5441155316e6a648aa65c835e0139d66.jpg" width="120" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/65/fc/5441155316e6a648aa65c835e0139d66.jpg'"＞＜/font＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞近江妙蓮開花＜/b＞＜/font＞＜/TD＞
＜TD＞＜font style="color:white"＞＜＜img src="https://blogimg.goo.ne.jp/user_image/7c/89/05c1ae47d1cf154dfcbeb8953957a0d3.jpg" width="120" height="80" onmouseover="big1.src='https://blogimg.goo.ne.jp/user_image/7c/89/05c1ae47d1cf154dfcbeb8953957a0d3.jpg'"＞＜/font＞＜center＞＜font size="2" color="green" style="line-height:160%;"＞＜b＞近江妙蓮凡そ満開＜/b＞＜/font＞＜/TD＞
＜/TR＞＜/table＞＜/div＞＜/font＞