- ベストアンサー
ホームページ作成。メニューボタンについて
- ホームページ作成中にメニューボタンの使い方についてわからない
- テンプレートではボタンを押すとメインページまたはレフトページに本文が表示される仕組み
- メニューを押すとレフトページとメインページの両方に本文を表示する方法を知りたい
- Lasku
- お礼率37% (72/190)
- その他（インターネット・Webサービス）
- 回答数8
- ありがとう数9
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
完成して良かったです。(^-^* クリックでメニューを表示するのは、おそらくJavaScriptか Flashを使っていると思います。 JavaScriptの場合、Q&Aで答えを表示するのにも使われて いるようです。 ・クリックでツリーメニューを表示 http://www.openspc2.org/reibun/javascript/mouse/006/ ※IE対応、Firefoxでも動作 http://www.openspc2.org/reibun/javascript/mouse/063/ ※Safari、Netscapeにも対応、Firefoxでも動作 上記のサンプルでは「＋」にリンクを貼っていますが、 文字の替わりに<img src="ファイル名" ～>という画像 のタグをリンクのタグで囲むと、画像クリックでメニュー が表示されます。 <img>タグの説明 http://www.tohoho-web.com/html/img.htm <a>タグの説明 http://www.tohoho-web.com/html/a.htm ・以下はQ&Aなどに使えそうなタイプです。 http://www.openspc2.org/reibun/javascript/mouse/008/ 今回紹介したサンプルがイメージしたのと違う場合は、 見本になるページのURLを添えて質問した方が適切な 回答がつきやすいと思います。 私はJavaScriptなどは書けないので、たぶん分からない と思います。(^^;
その他の回答 (7)
- koma30007
- ベストアンサー率87% (173/198)
すみません。ケアレスミスです。(^^;A 「target="_top"」です。 <li><a target="_top" href="fream.html">Saori</a></li> で大丈夫なはずです。 余計な時間を掛けさせてすみませんでした。 これは関係ありませんが、フレームページ用のドキュメント タイプ宣言は正しくは以下になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> ※各フレーム内に読み込んで表示させているページの 方は、以下で問題ありません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> それから、次のタブの最後の部分の「 /」(スペース スラッシュ)はXHTMLの記法です。 HTML4.01では必要ありませんので、正しくは次のように なります。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link href="style.css" type="text/css" rel="stylesheet"> それでは、失礼しました。(^^;
お礼
有り難うございます！！無事に完成いたしました！ ながながとお付き合いしてくださって本当に有り難うございます！ その他細かい説明なんかも有り難うございます！！ 助かりました！ これも関係ないのですが、たまにホームページで文字もしくは図 を押すとその文字・図のしたにズラッと文字(もしくはメニュー？）なんかが出てくる奴を見かけるのですが、私も上手く説明できないのですが・・・私のページでいうと・・・leftページに現れたPictというボタンを押すとそのPictの下に写真の名前なんかがズラッと現れる見たいな感じです・・・？ そういうののやり方とかってあるのでしょうか・・・？ なんか良く解らなくなってしまって申し訳ないです、 長々と本当にすみません・・・有り難うございました！！
- koma30007
- ベストアンサー率87% (173/198)
>mainのところだったら、説明のページ、とかを書いておけば良いのでしょうか？ リンク先(表示させるページ)のファイル名を書きます。 ※ページの途中を表示させる場合は、<a name="****"> で指定した文字列をファイル名の後ろに「#」に続けて 記載します。 例えば「Saori」のサブメニューの場合、「left.html#novel」 ですよね？ 「main」フレームの場合は、「target="main"」で「src=""」 には説明ページのファイル名を記述します。 <frame name="left" src="left.html#novel" scrolling="no"></frame> ※これは「left」という名前のフレームに「left.html」の 「novel」という位置を表示させる場合です。 >このフレームを上メニューのsaoriにリンク付け（？）すればいいのでしょうか？ はい、作成したフレームのページはそれぞれ別の名前で 保存して、上部のメニューからリンクを貼ってください。 「target="top"」にするのを忘れないでくださいね。
お礼
ありがとうございます、お返事が遅くなってしまって申し訳ないです、今やってみたのですが、 どうやら上手くフレームは作れた用なのですが、なぜか別窓 になってしまいます・・・どうしたらいいでしょうか？ ちなみに今上のメニュー（saori）のソースはこんな感じです <li><a target="top" href="fream.html">Saori</a></li> fream.html というのがsaoriのフレームです、ちなみに沙織のfreamのソースはこんなかんじです <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <link href="style.css" type="text/css" rel="stylesheet" /><style type="text/css"> <!-- body{overflow:hidden} .ta1{border-right:1px dashed #333333;} .ta2{ border-top:1px dashed #333333; border-bottom:1px dashed #333333; background:url(bg01.jpg) no-repeat 100% 100%; } --></style> </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p><frame name="left" src="left.html#novel" scrolling="no"></frame><frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"><frame name="menu" src="menu.html" scrolling="no"></frame><frame name="main" src="saori-kaisetu.html" scrolling="yes"></frame><frame name="bottom" src="bottom.html" scrolling="no"></frame></frameset><noframes></noframes></p> </frameset> <body> </body> </html> saori-kaisetu.html がsaoriの解説ページとなっています。 原因わかりますでしょうか？たびたびスミマセン・・・
- koma30007
- ベストアンサー率87% (173/198)
分かってきたということで良かったです。 >mainは一番大きい画面、今回私がsaoriのメニュー説明を書きたいと言っているメインページだと思われます。 はい、その通りです。 左と右に左右に分割してから、右側をさらに上下に 3分割している状態だったんですね。 右側の真ん中が「main」で、ここに説明のページを 表示させます。 この分割状態のフレーム用のページを作成するには、 以下の※を付けた部分を書き換えると良いです。 ここより前の部分に変更箇所はないはずです。 ※ただし、CSSを読み込むタグが必要な場合は追加 </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p>※←フレームの中になぜか<p>が・・・削除 <frame name="left" src="left.html※ここを各メニューに合わせて書き換え" scrolling="no"></frame> <frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"> <frame name="menu" src="menu.html" scrolling="no"></frame> <frame name="main" src="top.html※ここを各メニューに合わせて書き換え" scrolling="yes"></frame> <frame name="bottom" src="bottom.html" scrolling="no"></frame> </frameset> <noframes>※フレームに対応していないブラウザ用のコメント この中になら<p>や<div>を使っても大丈夫です。 </noframes> </p>※ここに先ほどのpの終了タグが・・・削除 </frameset> <body> </body> </html> それでは、頑張ってくださいね。
お礼
ありがとうございます！がんばります・・・ そして本当申し訳ないです、質問です。 <frame name="left" src="left.html※ここを各メニューに合わせて書き換え" scrolling="no"></frame> と書いてくださいましたが、※ここを各メニューに合わせて書き換え には、mainのところだったら、説明のページ、とかを書いておけば良いのでしょうか？ それと、このフレーム作成が成功したら（頑張ります） このフレームを上メニューのsaoriにリンク付け（？）すればいいのでしょうか？
- koma30007
- ベストアンサー率87% (173/198)
上部メインメニューからのリンクのターゲットで「left」 や「main」が指定されていますので、フレーム枠を 設定したページがあるはずです。 上、左下、右下のフレームに分割されたページが表示 されている状態で、ブラウザのアドレス欄はどのよう になっていますか？ http://アカウント名.web.fc2.com/ の場合、「index.html」または「index.htm」をコピー ※両方ある場合は優先表示されるはずの「index.html」 をコピーしてください。 http://アカウント名.web.fc2.com/*****.html の場合、「*****.html」をコピーしてください。 ※「*****」は確認した名前に置き換えてください。 これ以上はソースを確認しないと分かりませんので、 CSSではなく、フレーム枠を設定してあるはずのHTML ファイルのソースをお願いします。 フレーム分割して表示されている状態で、ブラウザの メニューからソースを表示させると、フレーム枠設定 ページのソースが表示されるはずです。 フレームページのファイル名が分からなかった場合は、 この方法で確認したソースをコピーしてください。 ※IE7の場合「表示」→「ソース」で表示されます。 ※Firefox3の場合「表示」→「ページのソース」です。 フレームの構造は次のようにして指定します。 参考知識としてご覧ください。 http://www.tohoho-web.com/html/frameset.htm ※<frameset>で分割指定 (「cols="50%,*"」とした 場合、左右分割です。例の場合は左側のフレームを50%、 右のフレームはその残り「*」です。) (「rows="50%,*"」とした場合、上下分割です。 例の場合は上のフレームを50%、下のフレームはその残り 「*」です。) 各フレームに読み込むページの指定は、<frame>タグで 行います。 <frame src="frame1.htm" name="frame1"> この場合、「frame1.htm」を「frame1」フレームに 読み込んで表示します。 ※既に使用しているので分かると思いますが、リンク をクリックした時に「frame1」フレームに別のページ を表示させたい場合は、 <a href="****.html" target="frame1"> という具合に、リンクのターゲットに「frame1」と 表示させるフレームの名前を指定します。
お礼
本当に丁寧なご説明有り難うございます、大分理解出来るようになってきました、 フレーム分割されたページのアドレスは http://アカウント名.web.fc2.com/index2.html となっていました、そのindex2のソースのそれらしいソースはこんな感じでした </head> <frameset contenteditable="true" border="0" framespacing="0" frameborder="0" cols="200,*"> <p><frame name="left" src="left.html" scrolling="no"></frame><frameset border="0" framespacing="0" rows="40,*,35" frameborder="0"><frame name="menu" src="menu.html" scrolling="no"></frame><frame name="main" src="top.html" scrolling="yes"></frame><frame name="bottom" src="bottom.html" scrolling="no"></frame></frameset><noframes></noframes></p> </frameset> <body> </body> </html> ソース内のleftは左側に表示されるより細かいメニュー、menuは上部分につねに表示されているメニュー、mainは一番大きい画面、今回私がsaoriのメニュー説明を書きたいと言っているメインページだと思われます。 参考ページまでご丁寧に有り難うございます、出来る限り自分でも今から進めてみようと思っています、本当に有り難うございます！
- koma30007
- ベストアンサー率87% (173/198)
>そのフレームを作らないと二つのページを同時に表示させることは出来ないんですよね はい、新しく作成するフレームページの上、左下、右下に 各ページを一度に読み込んで表示させます。 ※現在のフレームを解除して同じウインドウに表示する ので、別窓では開きません。 >FC2でいうとファイルマネージャーみたいなページを管理するような所でやれば良いのでしょうか？ >（ちなみに私は今までページを増やしたいときは元々あったテンプレートのページ達をコピーして増やしてファイルマネージャーに詰め込んで増やしていました） 今回もファイルマネージャーを使用して大丈夫です。 「http://アカウント名.web.fc2.com/」というアドレスで HPにアクセスした時に、何もしなくても「上、左下、右下」 にフレーム分割された状態で表示されますか？ その場合は、「index.html」をコピーして増やします。 ※上記のアドレス形式(ファイル名をつけない)でアクセス した時にフレーム分割されていない状態、または上下2分割 など違う分割状態で表示される場合は、アクセスした時に 3分割で表示されるページ(フレーム枠の設定ページ)を コピーして増やしてください。 >※「数値」「*または数値」の部分は、メインフレーム (index.html？)と同じにすると良いです。 と書いてくださったところの数値は、全体の画面（テンプレート全体）の大きさの数値でしょうか？ ちなみにこれは、各フレームの分割サイズを現在のHPの フレーム分割と同じ数値に変更すれば良かったのですが、 メインのフレームページ「index.html」(？)をコピーして 増やした場合は、数値を変更する必要はありません。 左下と右下の「<frame src="ファイル名"～>」のファイル 名の部分を変更すれば大丈夫です。
お礼
お返事有り難うございます、やり方がつかめたような気がするのですが、やっぱりコピーで増やすとフレームがついていなかったので 教えて頂いたソースで作ろうと思ったのですが 果たしてどれを何処に書けばいいのか今イチ解りませんでした、 私テンプレートの場合、どうやらstyle.cssと言うところで全部の設定をしているようです、 でももしかしてそれぞれのページ（上部分のメニュー・左メニュー・メインページ）にもサイズのソースは書いてあるかもしれませんが・・・ いちどstyle.cssのソースを載せてみた方が良いでしょうか？
- koma30007
- ベストアンサー率87% (173/198)
それでは、とりあえず一つ作成してみましょう。 まず、メニュー「Saori」をクリックした際に表示される フレームを作成します。 ※下のHTMLをコピー＆ペーストして使用してください。 ※HP作成ソフトのソース編集機能を使用するか、メモ帳 またはその他のテキストエディタを使用すると良いです。 ※変更が必要な箇所(数値、*または数値、ファイル名、 フレーム名)などを変更したら「saori-f.html」という 名前にして保存します。 ※「数値」「*または数値」の部分は、メインフレーム (index.html？)と同じにすると良いです。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>HPタイトル-Saori-(適当に変更してください)</title> </head> <frameset rows="数値, *または数値"> <frame src="上に表示されるメニューのファイル名.html" name="上のフレーム名" frameborder="0" noresize> <frameset cols="数値, *または数値"> <frame src="left.html#novel" name="left" frameborder="0" noresize> <frame src="info-saori.html" name="main" frameborder="0" noresize> </frameset> <noframes> <p>フレームに対応したブラウザでご覧ください。</p> </noframes> </frameset> </html> 次に、「Saori」のサブメニュー解説用のページを作成 して、「info-saori.html」という名前で保存してくだ さい。 ※違う名前で保存する場合は、先ほどのHTMLタグのソース の記述も変更する必要があります。(下記のsrc=""の部分) <frame src="info-saori.html" name="main" frameborder="0" noresize> 最後に、上部メニューからのリンクを書き換えます。 <li><a target="left" href="left.html#novel">Saori</a></li> 上のリンクを次のように変更します。 <li><a target="_top" href="saori-f.html">Saori</a></li> ※「_top」で現在のフレームを解除して、ページ全体に 「saori-f.html」を表示します。 「saori-f.html」は、左下のフレームにサブメニューの 「left.html#novel」を読み込み、右下のmainフレームに 解説用の「info-saori.html」を読み込んで表示します。 上のフレームには今までと同じようにメインメニューを 表示します。 これで希望のことが出来るはずですので、お試しください。 その他のページも「Saori」と同じ手順で作成してください。 1.メニューごとの新しいフレームページの作成 2.サブメニュー解説用のページ作成 3.リンクの訂正 分からない部分があったら、どの箇所が分からないのか 教えてください。
お礼
さっそくまたまたご丁寧に有り難うございます。 早速お言葉に甘えさせていただきたいとおもいます・・・本当にごめんなさい、 saoriを押すと出るフレームのフレームっていわゆる別窓みたいなものなのでしょうか？ そのフレームを作らないと二つのページを同時に表示させることは出来ないんですよね、私はFC2を使ってホームページを作っているのですが、 そのフレームはどうやってつくったら良いのか やっぱりいまいちつかめませんでした、 FC2でいうとファイルマネージャーみたいなページを管理するような所でやれば良いのでしょうか？ あ、でも何となく解ったような気もします。 （ちなみに私は今までページを増やしたいときは元々あったテンプレートの ページ達をコピーして増やしてファイルマネージャーに詰め込んで 増やしていました） それと ※「数値」「*または数値」の部分は、メインフレーム (index.html？)と同じにすると良いです。 と書いてくださったところの数値は、全体の画面（テンプレート全体）の大きさの数値でしょうか？ いまいち質問が解りづらくてすみません、 もう少し付き合ってくださると助かります、お手数おかけして申し訳ありません。
- koma30007
- ベストアンサー率87% (173/198)
各メニューごとに新しくフレームページを用意して、 上のメニューボタンから各メニューごとのフレーム ページにリンクすると良いです。 ※リンクのターゲットは「_top」にします。 ただし、左側のページ(各サブメニューからのリンク) は変更しないでください。今まで通りに「main」を 指定した状態にして置きます。 各メニューごとに用意するフレームページは、次の ような内容で作成してください。 ※このようなフレームページをメインメニューの数 だけ用意します。 ※ただし、Mailはサブメニューがないようですので、 作成しなくても大丈夫です。上のメニューからの リンクもそのままにしてください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>HPタイトル</title> </head> <frameset rows="70, *"> <frame src="topmenu.html" name="menu" scrolling="auto" frameborder="0" noresize> <frameset cols="150, *"> <frame src="left.html#novel" name="left" scrolling="auto" frameborder="0" noresize> <frame src="info-novel.html" name="main" scrolling="auto" frameborder="0" noresize> </frameset> <noframes> <p>フレームに対応したブラウザでご覧ください。</p> </noframes> </frameset> </html> ※例は「Saori」というメニュー用のフレームページ にしてみました。 ※フレームの分割サイズとフレーム名は、現在使用 しているTOPのフレームページと同じにします。 ※上のフレームに表示するソース(メインメニュー)の ファイル名が分からないので、例では「topmenu.html」 としています。自分で作成したメインメニューのHTML ファイル名に変更してください。 ※「Saori」のサブメニュー説明用の本文ページとして 「info-novel.html」を用意した場合となっています。 これ以外のメニューの説明用ページも作成して用意 してください。 ※左側のフレーム「left」のソースと説明用のメイン フレーム「main」のソースは、各メニューに合わせて 変更してください。 ※現在はサブメニュー用のページが「left.html」だけ のようですが(違ったら補足お願いします・・・)、 各メインメニューごとにサブメニューのページを作成 して用意しても大丈夫です。 もちろん今のままでもどちらでも大丈夫です。
お礼
丁寧でわかりやすい説明を有り難うございます！とてもわかりやすい説明をしてくださってありがたいのですが、 なにぶん私が初心者なもので・・・やっぱり解らないことが多くて・・ 本当に無知で申し訳ないです、 koma30007さんのおっしゃる通り、leftページは一つしかなく、mainページはそれぞれに用意してある形です。 私がやりたい事を単刀直入（？）に言わせていただくと、 メニューボタンsaoriを押すとleftページにさらに細かいメニュー表示（完成しています）そしてmainページにその細かいメニューの解説を入れたいのです。 leftページはもうテンプレートをダウンロードしたときから出来ていて、saoriをおすと すぐ出てきます、でもmainページは変わりません、そこを私はなんとかして leftページと同時にmainページも変えたいんです。 saoriのメニュー解説用のmainページに表示するページはいつでも用意できる形にはなっています、 本当に同じようなことをなんどもなんども言っていてすみません、 もう一度教えてくださるとたすかります・・・
お礼
有り難うございます！何とかやり遂げる事が出来ました！ なんだか果たしてコレで良いのかは解りませんが取りあえず・・・ 大丈夫だと思います・・・本当に有り難うございました！ いまのところは取りあえずコレで質問解消です！ またまた質問が出てきてしまうかもしれませんが・・・ 本当に有り難うございました！！