NFWのブログ教室、『マウスオン』各種です・Part 2でもパセリ倶楽部さんの縦長の画像に使える小技の紹介です。
紹介されているHTMLのままではgooブログでは利用できませんので少し手を加えました。これをgooブログで使うには
これで使えるようになった筈です。画像の設置方法等はこちらから。
※次回はサムネイル画像を6枚以上に増やす方法をお伝えします。
|
紹介されているHTMLのままではgooブログでは利用できませんので少し手を加えました。これをgooブログで使うには
<table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table height="500" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#FF9900" bordercolordark="#FFFFFF" bgcolor="#FFD699"><tr><td align="center"><table width="375" height="500" border="0" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#FF9900" bordercolordark="#FFFFFF" bgcolor="#FFD699"><tr><td bgcolor="#ffffff" align="center"><IMG src="●一枚目画像のURL"ALT="「最初に表示される画像のタイトル」" name="psr002"width="375"height="500"></td></tr></table></td><td align="center"><TABLE height="500" BORDER="0" align="center" CELLPADDING="4" CELLSPACING="0"><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="●一枚目画像のURL" alt="「タイトル1」" width="70" height="90"onmouseover="psr002.src='●一枚目画像のURL'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="◆二枚目画像のURL" alt="「タイトル2」" width="70" height="90"onMouseOver="psr002.src='◆二枚目画像のURL'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="▲三枚目画像のURL" alt="「タイトル3」" width="70" height="90"onMouseOver="psr002.src='▲三枚目画像のURL'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="★四枚目画像のURL" alt="「タイトル4」" width="70" height="90"onMouseOver="psr002.src='★四枚目画像のURL'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="■五枚目画像のURL" alt="「タイトル5」" width="70" height="90"onMouseOver="psr002.src='■五枚目画像のURL'">></TD></TR></TABLE></td></tr></table></td></tr></table> |
これで使えるようになった筈です。画像の設置方法等はこちらから。
※次回はサムネイル画像を6枚以上に増やす方法をお伝えします。