• 締切済み

ホームページビルダー15 テンプレートの編集

ホームページビルダー15で自社のホームページを作成しています。 8月下旬までに完成させろとの社長命令により CSSプロフェッショナルテンプレートを使用しております。 初心者の為、HTMLやCSSの入門編参考書を読みながらの作業で、 なんとか、おおまかな所までは完成させられそうなのですが、 どうしても乗り越えられない壁ができました。 それはメニューリストをプルダウン化させることです。 自分なりにいろいろ調べてはいるのですが、 いまいち理解できません。 例えば、某掲示板で私と同じ質問があり、 回答者の方が  http://html.datura.jp/2009/07/pulldown.html を参考にして、CSSをコピーしてメモ帳に貼り付け→名前を保存→menu.css menu.cssファイルをホームページフォルダ内に移動する スタイルシートマネージャを起動→外部スタイルシートの追加→menu.cssを指定 これでhtmlファイル内に <link href="menu.css" rel="stylesheet" type="text/css"> が追加され、 CSSファイルがリンクとして呼び込まれます。 と回答し、質問者の方が「助かりました!」と納得されております。 ところが、私も同じようにしてみたところ 何も変わりません。 私の勉強不足もあるのだと思いますが、 そこから何かを変えたりしなければならないのでしょうか? ちなみに私は、言われたままにしているのですが… なんとか、テンプレートのHTMLとCSSをいじって プルダウン化を実現させたいです。 少し時間もなく、焦って質問させていただきました。 できれば、手順を追って、細かく教えていただけますと助かります。 ご面倒かと思いますが、何卒よろしくお願い申し上げます。

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.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" id="sixapart-standard" xml:lang="ja" lang="ja"> <head> <STYLE type="text/css"> <!-- ul#pulldown-menu, ul#pulldown-menu li, ul#pulldown-menu li ul, ul#pulldown-menu li ul li { margin: 0; padding: 0; background: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; zoom: 1; } ul#pulldown-menu a { color: #FFF; text-decoration: none; } ul#pulldown-menu a:link, ul#pulldown-menu a:visited { background: #000; } ul#pulldown-menu a:hover, ul#pulldown-menu a:active { background: #666; } ul#pulldown-menu li { float: left; position: relative; margin: 0 1px; width: 10em; height: 2em; font-weight: bold; line-height: 2em; } ul#pulldown-menu li a { display: block; width: 10em; height: 2em; text-align: center; } ul#pulldown-menu li ul li { float: none; margin: 0; font-weight: normal; } ul#pulldown-menu li ul, ul#pulldown-menu li ul li ul { display: none; } ul#pulldown-menu li:hover ul { display: block; position: absolute; z-index: 100; } * html ul#pulldown-menu li:hover ul { vertical-align: bottom; } ul#pulldown-menu li:hover ul li ul { display: none; } ul#pulldown-menu li ul li:hover ul { display: block; position: absolute; top: 0; left: 10em; z-index: 200; } --> </STYLE> </head> <body> <ul id="pulldown-menu"> <li><a href="#">検索エンジン</a> <ul> <li><a href="http://www.yahoo.co.jp">Yahoo!</a> <ul> <li><a href="http://image-search.yahoo.co.jp/">画像検索</a></li> <li><a href="http://search.yahoo.co.jp/video">動画検索</a></li> <li><a href="http://blog-search.yahoo.co.jp/">ブログ検索</a></li> <li><a href="http://map.yahoo.co.jp/">地図</a></li> </ul> </li> <li><a href="http://www.google.co.jp">Google</a> <ul> <li><a href="http://images.google.co.jp/">画像検索</a></li> <li><a href="http://video.google.co.jp/">動画検索</a></li> <li><a href="http://maps.google.co.jp/">地図</a></li> <li><a href="http://news.google.co.jp/">ニュース</a></li> </ul> </li> <li><a href="http://www.bing.com/">Bing</a> <ul> <li><a href="http://www.bing.com/?scope=images">画像検索</a></li> <li><a href="http://www.bing.com/?scope=video">動画検索</a></li> <li><a href="http://www.bing.com/?scope=news">ニュース</a></li> <li><a href="http://www.bing.com/maps/">地図</a></li> </ul> </li> </ul> </li> <li><a href="#">SEO</a> <ul> <li><a href="#">URL登録</a> <ul> <li><a href="http://submit.search.yahoo.co.jp/add/request">Yahoo!</a></li> <li><a href="http://www.google.co.jp/addurl/">Google</a></li> <li><a href="http://www.bing.com/docs/submit.aspx">Bing</a></li> </ul> </li> <li><a href="#">カテゴリ登録</a> <ul> <li><a href="http://dir.yahoo.co.jp/">Yahoo!</a></li> <li><a href="http://www.google.co.jp/dirhp">Google</a></li> </ul> </li> <li><a href="#">更新を通知</a> <ul> <li><a href="https://siteexplorer.search.yahoo.co.jp/">Yahoo!</a></li> <li><a href="https://www.google.com/webmasters/tools/">Google</a></li> <li><a href="http://www.bing.com/webmaster/WebmasterManageSitesPage.aspx">Bing</a></li> </ul> </li> </ul> </li> <li><a href="#">Validation</a> <ul> <li><a href="http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html">Another HTML</a></li> <li><a href="#">W3C</a> <ul> <li><a href="http://validator.w3.org/">HTML</a></li> <li><a href="http://jigsaw.w3.org/css-validator/">CSS</a></li> </ul> </li> </ul> </li> </ul> <br style="clear: both;" /> </body> </html> cssを外部ファイル化するなら <STYLE type="text/css">~</style>の~の部分をmenu.cssというファイルにする。<head>内に <link href="menu.css" rel="stylesheet" type="text/css"> を入れるです。

