|
リンク設定の変更 |
htmlページへのリンクを設置します。
リンクはテキストでも画像でも良く https:// から始まるURLでも結構です。
ポップアップする枠は幅や高さが調節できますが、インラインフレームで表示しますので、
表示するhtmlページが大きいとスクロールバーが表示されます。
※ リンク方法については省略させて頂きます。
次に対象のリンクを右クリックし 「リンクの設定」 を選択します。

下の赤枠のようにファイル名が表示されている部分がありますので、
ファイル名の後に以下の一行を追加します。
「URLへ」画面で追加する場合も同じく末尾に上の一行を追加します。
上記の一行が追加されていれば良いので、どちらで追加しても構いません。

追加後は以下の赤枠のような状態になります。
width=300 の 300 はポップアップ枠の幅を示し、height=200 の 200 は高さを示します。
これらの値は好みに合わせて修正を行って下さい。

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

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

|
動作確認 |
以上の操作でリンク先のリンク先のページがポップアップ表示されるようになりました。
「プレビュー」 からリンクをクリックして確認してみましょう。
|
注意事項 |
thickbox.css を適用すると全体へ適用されるマージンとパディングが0になります。
thickbox.css を編集して値を変更するか、思った表示にならない場合は当該部分の属性から
マージンとパディングを修正する必要があります。
例えば リストを挿入した際に先頭の ・ が無くなってしまう等です。
この場合は <UL> にマージンとパディングを 10 と設定してやる事で回避できます。
|