フレーム

私はフレームが分からなくて、ずいぶん長いことフレームを避けていました。でも逃げてばかりはいられないので、色々のページで勉強してみたら、思ったより簡単で、使いやすいんです。分からなかったのは、教えるほうの説明が、分かってる人向けだったからではないでしょうか?ここでは、ちょっと視点を変えてみましょう。

 

 フレームにはフレームセットが必要

PageMill でフレームのあるページを作るには、元にするページの右、上、下にカーソルを持っていって、option ボタンを押しながらドラグします。その結果できた空白部分に、予め用意しておいたページを挿入し、フレームセットに名前をつけて保存します。取りあえず私は「フレームセット」と呼ぶことにしますが、実際は何と言うのでしょうか?「フレームのセットを定義するHTMLドキュメントファイル」では長過ぎますね?

こうして作ったフレームセットは、ソフトではソースを見ることができません。こんな場合は表示モードを切り替えて、Internet Explorer などにすれば、そのソースを読むことができます。あるいはフレームセットのアイコンをインターネットエクスプロアラーやネットスケープのアイコンにドラッグ&ドロップしても同じ結果が得られます。このソースの内容を全てコピーして、メモや Simple Text にペーストして使うことにします。では適当に作ったページのフレームセットがどうなっているか見てみましょう。

 

<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0J Mac">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis">
<TITLE>
水からはじめよう</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=
0 BORDER=0 FRAMESPACING=0 ROWS="52,*">
<FRAME SRC="
frame.html" NAME="frame18542" SCROLLING=NO NORESIZE>
<FRAME SRC="
aqua.html" NAME="frame18544" NORESIZE>
<NOFRAMES>
<BODY>
このページを表示するには、フレームを表示できるブラウザが必要です。
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

 

 フレームセットに手を加える

これをメモ帳などにコピー&ペーストしたものをオリジナルと置き換えるか名前を変えるかして、アップロードすることができます。これにさらに手を加えることで、予想外の効果も期待できます。上のタグはソフトが作ってくれたものですが、青字の部分を変えていくわけです。何だと思うかもしれませんが、ブラウザの画面に切り替えて、ソースをコピー&ペーストすることに気づかないうちは不可能なことでした。検索対策のところでも紹介しましたが、具体的には次のようなもことができます。

フレームの名前を変えられます。ソフトでつくるとランダムな数字になり、これでは見た目が悪いと思ったら、格好のいい名前をつけてやれます。それぞれのフレームからのリンクにもこの名前が影響しますから、変更するなら早いほうが楽です。

METAタグが追加できます。検索エンジン対策のものも、自動で別ページへジャンプするものもOKです。フレームセットを主ページにしたときは、特に便利なものです。

<NOFRAME>から</NOFRAME>の間にも、大量の情報が入れられます。METAタグでは、検索エンジン側で文字数が制限されていますが、現実にはロボットはここに書き込んだ情報もちゃんと読み込んでくれます。ですから利用しないテはありません。勿体ないな、こんな秘密の方法を公開しちゃうなんて...。でも私も検索する側に回るんですから、どうせなら正確なヒットを期待したいですね?せいぜい利用して欲しいものです。

上のソースを加工したものが次のソースです。検索エンジンのロボットも、ばっちり拾ってくれるはずですよ。参考までにロボットでサンプルにしたものもここからご覧ください。<META>タグは入れてありませんが、毎日凄い数でヒットしています。

 

<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0J Mac">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis">
<META NAME="robots" CONTENT="welcome,follow">
<META NAME="keywords" CONTENT="水,磁石,磁界,温泉,尿素,塩化物,塩素,反磁性体,化粧水,伏流水,美容,健康,保湿">
<META NAME="description" CONTENT="コーヒーも麺も、そして生き物も、すべて水が命です。それは私たちの生命が水から生まれたから。もっと水のことを考えましょう。">
<TITLE>水からはじめよう</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=
0 BORDER=0 FRAMESPACING=0 ROWS="52,*">
<FRAME SRC="
frame.html" NAME="leftframe" SCROLLING=NO NORESIZE>
<FRAME SRC="
aqua.html" NAME="rightframe" NORESIZE>
<NOFRAMES>
<BODY>
このページを表示するには、フレームを表示できるブラウザが必要です。
コーヒーも麺も、そして生き物も、すべて水が命です。それは私たちの生命が水から生まれたから。もっと水のことを考えましょう。
このページでは、次の事項について取り扱っています。水、磁石、磁界、温泉、尿素、塩化物、塩素、反磁性体、化粧水、伏流水、美容、健康、保湿、その他。

</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

 

 

 フレームに大技を振るう

フレームでありながら一つしか開かない、と言うよりもフレームの形を借りて、サイト全体を一つのURLで覆ってしまうという大技と言うか荒技があります。そんなことは必要ないという人は、無視してください。

ホームページというものは、本質的にできるだけ多くの人に見てもらいたいものだと思います。私もそうですが、でも自宅のPCをサーバーに仕立ててると、そうばかりも言ってられません。アクセスが短時間に集中したりすると、極端に速度が遅くなることが懸念されますから。そこで一つのブレーキになるのが、入り口を狭くすることです。具体的には正面入口以外からはお断り、もしお気に入りなどから直行したら、いんぎんに玄関にお巡りいただくようにお願いします。その手段の一つとして、サイト全体を一つのフレームで覆ってしまい、肝心のページではリンク元を指定するという方法を組み合わせることで、アクセスをコントロールしています。もちろんそんなことしたくはありません。もっと多くの人に来て欲しいという願いは無くしていませんが、自宅サーバーという限界は厳しいものがあります。

