フレームを使ったホームページ構成は、検索エンジンとの相性が良くないため、ホームページ制作する場合は、極力使わないようにしています。他サイトからのリンクもトップページに張ってもらわなければならず、有用な情報への直リンクがしにくくなります。
Googleなどで、”フレーム SEO”などのキーワードで検索すると、上位に理由が書かれた解説ページがヒットしますので、興味のある方は、しらみつぶしに読んでみてください。
どうしてもフレームを使わないとならない場合の対策方法も上記のページに書かれています。フレーム内の素のhtmlファイルが表示されそうになったら、強制的に親フレームを表示させるようにjavascriptでプログラミングします。
通常のフレームページ例です。フレームを左右に分割してあります。
右サイドのコンテンツ1を新規で開くをクリックすると、main1.htmlが表示されます。
各フレームページのソース
index.html(フレームの枠になります)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>フレーム本体</title> </head> <frameset rows="*" cols="20%,*"> <frame src="left.html" name="leftFrame" /> <frame src="main1.html" name="mainFrame" /> </frameset> <noframes> <body> このブラウザーは、フレームがサポートされていません。 </body> </noframes> </html>
left.html(左サイドのソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>left.html</title> </head> <body> <ul> <li><a href="main1.html" target="mainFrame">コンテンツ1</a></li> <li><a href="main2.html" target="mainFrame">コンテンツ2</a></li> </ul> </body> </html>
main1.html(右サイドのコンテンツ1のソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main1.html</title> </head> <body> <p>コンテンツ1</p> <a href="main1.html" target="_blank">コンテンツ1を新規で開く</a> </body> </html>
main2.html(右サイドのコンテンツ2のソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main2.html</title> </head> <body> <p>コンテンツ2</p> <a href="main2.html" target="_blank">コンテンツ2を新規で開く</a> </body> </html>
つぎに強制的にフレームページを表示させるようにしたしたものです。
右サイドの”コンテンツ1を新規で開く”をクリックすると、先ほどとは違いフレームページが開かれます。
左サイドでコンテンツ2を表示状態で”コンテンツ2を新規で開く”をクリックした場合も、フレームページが表示され、右サイドには、コンテンツ2が表示されます。
ただし、Internet ExplorerのVersion 6、7、8などは、コンテンツ2が表示されず、コンテンツ1が表示されます。
これは、location.hrefでページ移動した場合、document.referrerプロパティの値が空のため、元ページが分からないためです。IEの仕様ですのでどうすることもできません。FireFoxやSafariは、正しく機能します。
ポイントは、各コンテンツのページに親フレームが存在しないときは、locationで親フレームに移動します。親フレームのページ(index.html)には、コンテンツから移動してきた場合、コンテンツをmainFrameに表示させるようにscriptで変更させます。
コンテンツ3(main3.html)は、bodyタグのonLoadイベントに記述した例で、条件判定の方法は異なりますが、やはり、親フレームが存在しないときは、親フレームへ移動するようになっています。
各フレームページのソース
index.html(フレームの枠になります)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>フレーム本体</title> <script language="JavaScript"> <!-- function ChanePage(){ var url = 'http://koubou.nin29.com/pics/heya/frame2/'; var thisPage = document.location.href; var prevPage = document.referrer; if(thisPage != prevPage){ if(prevPage.indexOf(url) > -1){ var file = prevPage.substr(url.length); if(file != 'left.html'){ parent.mainFrame.location.href = file; } } } } // --> </script> </head> <frameset rows="*" cols="20%,*" onLoad="ChanePage()"> <frame src="left.html" name="leftFrame" /> <frame src="main1.html" name="mainFrame" /> </frameset> <noframes> <body> このブラウザーは、フレームがサポートされていません。 </body> </noframes> </html>
left.html(左サイドのソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>left.html</title> </head> <body> <ul> <li><a href="main1.html" target="mainFrame">コンテンツ1</a></li> <li><a href="main2.html" target="mainFrame">コンテンツ2</a></li> <li><a href="main3.html" target="mainFrame">コンテンツ3</a></li> </ul> </body> </html>
main1.html(右サイドのコンテンツ1のソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main1.html</title> <script type="text/javascript"> <!--// if(window.parent && window.self){ if(window.parent.location == window.self.location){ window.parent.location.href="index.html"; } } //--> </script> </head> <body> <p>コンテンツ1</p> <a href="main1.html" target="_blank">コンテンツ1を新規で開く</a> </body> </html>
main2.html(右サイドのコンテンツ2のソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main2.html</title> <script type="text/javascript"> <!--// if(window.parent && window.self){ if(window.parent.location == window.self.location){ window.parent.location.href="index.html"; } } //--> </script> </head> <body> <p>コンテンツ2</p> <a href="main2.html" target="_blank">コンテンツ2を新規で開く</a> </body> </html>
main3.html(右サイドのコンテンツ3のソース)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main3.html</title> </head> <body onLoad="if (parent.frames.length==0) top.location='index.html'"> <p>コンテンツ3</p> <a href="main3.html" target="_blank">コンテンツ3を新規で開く</a> </body> </html>
インラインフレームの場合
インラインフレームも同様の方法で、iframe内のソース部分のみが表示されてしまうのを防ぐことができます。
各フレームページのソース
index.html(メインページになります)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>インラインフレーム本体</title> <script language="JavaScript"> <!-- function ChanePage(){ var url = 'http://koubou.nin29.com/pics/heya/frame3/'; var thisPage = document.location.href; var prevPage = document.referrer; if(thisPage != prevPage){ if(prevPage.indexOf(url) > -1){ var file = prevPage.substr(url.length); parent.mainFrame.location.href = file; } } } // --> </script> </head> <body onLoad="ChanePage()"> <ul> <li><a href="main1.html" target="mainFrame">コンテンツ1</a></li> <li><a href="main2.html" target="mainFrame">コンテンツ2</a></li> <li><a href="main3.html" target="mainFrame">コンテンツ3</a></li> </ul> <iframe src="main1.html" name="mainFrame" width="100%"></iframe> </body> </html>
main1.html(コンテンツ1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main1.html</title> <script type="text/javascript"> <!--// if(window.parent && window.self){ if(window.parent.location == window.self.location){ window.parent.location.href="index.html"; } } //--> </script> </head> <body> <p>コンテンツ1</p> <a href="main1.html" target="_blank">コンテンツ1を新規で開く</a> </body> </html>
main2.html(コンテンツ2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main2.html</title> <script type="text/javascript"> <!--// if(window.parent && window.self){ if(window.parent.location == window.self.location){ window.parent.location.href="index.html"; } } //--> </script> </head> <body> <p>コンテンツ2</p> <a href="main2.html" target="_blank">コンテンツ2を新規で開く</a> </body> </html>
main3.html(コンテンツ3)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>main3.html</title> </head> <body onLoad="if (parent.frames.length==0) top.location='index.html'"> <p>コンテンツ3</p> <a href="main3.html" target="_blank">コンテンツ3を新規で開く</a> </body> </html>
IT工房にんにく庵関連ページ
・ ホームページ制作