前回はGoogleのガジェットを本体部分の右側に配置し、その左にテキストを回り込ませる方法を紹介しましたが、今回はリンクボタンにした画像を右に配置し、テキストを回りこませる方法の紹介です。
ＱＨＭでは
#ref((ここに添付した画像ファイル名）,nolink,around,right,画像の説明);
という方法で、画像を右寄せし、テキストを回り込ませたり、
[[&ref((ここに添付した画像ファイル名),nolink,画像の説明);>リンク先]]
という形で画像をリンクボタンとして使用することができますが、
この両方を同時に行う（画像をリンクボタンとして使用し、その画像を右寄せ、テキストを回り込ませる）方法が見つかりません。
nolinkの部分をどうにかすれば、何とかなりそうなんですが、どうもうまくいきません。
そこで下記の表記で画像をリンクボタンとして使用し、その画像を右寄せ、テキストを回り込ませることにしました。
#html2(<div class="img_margin_right" style="float:right;">)
[[&ref(ここに添付した画像ファイル名);>リンク先]]
#html2(</div>)
（ここに回り込ませる文章を入れる）
#clear
これで画像をリンクボタンとして使用し、その画像を右寄せ、テキストを回り込ませることができます。
しかし、ページ内の画像数が少ないうちはよかったのですが、画像数が多くなってくるといくつかのブラウザで画像が表示されない、という問題が発生しました。
これはこのコードを多用したから発生したのか、単に画像数が多いと起こるのかはよくわかりません。ブラウザもＦＩＲＥ ＦＯＸやＣＨＲＯＭＥならきれいに表示されるのですが、ＩＥやＳＬＥＩＰＮＩＲでは画像落ちが多発するようです。
そこで、下のＨＴＭＬコードを使用して、サーバーから直接表示させるようにしました。
#html{{
<div style="FLOAT: right"><a href="（ここにリンク先）" title="（画像の説明）"><img src="（画像のあるアドレス+画像名）"></a></div>
}}
（ここに回り込ませるテキスト）
#clear
実際にはこんな感じになります。
#html{{
<div style="FLOAT: right"><a href="index.php?open_campus2009" title="大学オープンキャンパス日程一覧"><img src="/photo/oc_info.png"></a></div>
}}
（回り込ませるテキスト）
#clear
もちろんこの方法を使うには、通常のＱＨＭの画像の添付方法ではなく、サーバーに画像をアップロードする必要があります。
ぷろちゅーＮＡＶＩでは、
prochu.net/public_html/proto/ に photo というフォルダを作って、そこに画像をアップロードしています。
どうやら、画像のアドレスは、サブドメインより後から書き始めれば良いようです。サブドメインを使っていない場合は、public_htmlの後から書き始めます。
ロリポップやＸサーバーの標準のサービスであるＦＴＰを使えば、簡単にフォルダを作ったり、ファイルをアップロードできます。
注意しなければならないのは、ＱＨＭの画像添付では、ファイル名は日本語でも問題ないのですが、ロリポップやＸサーバーでは、日本語ファイル名をサポートしていない場合がある、ということです。
ですから、極力ファイル名には日本語を使わないほうが良いと思います。
次回は「リンクバナーを作る」です。