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

　『ＮＦＷのブログ教室』今回は前回のＳＡＭＰＬＥ・１の※サムネイル画像を増やすにはです。
　前回の紹介記事ではサムネイ画像は５つですが、６つ以上に増やすにはどうしたらいいでしょう。
　「table width="500"」とは、表示の最大幅が５００ピクセルということなので、これに合わせてサムネイル画像の大きさを決めます。もちろんこの値を大きくすればサムネイル画像の大きさも程々にして数を増やせますが、ブログをご覧になっている方のモニターの大きさも色々あると思いますので、このあたり幅サイズが適当ではないかと思います。繰り返しですがサムネイル画像の数が増えればその大きさは小さくなります。さらに上記ＳＡＭＰＬＥではサムネイル画像とサムネイル画像の間に適当なスペースがありますが、これも詰めて表示させた方が良いかと思います。

◎全てのサムネイル画像の大きさの値「width="90"」と「height="60"」の数値を小さくしてやります。ちなみに下のＳＡＭＰＬＥ・１’（サンプルワンダッシュ）では「width="80"」・「height="53"」にしてあります。※width＝画像の幅　height＝画像の高さ

◎サムネイル画像を僅かでも大きくする為、「CELLPADDING="2"」の値は"1"か"0"のほうが良いかもしれません。※cellpadding＝セル（舛）とセル内のデーターの余白。この場合「セルの中一杯の大きさの画像を入れましょう」と言う事。

◎

<TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="▲六枚目画像のＵＲＬ"width="変更した数値" alt="「タイトル6」" height="変更した数値"onmouseover="psr.src='▲六枚目画像のＵＲＬ'">></TD>

を五枚目の画像のＵＲＬの後の</TD>の後に付け加えます。

ＳＡＭＰＬＥ・１^’（サンプルワンダッシュ）

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

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="500" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#FF9900" bordercolordark="#FFFFFF" bgcolor="#FFD699"><tr><td align="center"><TABLE width="500" BORDER="0" align="center" CELLPADDING="2" CELLSPACING="0" bordercolor="#FF9900" bgcolor="#FFFFFF"><TR><TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="●一枚目画像のＵＲＬ"width="80" alt="「タイトル1」" height="53"onmouseover="psr.src='●一枚目画像のＵＲＬ'">></TD><TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="◆二枚目画像のＵＲＬ"width="80" alt="「タイトル2」" height="53"onmouseover="psr.src='◆二枚目画像のＵＲＬ'">></TD><<TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="▲三枚目画像のＵＲＬ"width="80" alt="「タイトル3」" height="53"onmouseover="psr.src='▲三枚目画像のＵＲＬ'">></TD><TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="★四枚目画像のＵＲＬ"width="80" alt="「タイトル4」" height="53"onmouseover="psr.src='★四枚目画像のＵＲＬ'">></TD><TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="■五枚目画像のＵＲＬ"width="80" alt="「タイトル5」" height="53"onmouseover="psr.src='■五枚目画像のＵＲＬ'">></TD><TD align="center"><font style="font-size:0px;color:#FFFFFF"><<img src="◎六枚目画像のＵＲＬ"width="80" alt="「タイトル6」" height="53"onmouseover="psr.src='◎六枚目画像のＵＲＬ'">></TD> </TR></TABLE></td></tr><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolorlight="#FF9900" bordercolordark="#FFFFFF" bgcolor="#FFD699"><tr><td bgcolor="#ffffff" align="center"><IMG src="▼最初に表示させたい画像のＵＲＬ" ALT="「最初に表示される画像のタイトル」" name="psr"width="500" height="375"></td></tr></table></td></tr></table></td></tr></table>

　サムネイル画像を６枚にしたＨＴＭＬは上記のとおりです。widthとheightの数値をさらに小さくしてもいいのですが、だいたい７枚位が美観上の限度かと個人的には思います。

※次回は縦長サムネイル画像をメイン画像の横に貼り付ける方法です。