『マウスオン』各種です・Ｐａｒｔ ２ーB

　今回の「ＮＦＷのブログ教室」『マウスオン』各種です・Ｐａｒｔ ２ーBでは縦長画像のサムネイルの増やし方です。パセリ倶楽部さんのサンプルでは５枚になっていますがこれを６枚以上に増やす方法です。

ＳＡＭＰＬＥ・２’（サンプルツウダッシュ）

<> <> <> <> <> <>

とりあえずＳＡＭＰＬＥ・２’（サンプルツウダッシュ）のＨＴＭＬを紹介します。

<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="●一枚目画像のＵＲＬ"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="●一枚目画像のＵＲＬ" alt="「タイトル1」" width="70" height="90"onmouseover="psr002.src='●一枚目画像のＵＲＬ'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="◆二枚目画像のＵＲＬ" alt="「タイトル2」" width="70" height="90"onMouseOver="psr002.src='◆二枚目画像のＵＲＬ'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="▲三枚目画像のＵＲＬ" alt="「タイトル3」" width="70" height="90"onMouseOver="psr002.src='▲三枚目画像のＵＲＬ'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="★四枚目画像のＵＲＬ" alt="「タイトル4」" width="70" height="90"onMouseOver="psr002.src='★四枚目画像のＵＲＬ'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="■五枚目画像のＵＲＬ" alt="「タイトル5」" width="70" height="90"onMouseOver="psr002.src='■五枚目画像のＵＲＬ'">></TD></TR><TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="◎六枚目画像のＵＲＬ" alt="「タイトル5」" width="70" height="90"onMouseOver="psr002.src='◎六枚目画像のＵＲＬ'">></TD></TR></TABLE></td></tr></table></td></tr></table>

　ＳＡＭＰＬＥ・１’（サンプルワンダッシュ）ではサムネイル画像の大きさを調節しましたが、今回はメインの画像を大きくすることでサムネイル画像を増やしてみました。サムネイル画像の大きさを「width="70"・ height="90"」のままで５枚から６枚に増やすには、メインの画像の大きさを「width="375"・height="590"」にしてやればＯＫです。

　さらにサムネイル画像を増やすには、

<TR><TD align="center" bgcolor="#FFFFCC"><font style="font-size:0px;color:#FFFFFF"><<img src="◎Ｘ枚目画像のＵＲＬ" alt="「タイトル5」" width="70" height="90"onMouseOver="psr002.src='◎Ｘ枚目画像のＵＲＬ'">></TD></TR>

上記ＨＴＭＬをメインの画像の大きさを伴って大きくして「◎六枚目画像のＵＲＬ'">></TD></TR>」の後に付け加えていきます。