ソースの説明その２
この■色の部分がサンプル ソースです。
この■色の部分がソースの説明です。
ここで利用してある一部タグの簡単な説明です。
各タグの説明は、『その１』をご覧ください。
この■色の部分がソースの説明です。
ここで利用してある一部タグの簡単な説明です。
各タグの説明は、『その１』をご覧ください。
自宅で確認するためには無いとページは表示されませんが、
楽天市場では、この部分から↓が自動的に削除されるようです。
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞サンプル＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ ＢＧＣＯＬＯＲ＝"#CCFFFF" ＴＥＸＴ＝"#0000FF" ＬＩＮＫ＝"#0000FF" ＡＬＩＮＫ＝"#0000FF" ＶＬＩＮＫ＝"#0000FF"＞
ここまで、↑削除されます。
これ以外にも自動的に削除されるものがあるようです。
＜Ａ ＮＡＭＥ＝"ＴＯＰ"＞＜／Ａ＞ ⇒リンクの飛び先になります。
楽天市場では、この部分から↓が自動的に削除されるようです。
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞サンプル＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ ＢＧＣＯＬＯＲ＝"#CCFFFF" ＴＥＸＴ＝"#0000FF" ＬＩＮＫ＝"#0000FF" ＡＬＩＮＫ＝"#0000FF" ＶＬＩＮＫ＝"#0000FF"＞
ここまで、↑削除されます。
これ以外にも自動的に削除されるものがあるようです。
＜Ａ ＮＡＭＥ＝"ＴＯＰ"＞＜／Ａ＞ ⇒リンクの飛び先になります。
ＴＯＰへ
パソコンの表示サイズは、『幅８００×高さ６００』が、中心のようです。
この大きさに合わせると、画像一枚は、『６４０×４８０』になります。
これでは、画像があまりに大きいので、読込みに時間がかかり過ぎます。
画像サイズは最大でも、『３２０×２４０』ぐらいにしましょう。
この数値は、普通にデジカメから保存すると、『６４０×４８０』の５０％の大きさのようです。
もっと良いのは、『６００×４００』の方が良いです。こちらの方が、画像サイズの変更と幅に合います。
写真１枚用は、『３００×２００』にします。
写真２枚用は、『３００×２００』で、横に２枚並べられます。
写真３枚用は、『２００×１５０』で、横に３枚並べるられます。
写真４枚用は、『１５０×１００』で、横に４枚並べられます。
理由は、
『楽天広場』等で、左側に、１００から１５０ぐらいのメニュー部分があるからです。
『メニュー部分１５０』と『画像部分６００』の合計で、約８００ぐらいになるからです。
左右のスクロールバーなどの部分を考慮しています。
基本説明
＜ＣＥＮＴＥＲ＞ ⇒ここから下を画面の中央に表示する
＜ＴＡＢＬＥ＞
ＷＩＤＴＨ＝"320" ⇒表の横幅
ＢＯＲＤＥＲ＝"10" ⇒表を立体的に見せるための外枠の幅。
ＢＧＣＯＬＯＲ＝"#FFFFFF" ⇒表全体の色 白色です。
ＣＥＬＬＳＰＡＣＩＮＧ＝"5" ⇒セルとセルの間隔
ＣＥＬＬＰＡＤＤＩＮＧ＝"5" ⇒内枠線と画像や文字との間隔
＜ＣＡＰＴＩＯＮ＞『ウコッケイ』＜／ＣＡＰＴＩＯＮ＞ ⇒表のタイトルを入れる
＜ＴＤ ＡＬＩＧＮ＝"ＣＥＮＴＥＲ"＞ ⇒画像や文字をセルの中央に表示する
＜ＩＭＧ ＳＲＣ＝"ＵＫＯＫＥＩ601.ＪＰＧ" ＷＩＤＴＨ＝"320" ＨＥＩＧＨＴ＝"240"
ＡＬＴ＝"成長したウコッケイ"＞ ⇒画像の名前
＜／ＴＤ＞ ⇒セルの終り
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を付ける行を追加する
＜ＴＤ＞雛はこんなに大きくなりました＜／ＴＤ＞ ⇒画像の説明
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒行と表の終り
＜／ＣＥＮＴＥＲ＞ ⇒ここまでを画面の中央に表示する終了
この大きさに合わせると、画像一枚は、『６４０×４８０』になります。
これでは、画像があまりに大きいので、読込みに時間がかかり過ぎます。
画像サイズは最大でも、『３２０×２４０』ぐらいにしましょう。
この数値は、普通にデジカメから保存すると、『６４０×４８０』の５０％の大きさのようです。
もっと良いのは、『６００×４００』の方が良いです。こちらの方が、画像サイズの変更と幅に合います。
写真１枚用は、『３００×２００』にします。
写真２枚用は、『３００×２００』で、横に２枚並べられます。
写真３枚用は、『２００×１５０』で、横に３枚並べるられます。
写真４枚用は、『１５０×１００』で、横に４枚並べられます。
理由は、
『楽天広場』等で、左側に、１００から１５０ぐらいのメニュー部分があるからです。
『メニュー部分１５０』と『画像部分６００』の合計で、約８００ぐらいになるからです。
左右のスクロールバーなどの部分を考慮しています。
基本説明
＜ＣＥＮＴＥＲ＞ ⇒ここから下を画面の中央に表示する
＜ＴＡＢＬＥ＞
ＷＩＤＴＨ＝"320" ⇒表の横幅
ＢＯＲＤＥＲ＝"10" ⇒表を立体的に見せるための外枠の幅。
ＢＧＣＯＬＯＲ＝"#FFFFFF" ⇒表全体の色 白色です。
ＣＥＬＬＳＰＡＣＩＮＧ＝"5" ⇒セルとセルの間隔
ＣＥＬＬＰＡＤＤＩＮＧ＝"5" ⇒内枠線と画像や文字との間隔
＜ＣＡＰＴＩＯＮ＞『ウコッケイ』＜／ＣＡＰＴＩＯＮ＞ ⇒表のタイトルを入れる
＜ＴＤ ＡＬＩＧＮ＝"ＣＥＮＴＥＲ"＞ ⇒画像や文字をセルの中央に表示する
＜ＩＭＧ ＳＲＣ＝"ＵＫＯＫＥＩ601.ＪＰＧ" ＷＩＤＴＨ＝"320" ＨＥＩＧＨＴ＝"240"
ＡＬＴ＝"成長したウコッケイ"＞ ⇒画像の名前
＜／ＴＤ＞ ⇒セルの終り
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を付ける行を追加する
＜ＴＤ＞雛はこんなに大きくなりました＜／ＴＤ＞ ⇒画像の説明
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒行と表の終り
＜／ＣＥＮＴＥＲ＞ ⇒ここまでを画面の中央に表示する終了
解りやすいように、簡単にしています。
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"画像アドレス"＞＜／ＴＤ＞ ⇒画像を入れるセル
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞画像の説明を入れる＞＜／ＴＤ＞ ⇒画像の説明の入るセル
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"画像アドレス"＞＜／ＴＤ＞ ⇒画像を入れるセル
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞画像の説明を入れる＞＜／ＴＤ＞ ⇒画像の説明の入るセル
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
ＴＯＰへ
解りやすいように、簡単にしています。
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
ＴＯＰへ
解りやすいように、簡単にしています。
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"３枚目画像アドレス"＞＜／ＴＤ＞ ⇒３枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜ＴＤ＞３枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒３枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"３枚目画像アドレス"＞＜／ＴＤ＞ ⇒３枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜ＴＤ＞３枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒３枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
ＴＯＰへ
解りやすいように、簡単にしています。
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"３枚目画像アドレス"＞＜／ＴＤ＞ ⇒３枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"４枚目画像アドレス"＞＜／ＴＤ＞ ⇒４枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜ＴＤ＞３枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒３枚目の画像の説明の入れる
＜ＴＤ＞４枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒４枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
＜ＴＡＢＬＥ＞ ⇒表の始り
＜ＴＲ＞ ⇒画像の入る行
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"１枚目画像アドレス"＞＜／ＴＤ＞ ⇒１枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"２枚目画像アドレス"＞＜／ＴＤ＞ ⇒２枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"３枚目画像アドレス"＞＜／ＴＤ＞ ⇒３枚目の画像を入れる
＜ＴＤ＞＜ＩＭＧ ＳＲＣ＝"４枚目画像アドレス"＞＜／ＴＤ＞ ⇒４枚目の画像を入れる
＜／ＴＲ＞＜ＴＲ＞ ⇒画像の説明を入れる行
＜ＴＤ＞１枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒１枚目の画像の説明の入れる
＜ＴＤ＞２枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒２枚目の画像の説明の入れる
＜ＴＤ＞３枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒３枚目の画像の説明の入れる
＜ＴＤ＞４枚目の画像の説明を入れる＞＜／ＴＤ＞ ⇒４枚目の画像の説明の入れる
＜／ＴＲ＞＜／ＴＡＢＬＥ＞ ⇒表の終り
ＴＯＰへ
自宅で確認するために必要ですが、
楽天市場では、この部分から↓は自動的に削除されるようです。
＜／ＢＯＤＹ＞＜／ＨＴＭＬ＞
ここまで、↑削除されるようです。
楽天市場では、この部分から↓は自動的に削除されるようです。
＜／ＢＯＤＹ＞＜／ＨＴＭＬ＞
ここまで、↑削除されるようです。
© Rakuten Group, Inc.
