プロチューＮＡＶＩ http://proto.prochu.net
は、本体部分の右側に横幅をそろえた画像を配置し、同時にその画像の縦幅に合わせて、テキスト量を調整したテキスト群を回り込ませることで、３カラム風に表現しています。
ただし、画像の種類によって右側に配置し、テキストを回り込ませる方法がちょっと違います。
プロチューＮＡＶＩでは、まず一段目にセンター試験までの残日数タイマーを配置しています。（センター試験カウントダウン ）これはＧｏｏｇｌｅのガジェットです。ここではガジェットを右側に配置し、テキストを回り込ませる方法を紹介します。
このガジェットのコードは
<script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=200&h=200&title=%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC%E8%A9%A6%E9%A8%93%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
です。このセンター試験カウントダウンはコードを取得する際に、縦幅、横幅を設定できるので、表示サイズのカスタマイズは必要ありませんが、縦幅・横幅が設定できない場合でも、コードのwidth=、height=と書かれている部分（このコードでは青字の部分、めずらしくwidthではなくｗにheightではなくhになってます）を書き換えればサイズを変更できます。
Ｗ（たいていの場合widthと表現されます）が横幅、ｈ（たいていの場合heightと表現されます）が縦幅です。
さて、このコードをＱＨＭのｈｔｍｌ挿入ツール（ｈｔｍｌと書いてあるボタン）を使って、ＱＨＭに貼り付けても、ガジェットは左側に表示されてしまいます。ＱＨＭの右寄せボタンを使ってもＨＴＭＬコードはうまくいかないことが多いです。さらにその方法だと、テキストを左側に回りこませることができません。
そこで、このコードの前後に以下の表記を付け加えます。
<div style="FLOAT: right"><script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=188&h=180&title=&border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black&output=js"></script></div>
これで、ガジェットが右側に配置され、テキストが左側に回りこむようになります。
回り込みの解除は
#clear
で行います。最終的にこんな形になります
#html{{
<div style="FLOAT: right"><script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=188&h=180&title=&border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black&output=js"></script></div>
}}
（ここに左側に回りこませるテキスト）
#clear
このガジェットの横幅は、外側の枠線をのぞいた幅になるらしく、200ＰＸに設定するとちょっと長くなってしまったので、上記コードではw=188に設定してあります。w=200で設定すると、IEで左側のテキストとこのガジェットの下の画像が表示されない、という現象がおきました。
次回はリンクを張った画像を右側に配置します。
ただし、画像の種類によって右側に配置し、テキストを回り込ませる方法がちょっと違います。
プロチューＮＡＶＩでは、まず一段目にセンター試験までの残日数タイマーを配置しています。（センター試験カウントダウン ）これはＧｏｏｇｌｅのガジェットです。ここではガジェットを右側に配置し、テキストを回り込ませる方法を紹介します。
このガジェットのコードは
<script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=200&h=200&title=%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%BC%E8%A9%A6%E9%A8%93%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
です。このセンター試験カウントダウンはコードを取得する際に、縦幅、横幅を設定できるので、表示サイズのカスタマイズは必要ありませんが、縦幅・横幅が設定できない場合でも、コードのwidth=、height=と書かれている部分（このコードでは青字の部分、めずらしくwidthではなくｗにheightではなくhになってます）を書き換えればサイズを変更できます。
Ｗ（たいていの場合widthと表現されます）が横幅、ｈ（たいていの場合heightと表現されます）が縦幅です。
さて、このコードをＱＨＭのｈｔｍｌ挿入ツール（ｈｔｍｌと書いてあるボタン）を使って、ＱＨＭに貼り付けても、ガジェットは左側に表示されてしまいます。ＱＨＭの右寄せボタンを使ってもＨＴＭＬコードはうまくいかないことが多いです。さらにその方法だと、テキストを左側に回りこませることができません。
そこで、このコードの前後に以下の表記を付け加えます。
<div style="FLOAT: right"><script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=188&h=180&title=&border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black&output=js"></script></div>
これで、ガジェットが右側に配置され、テキストが左側に回りこむようになります。
回り込みの解除は
#clear
で行います。最終的にこんな形になります
#html{{
<div style="FLOAT: right"><script src="http://www.gmodules.com/ig/ifr?url=http://toybox.tawtaw.net/gadgets/center.xml&synd=open&w=188&h=180&title=&border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black&output=js"></script></div>
}}
（ここに左側に回りこませるテキスト）
#clear
このガジェットの横幅は、外側の枠線をのぞいた幅になるらしく、200ＰＸに設定するとちょっと長くなってしまったので、上記コードではw=188に設定してあります。w=200で設定すると、IEで左側のテキストとこのガジェットの下の画像が表示されない、という現象がおきました。
次回はリンクを張った画像を右側に配置します。