- ベストアンサー
HPビルダー16 リストの増やし方
ホームページビルダー16にあるフルCSSテンプレート 店舗の中の洋菓子－アッシュブラウンを使用しています。ページのバナースペースには５つのボタン（リスト）が在り、もう一つ増やしたいのですが、どうしても上手くいきません。コピーをするとボタン（リスト）は増えるのですが、同じボタンが１つ増えるだけで、変更すると２個とも変更されてしまい、リストが増えたことになりません。詳しい方是非お教えください。よろしくお願い申し上げます。
- SRBC-NU
- お礼率92% (13/14)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
・タブは、＿に置換してあるので戻すこと。 ・文字コードはSHIFT_JIS ・画像は横幅:縦幅 = 2:1のもの(サイズはいくらでも良い) ・HTMLやCSSの書き方は自分で身につけること。 特にセレクタの書き方は重要です。 → http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html サンプルでは、タイプセレクタと子孫セレクタ、一意セレクタ、クラスセレクタしか使っていません。 ・リンク一つ一つの背景画像などの、細かい指定はしていません。 具体的にはスタイルシートを次のように書きます。(HTMLは弄らない) #contentTable ol li a[href="./ABC.html"]{background-image:url(画像のURL);} #contentTable ol li a[href="./EFG.html"]{background-image:url(画像のURL);} そのときは、下の部分も書き換える #contentTable ol, #contentTable ol li, div.footer div.nav ol, div.footer div.nav ol li{ ＿display:block;list-style:none;margin:0;padding:0;/* text-align:center;*/ } #contentTable ol li{ ＿width:200px;/* height:50px; */background-color:gray;/* line-height:50px; */ ＿float:left;margin:10px 20px; } 不要な部分は/* ～ */ でコメントアウト <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} body{padding-left:200px;} div.section{background-color:rgb(200,200,255);} div.header h1, div.footer div.nav{ ＿width:200px;left:0;position:fixed; ＿background-color:silver; } div.header h1,div.footer div.nav,div.footer div.nav a{color:white;} div.header h1{top:20px;height:200px;} div.section p.mainImage img{display:block;width:100%;height:auto;} #contentTable ol, #contentTable ol li, div.footer div.nav ol, div.footer div.nav ol li{ ＿display:block;list-style:none;margin:0;padding:0;text-align:center; } #contentTable ol li{ ＿width:200px;height:50px;background-color:gray;line-height:50px; ＿float:left;margin:10px 20px; } #contentTable hr{visibility:hidden;clear:left;} div.footer{clear:left;} div.footer div.nav{bottom:0;min-height:200px;} div.footer address{position:absolute;top:0;right:10px;width:90%;text-align:right;} div.section h2,div.footer h2,div.footer h3{display:none;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p class="mainImage"><img src="./images/test.png" width="600" height="300" alt="さまざまなキーホルダー"></p> ＿＿<div id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="./ABC.html">ABC</a></li> ＿＿＿＿<li><a href="./EFG.html">EFG</a></li> ＿＿＿＿<li><a href="./HIJ.html">HIJ</a></li> ＿＿＿＿<li><a href="./KLM.html">KLM</a></li> ＿＿＿＿<li><a href="./NOP.html">NOP</a></li> ＿＿＿＿<!-- 自由に増減できる --> ＿＿＿</ol> ＿＿＿<hr> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="index.html">TOP</a></li> ＿＿＿＿<li><a href="./product">PRODUCT</a></li> ＿＿＿＿<li><a href="./future">FUTURE</a></li> ＿＿＿＿<li><a href="./profile">PROFILE</a></li> ＿＿＿＿<li><a href="./contactUs.html">CONTACT US</a></li> ＿＿＿＿<!-- 自由に増減できる --> ＿＿＿</ol> ＿＿</div> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どうも、基本的な部分の知識が足りないようで・・ idは文書の中で、一意でなければなりませんから、idも変えなきゃだめです。 ・・というかそもそもidはなくても良いのですが・・・そうなると、いまの実力では、ますます訳がわからなくなるでしょう。 ビルダーのようなWebオーサリングツールを使う前提として、「(テキストエディタで作成する人以上に)ＨＴＭＬやＣＳＳのしっかりした知識が必要なのです。」--スーパーカーに乗るときには普通の車を運転する人以上に車に対する知識が必要なのと一緒です。それらがなくても・・・・というのは、とんでもない誤解です。 [本当に基本的なこと] HTMLとは、文章を読み解き、それを構成する[要素]に分解し、その要素が何であるかをタグを使って【文書構造を】マークアップするマークアップ言語(Text Markup Language)です。たとえば見出しでしたら<h1>ここは見出し</h1>、<p>ここはひとつのひとつの段落</p>(p=paragraph--段落--)、ここは<strong>大事なところ</strong>と言う風に、用意されたタグで足りなければ「DIVやIDと併用することで、文書に構造を付加する」のです。 [この例でしたら] <div id="contentTable"><!-- div(汎用ブロック)に目次とわかるようclass名をつける --> <ol> <li><a href="./ABC.html">ABC</a></li> <li><a href="./EFG.html">EFG</a></li> <li><a href="./HIJ.html">HIJ</a></li> <li><a href="./KLM.html">KLM</a></li> <li><a href="./NOP.html">NOP</a></li> </ol> </div> とかにマークアップするでしょう。たったこれだけ、 ※ここがコンテンツの目次のリストであることなんてツールにはわかりませんから、著者自身が最適なタグを選ばなくてはなりません。オーサリングツールでは決してできませんね、なぜなら彼は文書を読んで内容を理解する知能は持ち合わせませんから。人には簡単なことです。使うタグなんて高々数十個--中学校で学んだ英単語は２,０００語--- [デザイン] こうしてマークアップされたHTMLのどの要素にどのような表現(プレゼンテーション)をするかをスタイルシートで記述していきます。 スタイルシートは div#contentTable{width:60%; margin:10px 10px 0 auto;・・・} ^^^^^^^^^^^^^^^^ ^^^^^ ￣￣ セレクタ {プロパティ:値;プロパティ:値・・・} と記述していきます。このセレクタ(選択子)は、オーサリングツールでは絶対に書くことは出来ません。(彼らには読解力がないから) たとえば、contentTableの内部にある子孫要素のa要素、すべてについてデザインを指定するとき、人でしたら率直に div#contentTable a{color:red;} /* 間の半角スペースは「その子孫」と言う意味 */ と書けば良いのですが、ツールにはそんな単純なことすらできませんから、HTMLに<a id="hogehoge">なんて余分なものをくっつけて、スタイルシートで #hogehoge{color:red;} としかできません。目次内のすべてのaについて指定したけりゃ <a id="hoge1" ***> <a id="hoge2" ***> <a id="hoge3" ***> <a id="hoge4" ***> として #hogehoge1{color:red;} #hogehoge2{color:red;} #hogehoge3{color:red;} #hogehoge4{color:red;} となっちゃいます。・・・・ ※オーサリングツールを使ってテンプレートのまま使うこと以上をされるなら、まずHTMLとCSSをしっかり身につけてください。すくなくともそれぞれの仕様書くらいは目を通しておきましょう。いずれの仕様書もツールのマニュアルに比較したら微々たる物です。 急がば回れ 次の回答に簡単なサンプルをあげておきます。自由に項目数を減らしたり増やして、そしてウィンドウ幅を広げたり縮めたり、あるいはディスプレイの解像度を増やしたり(Ctrl+－)減らして(Ctrl+＋)確認してください。そして印刷プレビューではどう表示されるかも・・ そしてなによりも、HTMLのどこに何が書いてあるかも一目瞭然ですから、HTMLもCSSも変更も楽です。当然、検索エンジンも理解してくれますし、なによりもシンプルです。そしてウェブ標準(HTML4.01strict+CSS2.1)です。 ★Another HTML-lint gateway ( http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。
お礼
ORUKA1951様 本当に丁寧なご説明有難うございます。基本的知識無しがそのままで、簡単に追加できると勘違いしておりました。これからＨＴＭＬデータの追加を慎重に行ってみます。昨夜追加をしていったところデザインがむちゃくちゃになり戻らなくなったので、コピーに追加していきます。初心者に手ほどき頂きまして本当にありがとうございます。結果を後ほどご連絡させて頂きます。よろしくお願い申し上げます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に、リスト項目を増やせばよいだけでは? <ol> <li><a href="[URL]">******/a></li> <li><a href="[URL]">******/a></li> <li><a href="[URL]">******/a></li> <li><a href="[URL]">******/a></li> <li><a href="[URL]">******/a></li> <li><a href="[URL]">******/a></li> </ol> と・・・
補足
ORUKA1951様 素早いご回答本当に感謝しています。お教え頂いた方法で修正してみるとトップページにリストは増えました。この修正は他のページにも連携させるか聞いてくるので、連携の方をオンしてみましたが、何故か他のリンクページには反映されずリストが出てきませんでした。そしてもっと解決が出来ない点が、例えば増やすリスト項目を商品カテゴリ4とします。 <li><a href="itemlist.html" id="banner-category3">商品カテゴリ4</a> そして新しく出来たリストのボタンを背景画像の編集＝＞合成画像の編集で商品カテゴリ4と修正すると何故か商品カテゴリ3のボタンも同時に商品カテゴリ4に変化してしまいます。リストを右クリックして出てくるタブにあるリスト数も（5）のままで、増えてくれません。なんだか狐につままれたようで、よく分かりません。なにか他に方法があるのでしょうか？？お忙しい中申し訳ありませんが、まだ対策が残っていればお教え頂けると幸いです。よろしくお願い申し上げます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ORUKA1951さま こんばんは 頂戴したサンプル確かに簡単にリストが自由に増やせます。これまた狐につままれた感じです。メーカーはこういうのをテンプレート集にしてくれると良いのにと思いました。ORUKA1951さまサンプルをテンプレートにしようかと思ったのですが、メーカーのテンプレートでほぼ完成状態なので仕方なく強引にリストを増やし進めています。ｈｔｍｌで１行増やしスタイルの設定 背景画像で似た画像を選び 高さがおかしくコピ－されるので高さを調整するとどうにか変更できました。仰るとおりHTMLとCSSをしっかり勉強します。この度は貴重な時間を沢山お使い頂き本当に感謝しております。有難うございました。