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

　ThickBoxで同一ページ内の一部を表示

準備は済んでいますか？

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

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

ポップアップのサンプル

下のポップアップのサンプルの文字をクリックすると、このページ下部の、
「動作確認」の部分が表示されます。

>> ポップアップのサンプル

※ 暗い部分をクリックすると元に戻ります。

idの設定もしくは確認

1. HTMLソースを編集する場合

<div> や <table> などの開始タグに id="自分で決めたID" を付ければOKです。

<table> の場合は <table id="test1"> などとします。

このidは自分で好きなように決めて頂ければ良いですが、後で使用しますので
メモ帳などに貼り付けるなどして覚えておきます。

備考

<div> に IDを付けた場合 <div id="test1"> ～ </div> と divで囲われた範囲が
対象となって表示されますが、生のテキストは表示されないようです。
この場合は <p> ～ </p> で囲うなどすると表示されます。

2. ホームページビルダーのレイアウト部品を表示させる場合

ビルダーのレイアウト部品を表示させる場合は、idが自動的に設定されていますので、
「スタイルの設定」から idを確認しておきます。

「スタイルの設定」ページ下部に「定義済みIDの指定(1)」という項目があり、
ここにIDが入力されていますので、これをコピーします。
コピーしたIDは後で使いますので、メモ帳などに貼り付けておくか、
編集中のページのどこかへ一時的に貼り付けておきます。

3. 新たにレイアウト枠を挿入してIDを付ける場合

※ レイアウト枠は「ページ編集」画面上で確認しにくいので、
　　慣れていない場合は以下のとおり連続で操作した方が良いです。

「挿入」 → 「その他」 → 「HTMLタグ」とクリックします。

「DIV」をクリックして「挿入」、「閉じる」をクリックします。

すると以下のようにレイアウト枠が挿入され、選択された状態になります。

上記の状態のまま「編集」 → 「スタイルの設定」とクリックし、
「定義済みIDの指定(1)」のフォームに適当なIDを入力して下さい。

英数字で好きなIDを入力すれば良く、今回は test1 と入力しました。
入力したIDは後で使いますので、メモ帳などに貼り付けておくなどして覚えておきます。

リンクの設定

リンクを設置する文字列をマウスの左でドラッグした後に右クリックし「リンクの挿入」を選択します。
リンクは画像でも良いので、画像を右クリックして「リンクの挿入」でも結構です。

下の赤枠のようにファイル名を入力するフォームがありますので、
ファイル名の部分に以下の一行を入力します。

「URLへ」画面で追加する場合も同じく末尾に上の一行を貼り付けます。
上記の一行が入力されれば良いので、どちらで追加しても構いません。

ファイル名に入力した以下の赤字の部分を修正します。

#TB_inline?inlineId=test1&height=300&width=200

test1 の部分を上の手順で設定したIDに修正します。

width=300 の 300 はポップアップ枠の幅を示し、height=200 の 200 は高さを示します。
これらの値は好みに合わせて修正を行って下さい。

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

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

動作確認

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

表示されない場合は？

idに設定した値が2箇所で正しいか確認する

idで指定した範囲を表示しようとしますので、この値が間違っていると表示されません。

div内に含まれる内容がテキストだけの場合

HTMLソースを直接編集した場合で div に id を設定した場合、
生のテキストがあると、その部分は表示されません。
例えば、

<div id="test1">
あいうえお
</div>

となっていた場合あいうえおと表示されて欲しいのですが表示されません。
この場合は以下のように <p> などで囲ってやると表示されます。

<div id="test1">
<p>あいうえお</p>
</div>