ホームページビルダー基本編
フレーム
- フレーム利用の注意点
- フレームページの仕組み
- フレームの作り方
- フレームのリンク(フレームに名前をつけよう)
- フレームの幅
- すでに作成したページをフレーム内に開く
- フレームの枠を表示しない
- ページタイトルをつける(公開した時、ウィンドウの上の方にアドレスが表示されてしまう方へ)
- フレームページを保存するときの注意
- フレームサンプル (別ウィンドウで開きます)
- インラインフレームとはこんなフレーム
- インラインフレームの挿入
- 外部からフレーム内にリンク
- インラインフレームのスクロールバーに色を付ける方法
- インラインフレームの枠線
インラインフレームとはこんなフレーム
また、上記のような見え方は、スタイルシートを利用することでもインラインフレームと同じような見栄えを実現することができます。
スタイルシート利用例//指定したサイズでテキストを表示させる
インラインフレームの挿入
V7以上の場合→メニューバーより、挿入→その他→HTMLタグ→IFRAME→挿入
V6.5以下の場合→ツール→タグ挿入→IFRAME→挿入
(どこでも配置モードの場合は、先にテキストボックスの挿入を行なってから上の操作を行なってください。)
その他の場合→メニューバーより、挿入→その他→HTMLタグ→ <IFRAME></IFRAME> と入力→OK
タグの挿入を行なうと、四角枠がページ中に現れます。
これが、インラインフレームです
しかし、このままでは使えないので、属性の変更を行います。
フレームをフォーカス枠にして、右クリック→属性の変更→インラインフレームの属性の編集画面が表示されます。
ここで、フレームの中に表示させたいファイルをリンクします。フレームの大きさは枠をドラッグして決めることができます。大きさの修正が必要ない場合もフレーム枠のサイズ設定の欄に値を入力してください。
(標準画面でフレーム枠を少しだけ動かすことによって「サイズ設定」の欄に値が自動的に入力されます)
ビルダーのバージョンによっては、プレビュー画面で確認はできませんが保存してブラウザで開くとキチンとリンクされているか確認できます。
外部からフレーム内にリンク
インラインフレームの属性画面でフレーム名に名前をつけます。(ビルダー2001の場合はURLを選択しないとフレーム名をつける事ができませんので先にURLの選択を行ってください。)
例えば、abcという名前のフレーム名をつけたとします。
あとは、普通にフレーム作成時のリンクをはるようにすればいいのですが、ここで問題です。
本来だとビルダーでターゲット欄を選択するとき、先ほどつけたフレーム名が表示されるはずですが、ここでは表示されないバージョンもあります。その場合、直接、ターゲット欄にインラインフレームでつけたフレーム名を入力します。
インラインフレームのスクロールバーに色を付ける方法
フレーム内に表示させるファイルに色をつけるタグを設定します。
スクロールバーに色をつける
上のインラインフレームのスクロールバーの色が変更になるか確認してください。
リンクしているテストページでは赤に設定しています。バーの色が変わるかテストしてみてください。
インラインフレームの枠線を変更する方法
インラインフレームを作成すると
(フレーム内はインラインフレームのスクロールバーサンプルページを使用しています。)
と、上のように枠線がついてきます。
まずは、この枠を表示しないように設定します。ただし、その設定にはHTMLソースでの操作が必要になります。
frameborder="0" というタグを挿入します。
<IFRAME>タグの中に「" scrolling="AUTO" width="**"
height="**"」という箇所があるのでこの後へ、frameborder="0"と入力します。(属性の変更に「枠表示」という個所があります。この個所にチェックを入れると frameborder="1" とHTMLソース内に記述されます。この部分の"1"を"0"と書き代えても構いません。)
(width="**" height="**"はフレームのサイズを設定していない場合は表示されません。その場合はフレームを編集画面で少し大きくしたり小さくしたりすると自動的に設定されます。)
例)<IFRAME width="300" height="150" frameborder="0"
src="****.htm" scrolling="AUTO"></IFRAME>
上のようにframeborder="0" を挿入するとインラインフレームの枠線が表示されません。
次に、スタイルシートで枠を設定します。
インラインフレームの属性画面の下の方に「スタイル」というボタンがあるので、ここをクリックしてください。
そして、編集(4)を選択します。すると、スタイルの設定画面が表示されるので「レイアウト」の項目をクリックし、枠線を設定します。枠線は、ボーダーの欄で設定できます。
スタイルシートでの枠設定はこちらを参考にしてください。