全文を見る
すると、全ての回答が全文表示されます。
  • Z31
  • ベストアンサー率37% (735/1957)
回答No.2

次のサイトの「JavaScript編」を参考にしてみてください。 http://www.wsb.jp/hpb/

azumakengo
質問者

補足

Z31様 夜分の回答、恐れ入ります。 私はJava Scriptの事に関しては無知で、 出来るかどうかはわかりませんが、 来週、出社した際には是非チャレンジしたいと思います。 頑張ります!

全文を見る
すると、全ての回答が全文表示されます。
  • siotan88
  • ベストアンサー率37% (176/466)
回答No.1

 メニューリストをプルダウン化とは、プルダウンメニューからのリンクのことですね。 HTMLソースタブからHTML編集をするとできます。  次のサイトにサンプルが示されていますので、アレンジしてみるとよいでしょう。 ぜひ、お試しください。

参考URL:
http://yume.hacca.jp/koiki/link/link14.htm
azumakengo
質問者

補足

siotan88様、迅速な対応、恐れ入ります。 私の言葉足らずな部分もあるのですが、 プルダウンではなく、正しくは「ドロップダウン」でした。 (メニューにカーソルを持って行くと、サブメニューが垂れ下がるようなやつです)。 しかし、このプルダウンの作り方も今後は参考になると思います。 ありがとうございます。 もし、お時間あるようでしたら、「ドロップダウン」のやり方も お教えいただけたらと思います。 お願いします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ホームページビルダー12でのプルダウンメニューの作り方を教えてください。

    ホームページビルダー12でプルダウンメニューをつくろうと思い、ホームページビルダー13スパテク182を見ながら、やっているのですが、さっぱりわかりません。 本を読むと、最初、スタイルシートマネージャを開くのですが、いきなり、style.css(link)が本には書かれているのですが、実際には表示されていないので、どっから出てきたのかわからないです。 あと、ホームページビルダー上のどこに、「スタイルクラス」ツールバーがあるのかわかりません。 仕方がないので、ググったのですが、プルダウンメニューの作り方がわかりません。 ホームページビルダーでのプルダウンメニューの作り方、わかる方いらっしゃいましたらおしえてください。 宜しくお願いします。

  • ホームページビルダーでダウンロードしたテンプレートを読み込む方法ってありますか?

    初心者の為説明が下手でしたらすいません。 ホームページビルダーを使ってHPを作ろうとしている所です。 デザインなども自信がなかったので、テンプレートをダウンロードしてきました。 ダウンロードしたファイルは基礎HTMLのファイルと、着せ替えCSS用のCSSファイルです。 このCSSをHTMLに読み込まなくてはならないと思うのですが、まずその過程をホームページビルダーで出来るかどうか、 また、初歩的ですが、そもそもの基礎HTMLをホームページビルダーホームページビルダーに取り込む…というか、読み込めるのかどうかがよく分りません。 ホームページビルダーでファイルを開くから、ダウンロードしたファイルを開こうとしましたが、indexなどのHTML形式のファイルしか、開けそうにありませんでした。 ですが、例えばこの方法だとindex、Menuとそれぞれ同じ様に改変していかないとならない気がします。 親子それぞれのページで同デザインで纏めたい時には、indexで表示されるタグをそれぞれのページにコピーするしかないのか、それとも何か他の方法があるのか…。 どのタイミングでCSSをHTMLに読み込んでいいかもよく分りません。 また、無事に読み込めた際に、それはindexのページだけにのみ反映となってしまわないのか、等疑問点が沢山です。 一度に沢山の質問で申し訳ないのですが、お分かりになる方、もしくは説明のあるサイトをご存じの方がいらっしゃいましたら、宜しくお願いします。 尚、ホームページビルダーのヴァージョンは10です。

  • Homepage managerでcssテンプレートは使えますか。

    Homepage managerでcssテンプレートは使えますか。 レイアウト用にcssのテンプレートを使ってみようと思い、他のサイトからダウロードしたのですが、Homepage managerでとりこんで使うことができるのでしょうか。スタイルシートファイルエディタを使うのかと思ったのですが、やり方がまったくわかりません。 また、css自体よくわかっていないのですが、このレイアウトの中に細かい表などを作成していくことも可能なのでしょうか。 ご教授よろしくお願い致します。

  • スタイルシートについて教えてください(ホームページビルダー11で)

    ホームページビルダー11を使用してWebページをつくっています。 (超初心者です) そこにCSSのnavigation menuのテンプレートを挿入したいと思っています。 ソース(タグ?)は以下です。 http://www.13styles.com/css-menus/style1/ 挿入自体はうまくいって、ちゃんと目的のようにできるのですが、スタイルシートにほかの設定をすると、表示が変わってしまいます。 ほかの設定とは、リンクやリンク済みのフォントを変更するということです。 (a:linkやa:hoverを入れると) テンプレートだと「font-size:11px;font-weight:bold」になるのですが、リンク関係のフォントをほかのサイズに設定すると、そちらの表示になってしまいます。 そうならないように、テンプレートの設定そのままに表示されるようにするにはどうしたらよいでしょうか? 教えてください。 宜しくお願いいたします。

  • HPビルダ16のメニュープルダウンについて

    ホームページビルダ16のフルCSSテンプレートを用いてHPを作成しています。 テンプレートにあるグローバルメニューをプルダウンメニューにしたいのですが可能でしょうか。 可能であれば、ご教授をお願いいたします。 なお、当方は、HPの作成(html等)について全くの素人です。 やさしい説明をお願いいたします。 以上よろしくお願いいたします。

  • ホームページビルダーcssテンプレート編集について

    ・ホームページビルダー17でのccsテンプレートを利用しての編集について教えてください。 当方HP編集ど素人です。   ビルダー17に入っているcssテンプレートをほぼそのまま利用してサイトを作成しています。 テキスト等はテンプレートのまま文書を打ちかえて替えられたのですが、画像を追加してテンプレートにない位置に画像を入れたのですが、転送してみると画像が表示されません。 追加で画像を増やした分や、css素材のレイアウトコンテナーを利用して画像を挿入した部分などがダメです。ビルダー内で、プレビューするとしっかり表示されているのに、転送すると表示されません。 画像のファイル名は半角英数小文字にしていますがダメです。画像は転送後の状態です。 どなたか詳しい方で素人でもわかるように教えていただける方いらっしゃいましたら何卒ご回答よろしくお願いいたします。

  • ホームページビルダー8でスタイルシートを使いたい。

    HTML初心者です。ホームページビルダーは簡単ですが何度か経験があります。ホームページビルダー8で他のサイトからのスタイルシートというものを使って簡単に作成したいのですが・・ http://wbakibaki.id25.com/ こちらのサイトでテンプレートをダウンロードさせて頂きました。 ですがその先が分かりません^^; 解凍はできたのですが開けると何個もフォルダがでてきてしまってその中のcssというフォルダの中のstyleという所を開けるとカスケードスタイルシートドキュメント(cssファイル)であるのですがそれを全部コピーしてHPBのHTMLソースに張り付けるのでしょうか? ちなみにHPBの白紙のページのHTMLソースが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> とあるのですがどこの部分にいれるのですか? 色々自分なりに調べましたがイマイチ分かりません・・ それでいれられたとしたらテンプレートで見た物とまったく同じような画面がでてきてそれを編集するのでしょうか?どなたか初心者でもわかるように教えていただけませんでしょうか? なにか間違っていたり、補足が必要ならいたしますので宜しくお願いします!

    • ベストアンサー
    • HTML
  • ホームページビルダー2000で「/」が「¥」に置き換わる

    ホームページビルダー2000でスタイルシートを下のように設定して保存すると、「/」の部分が勝手に「¥」に置き換わってしまいます。これをふせぐ良い方法はありませんでしょうか。 宜しくお願いいたします。 <LINK rel="stylesheet" href="http://xxx/xxx/xxx.css" style="text/css"> ↓保存すると <LINK rel="stylesheet" href="http:\\xxx\xxx\xxx.css" style="text\css">

  • ホームページビルダ18のCSSがおかしくなりました

    月曜日までに出さないといけないので助けてください。 ビルダー18でホームページを作りました。 ほとんど完成していたところですが、 最後にCSSを少し触って、でもやめて、保存したところ、 index.html はじめサイト全体が、CSSがない状態になりました! フルCSSというので作っていたので、もとのフルCSSのテンプレートも CSSがない状態(文字情報だけ)になっています。 バックアップを取っているので、そちらのCSSファイル5個を 作っていたサイトに入れてみても、CSSとリンクができていないのか、 CSSがおかしくなっているのか、index.htmlが文字だけの状態になります。 バックアップのファイルは触っていないのに、なぜ元に戻らないのでしょうか? どうしたらいいのでしょうか? 月曜日までに作らないといけないのでどうかお願いします。

  • [Dreamweaver8]テンプレートに外部CSSを適用→HTMLドキュメントにCSSが適用されないのは何故?

    Dreamweaver8初心者で、現在勉強中の者です。 Dreamweaverのテンプレート機能を使った、外部CSSの設定方法についてお尋ねします。 ディレクトリは現在、以下のような状態です。 [サイト -SampleWebSiteFolder-]    |―[Templates]    |   |―[style.css]    |    L―[template.dwt]    |     L[index.html] ※拡張子の無いものはフォルダを表します。 index.htmlファイルへCSSを適用させたいのですが、適用されないで困っています。 cssは、外部スタイルシートファイルを用意(style.css)し、テンプレート(template.dwt)に対して、CSSスタイルパネルの[スタイルシートを添付]ボタンより設定しています。 結果、テンプレート(template.dwt)に対してはCSSが適用されるのですが、HTMLドキュメント(index.html)にはCSSが適用されていない状態です。 テンプレートを用いて外部スタイルシートにてサイトを管理する場合、上記のケースにおける問題の原因は何でしょうか。 ちなみに、テンプレート[template.dwt]及び、HTMLドキュメント[index.html]の<head></head>内には、以下のソースが記述されています。 <link href="style.css" rel="stylesheet" type="text/css" />

このQ&Aのポイント
  • バンキングアプリで定期預金を預けてもアクセスジェイの定期預金には反映されない
  • アクセスジェイにバンキングアプリで預けた定期預金を登録しようとしたが、口座番号が問題となり登録できなかった
  • 窓口来店せずに対処する方法についてのアドバイスを求めています
回答を見る

専門家に質問してみよう