ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 ThickBoxで画像をポップアップ表示

準備は済んでいますか?

ThickBoxを使う準備が出来ていない場合は以下のページを参考に準備を行って下さい。

 ThiciBoxを使う準備
 https://aimix.jp/thickboxpre.html




ポップアップのサンプル

下のサンプル画像をクリックすると画像がポップアップ表示され、周囲が暗くなります。
画像をクリックするか、暗い部分をクリックすると元に戻ります。

サンプル(画像をクリック)





  リンク設定の変更

画像へのリンクを設置します。
リンクはテキストでも画像でも良く https:// から始まるURLでも結構です。

※ リンク方法については省略させて頂きます。



次に対象のリンクを右クリックし 「リンクの設定」 を選択します。





スタイルをクリックします。





「定義済みクラスの指定」 に thickbox と入力してOKボタンを押せば完了です。





備考

複数ある場合は 「リンクの設定」 → 「スタイル」 → 「定義済みクラスの指定に thickbox を入力してOKボタン」
の手順を対象のリンクに対して行います。
「定義済みクラスの指定」が、 thickbox と設定されているリンクがポップアップの動作をします。
これを設定していないリンクは通常通りの動作をします。






  動作確認

以上の操作でリンク先の画像がポップアップ表示されるようになりました。
「プレビュー」 からリンクをクリックして確認してみましょう。






  注意事項

thickbox.css を適用すると全体へ適用されるマージンとパディングが0になります。
thickbox.css を編集して値を変更するか、思った表示にならない場合は当該部分の属性から
マージンとパディングを修正する必要があります。

例えば リストを挿入した際に先頭の ・ が無くなってしまう等です。
この場合は <UL> にマージンとパディングを 10 と設定してやる事で回避できます。








| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved