HP上で写真自体を加工せずに丸く表示する方法

今日は、写真を加工してないのに、丸く表示する方法を紹介してみますね・・・

下の写真は、写真自体は一切加工してません。

　では、実際どのようにして・・・

　この様に惰円形に表示出来るのか・・・

　順を追って紹介してみますね・・・

では、手順を紹介します・・・
1. 先ず、表示させる写真・・・
2. ここで、もう一枚ＧＩＦ画像を用意しておきます・・・
  解りやすい様に、グレーの背景の上においていますが
  惰円形の部分を透明にしている画像です
3. もうお解り頂けましたようにこの2枚を重ねている訳です
4. では、どの様に重ねているのか・・・
  1. 先ず、テーブルを創ります・・・HTMLは下の通りですよね
    <TABLE>
    <TR>
    <TD>
    </TD>
    </TR>
    </TABLE>
  2. ＴＤの背景に①の写真を指定しておきます
    <TABLE>
    <TR>
    <TD style="background-image:url('写真のURL')">
    </TD>
    </TR>
    </TABLE>
  3. すると、この様に成っている訳です・・・
  4. 次に、②のＧＩＦ画像を乗せる訳です
    表示するサイズを指定しておきます・・・
    <TABLE>
    <TR>
    <TD style="background-image:url('写真のURL')">
    <img src="惰円形の画像のURL" width="200" height="300">
    </TD>
    </TR>
    </TABLE>
  5. すると、この様に成る訳です・・・
  6. これで完成とはいきません・・・？
    ⑤の写真の重なり具合を見て下さい。フレームの隅がなんか汚い感じでしょう・・・
    ＴＡＢＬＥの内側の文字余白部分をゼロにします・・・
    <TABLE cellpadding="0">
    <TR>
    <TD style="background-image:url('写真のURL')">
    <img src="惰円形の画像のURL" width="200" height="300">
    </TD>
    </TR>
    </TABLE>
  7. 下の写真を見て下さい。これでスッキリとしましたでしょ・・・
  8. これで完成しました。ちなみに枠を取り払ったらこんな感じです・・・
    ＧＩＦ画像をホームページのバックの色と合わせれば、惰円形に加工した写真のように見えますよ