トップページが左右または上下、あるいは複数の小さな画面に分割されているページを見かけます。
このようなページは「フレーム」というテクニックを使って分割されています。

例えば、左右に分割されているページの場合、以下の合計３つのページで構成されています。

• 左フレームに表示されているページ
• 右フレームに表示されているページ
• フレームの枠だけのページ (フレーム設定ページ)

今回は、既存のトップページをフレームページにする方法について説明します。もちろん、トップページ以外をフレームページにすることもできます。

※以下の画面は、ホームページ・ビルダー14のものですが、ほかのホームページ・ビルダーでも、ほぼ同様の操作で行うことができます。

■操作

※〔かんたん〕 では、以下の操作はできません。編集スタイルを 〔スタンダード〕 または、〔エディターズ〕 に変更してから操作を行ってください。

1. サイトのトップページ (ここでは「index.htm」) を開きます。

   

2. メニューバーから「フレーム」→「フレームの分割」→「縦に分割」を選択します。(「横に分割」 (「上下方向」) や「指定して分割」を選択することもできます。)

   「フレーム設定後の現在ページ」ダイアログが表示されます。

3. トップページのファイル名を「index.htm」のままにしておきたいので、[フレームなしに表示]を選択し、[OK] ボタンをクリックします。

   

   ※[フレーム内に表示]を選択した場合の動作については◆補足を参照してください。
   ２つの選択肢の意味の違いについては、以下のFAQを参照してください。

   →「フレームの分割」における２種類のメッセージの内容と違いについて

4. 今までのトップページと同じファイル名 (「index.htm」) のフレーム設定ページが作成され、白紙のフレーム内ページが２つ作られます。

   ページの内容はフレームなし画面に移動しています。

   

5. フレームの境界線をマウスでドラッグして調整します。(後からでもできます。)
6. フレームなし画面に移動したページの内容をフレーム内ページにコピーします。

   まず、[フレームなし] タブをクリックします。メニューバーから「編集」→「すべて選択」を選択し、続けてメニューバーから「編集」→「コピー」を選択します。

   

7. [ページ編集] タブをクリックして、右フレーム内をクリックし、メニューバーから「編集」→「貼り付け」を選択します。

   

8. 再度、[フレームなし] タブをクリックし、メニューバーから「編集」→「属性のコピー」→「ページの背景/文字色」を選択します。
9. [ページ編集] タブをクリックして、右フレーム内をクリックし、メニューバーから「編集」→「貼り付け」を選択します。

   

   背景色 (壁紙) や文字色がコピーされます。

10. フレームページを保存します。

    メニューバーから「フレーム」→「フレーム設定ページを上書き保存」を選択します。
    フレーム内ページが先に保存されることを知らせるダイアログが表示されます。

11. [OK] ボタンをクリックします。この時、見分けがつくよう保存されるページの色が変わります。

    フレーム内ページには「newpage1.htm」などの仮のファイル名が付いているので、「名前を付けて保存」ダイアログで任意のファイル名を付けます。

    

    ここでは左フレーム内のページを「mokuji.htm」というファイル名にして保存してみます。

    

    右フレーム内ページも同じ要領で任意のファイル名を付けて保存することができます。(分割されている枚数分、保存を行います。)
    ページに素材ファイルが貼り付けてある場合は「素材ファイルをコピーして保存」ダイアログが表示されます。(必要に応じて [上書き時に自動的にファイル名を変更する] にチェック マークを付けてください。)［保存］ボタンをクリックします。

    ※フレーム内ページだけを保存するには、保存したいフレーム内ページをクリックし、メニューバーから「ファイル」→「上書き保存」を選択します。
    初めて保存する場合には「名前を付けて保存」ダイアログが表示されます。

◆補足

手順 3. で [フレーム内に表示]を選択した場合

サイトのトップページ (「index.htm」) を開き、上図のように [フレーム内に表示]を選択すると、全く新しいファイル名のフレーム設定ページが作成され、今までのページはフレーム内ページになります。

これをファイル名で確認してみましょう。
フレーム設定ページ、フレーム内ページのファイル名はそれぞれタイトルバーで確認できます。
スラッシュ (/) の前がフレーム内ページのファイル名、スラッシュ (/) の後がフレーム設定ページのファイル名になっています。

左フレームをクリックしてカーソルを置きます。
タイトルバーを見ると、フレーム内ページは「index.htm」、フレーム設定ページは「framepage1.htm」になっているのがわかります。
フレーム分割する前のトップページ (「index.htm」) は、ファイル名はそのままでフレーム内ページになり、「framepage1.htm」という新しいフレーム設定ページが作成されたことになります。

右フレーム内ページのファイル名を確認するには、右フレームにカーソルを置きます。この場合は「newpage2.htm」です。

これに対して、手順 3. で [フレームなしに表示]を選択した場合は、フレーム設定ページが「index.html」になっているのがわかります。

■関連情報

→フレームページを保存したい

→「フレームの分割」における２種類のメッセージの内容と違いについて

▲ページの先頭へ戻る