次のHTMLソースは、sample.html というファイル名にしましょう。青字の部分は自由に変えてみてください。青字の<META>タグは、もし必要なら工夫してください。<NONRAMES></NONRAMES>をのセットは無くても問題ありません。文章や、あるいは煙幕になるようなものを入れるなら、<!---->の間に入れます。が、検索のためには、<NONRAMES></NONRAMES>を活かして、!---->を削除したほうがいいかもしれません。まだそこまで試してないので、と言うよりも、ロボットが巡回してくるのに何週間もかかるうえ、はたして結果がどうかを教えてくれないから、断言できないのです。

 

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis">
<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://platz.jp/***/index.html">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<TITLE>
快適ライフのメニュー</TITLE>
</HEAD>
<frameset frameborder="NO" border="0" framespacing="0">
<frame name="
mainpage" src="example.html">
</frameset>
<NONRAMES><BODY>
<!--
イヤ〜ン、覗かないで。ここには見せるようなもの、何も置いてないの。

そうそう、このページを開くには、フレーム対応のブラウザなんか必要ありません。
と言うか、フレームを使ってるふうを粧って、実はフレームとは一味違うことをしてます。
おもしろい方法でしょう?
もし試みるようでしたら、リファーラーとの組み合わせや、検索エンジン登録も視野に入れて、
存分に活用してください。
『ホームページのプチアイデア集』を参考にしてください。

-->
</BODY>
</NONRAMES>
</HTML>

 

サンプル

 
サンプルは上のソースのページです。NEXTを押してもアドレス欄のURLが変わらないでしょう?ですから2番目のページから「移動」を押すと、もとのページに戻ってしまいます。もちろん訪問者がソースを見て、ははぁんと気づけば、右クリックで「新しいウィンドウでページを開く」や「新しいウィンドウでリンクを開く」を選択することもできます。それでも、リンク元の指定は有効ですから、ある程度の目的は達せられたわけですね?

 

 

 メニューで別フレームに表示する

フレームの中にプルダウンメニューを置いて、クリックすると別のフレームの中が変わるとか、フレームを解除するというのをやりたいと思っていました。ある日メールでそういう質問を受けたので、同じ思いの人もいるものだと考えて、調べてみました。『JavaScript辞典』から大ヒントを見つけて送っておきましたが、その後上手くいったでしょうか?フレームのところの宿題とも関連しますから、ここでもやってみましょう。

まずフレームセット、ここでは次の index.html を作りますが、ソフトで作る場合は順番が変わりますね?まずメインページかフレームのページを作って、上下または左からドラッグしてページを挿入し、名前をつけて保存します。保存したものを Internet Explorer に切り替えて表示し、ソースをコピーしてメモなどにペーストしたものです。

 
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/HTML;CHARSET=x-sjis">
<TITLE>
メニューから別フレームへ</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=
0 BORDER=0 FRAMESPACING=0 ROWS="52,*">

<FRAME SRC="
frame.html" NAME="fue" SCROLLING=NORESIZE>
<FRAME SRC="
main.html" NAME="fshita" NORESIZE>

<NOFRAMES>
<BODY>
このページを表示するには、フレームを表示できるブラウザが必要です。
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

 

次にフレームに入れるメニューを作ります。ここでは frame.html と名前をつけて、次のようにしました。フレームを解除するページを作る場合は、そのページからメインかどこかへ戻れるようにリンクを考えておく必要がありましょう。これ以下のページのタイトルは、ブラウザではフレームセットのタイトルが表示されるので、入れる必要がありませんが、フレームを抜けたときのページでは必要になります。ここではメインページ以下の各ページは省略しますが、自分で試みる場合には適当なものを用意してください。このサンプルに手を加えるときは、大切なもので実験して、取り返しのつかないことになりませんように。

 
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/HTML;CHARSET=x-sjis">
<TITLE>
上フレーム</TITLE>
<SCRIPT LANGUAGE ="JavaScript">
<!--
function FAction(OSU) {
if (
OSU.FBetsu.selectedIndex == 0) { parent.fshita.location.href = "main.html" }
if (
OSU.FBetsu.selectedIndex == 1) { parent.fshita.location.href = "sample_A.html" }
if (
OSU.FBetsu.selectedIndex == 2) { parent.fshita.location.href = "sample_B.html" }
if (
OSU.FBetsu.selectedIndex == 3) { parent.fshita.location.href = "sample_C.html" }
if (
OSU.FBetsu.selectedIndex == 4) { parent.top.location.href = "top.html" }
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#
F3E7C2">
<FORM>
<SELECT NAME="
FBetsu" onChange="FAction(this.form)">
<OPTION>
メインページ
<OPTION> 

<OPTION> 

<OPTION> 

<OPTION>
フレームを抜けてトップページ へ
</SELECT>
</FORM>
</BODY>
</HTML>


サンプル


フレーム無しの目次

直前のページ

フレームを回復

 
SEO [PR] !uO z[y[WJ Cu