トップページから各ページへのリンク方法について

このQ&Aのポイント
  • 初めて作成するホームページで、トップページから各ページへのリンク方法が上手くいきません。
  • 最初にリンクを貼ったアイコンが囲まれた青い枠が消えず、他のアイコンからのリンク貼り付けができません。
  • ソースコードを確認しても解決策が見つからず、お力をお借りしたいです。
回答を見る
  • ベストアンサー

トップページから各ページにリンクできません

こんにちは。 お世話になります。 会社命令で、初めてホームページを作成しているものです。 表題にもあります通り、アイコン(と言うのでしょうか。ボタンと言うのでしょうか。「アクセス」などと書かれて、それを押すと、各ページに飛ぶようにする小さな画像です) から、各ページに飛ぶようにしたいのですが、上手くいきません。 一つ目のアイコンからは飛ぶように上手くリンクが貼れたのですが、二つ目以降、 が上手く貼れません。 最初にリンクを貼ったアイコンが青い枠で囲まれており、そのためか、 他のアイコンをドラッグして選択状態にしても、最初にリンクを貼った時の様に リンクを貼ることができないのです。 ページの他の画像、インラインフレーム等を選択しても、その青い枠は消えません。 どうすれば、この青い枠が無くなり、他のアイコンからもリンクを貼ることができるでしょうか? 私が入力したソースは、下記の通りになります。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>台湾</title> <style type="text/css"></style> </head> <body background="image/085.jpg"> <br>   <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> <p align="center"><img src="image/080527_pandafullife_main.jpg" alt="" height="312" hspace="100" width="672">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> </p> <div align="center">&nbsp; <b> <br> <big>&nbsp;+更新情報+</big>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> <br> </b></div> <p style="height: 17px;" align="center">  <iframe style="top: 600px; left: 650px; width: 457px; height: 121px;" src="image/inraflame3.html" name="" id="center" marginheight="3" frameborder="1" scrolling="yes"></iframe><a><br> <br> &nbsp;&nbsp;</a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html">&nbsp;</a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html"> </a><a href="aboutpagedate.html"><img alt="" src="image/02.gif" height="20" width="100"> <img alt="" src="image/07.gif" border="0" height="20" width="101"> <img alt="" src="image/04.gif" border="0" height="20" width="100"> </a></p> </body> </html> どなたか、お力を貸しては下さいませんでしょうか? 宜しくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • yumi0215
  • ベストアンサー率30% (1335/4411)
回答No.1

<a href="aboutpagedate.html"> <img alt="" src="image/02.gif "height="20" width="100"> <img alt="" src="image/07.gif " border="0" height="20" width="101"> <img alt="" src="image/04.gif " border="0" height="20" width="100"> </a> 該当箇所はこちらでしょうか。 まずこれではリンクが正しく貼られていません。 各アイコン画像ごとにリンクを指定する必要があります。 <a href="aboutpagedate.html"> <img alt="" src="image/02.gif "height="20" width="100"> </a> 画像の周りにでる青い線はリンクが張られていると出るものです。表示したくない場合は <img alt="" src="image/02.gif "height="20" width="100" border="0"> とします。

jiqimao80
質問者

お礼

丁寧かつ詳細なご説明、有難うございます。 おかげで、上手く貼りつけることができました! 本当に、有難うございました。

関連するQ&A

  • 題字の大きさが小さくなってしまいます

    こんにちは。 お世話になります。 会社命令により、生まれて初めてホームページを作成しているものです。 表題にも有りますように、ホームページの題字(と言うのでしょうか。ホームページの名前が書かれた文字列です)を、普通の文字と同じように入力し、その後、大きさを変え、希望通りの物を作成いたしました。 ですが、作成中の画面ですとちょうどいい大きさなのですが、「閲覧」を選んで表示された画面を見ると、文字のサイズが明らかに小さくなっており(約3分の1)、どうやっても大きさを変えることができません。 使用しているフォントが、対応していないものなのかとも思い、一般的なフォントでも試してみましたが、やはり、文字の大きさは小さいままで、作成画面と同じ大きさにはなりません。 下記が、私の入力致しましたソースです。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>台湾</title> <style type="text/css"></style> </head> <body background="image/085.jpg"> <br>   <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> <p align="center"><img src="image/080527_pandafullife_main.jpg" alt="" height="312" hspace="100" width="672">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> </p> <div align="center">&nbsp; <b> <br> <big>&nbsp;+更新情報+</big>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> <br> </b></div> <p style="height: 17px;" align="center">  <iframe style="top: 600px; left: 650px; width: 457px; height: 121px;" src="image/inraflame3.html" name="" id="center" marginheight="3" frameborder="1" scrolling="yes"></iframe><a><br> <br> &nbsp;&nbsp;</a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html">&nbsp;</a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html"> </a><a href="aboutpagedate.html"><img alt="" src="image/02.gif"  border="0" height="20" width="100"></a><a href="daiary.html"><img alt="" src="image/07.gif" height="20" width="100"></a><a href="aboutpagedate.html"><img alt="" src="image/04.gif"  border="0" height="20" width="100"></a></p> </body> </html> この中の、 <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> の「abc」という文字列を大きく、太いものとしたいともいます。 製作画面ですと、大きさは1.5cm四方、閲覧画面ですと5mm程です。 どなたか、お力を貸しては頂けないでしょうか? 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • css 背景画像(1つ)とリンク付き画像(複数)を中心に表示したい。(

    css 背景画像(1つ)とリンク付き画像(複数)を中心に表示したい。(超初心者です。) 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 *ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url **.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="**.gif" border="0"><br> <br><p style="text-align: center;"> <a href="**.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="**.jpg"></a><a href="**.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="**.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="**.jpg"><a href="**.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="**.jpg"></a><br></p> </div> </body></html>

    • ベストアンサー
    • HTML
  • ウインドウを狭めてもレイアウトが崩れない方法

    ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を3列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

    • ベストアンサー
    • HTML
  • HTMLタグ

    画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦5列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006">&nbsp;&nbsp; <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/apareru.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします

  • フレームの入れ方

    こんにちは、お世話になります。 ホームページ初心者です。 現在、会社命令で生まれて初めてホームページと言うものを作成しています。 上司に渡されたテキストを参考にして、やっているのですが、 以下にあげます事項が、どうしても反映されず、また、どの場所に必要なタグを入力すべきかが分かりません。 1、左脇に、縦長に、背景は白く、フレームを入れたい。 2、インラインフレームの背景を白くし、常にスクロールできるようにしたい。 以上です。 また、私が現在入力しているデータ(?)は、下記の様になります。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>台湾</title> <style type="text/css"></style> </head> <body background="image/085.jpg"> <br>   <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> <p align="center"><img src="image/080527_pandafullife_main.jpg" alt="" height="312" hspace="100" width="672">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> </p> <div align="center">&nbsp; <b> <br> &nbsp;+更新情報+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <br> </b></div> <p style="height: 17px;" align="center">  <iframe style="top: 600px; left: 650px; width: 457px; height: 121px;" src="image/flame.html" name="" id="center" marginheight="0" frameborder="1" scrolling="yes"></iframe><a><br> <br> </a></p> </body> </html> どなたか、お力を貸しては頂けないでしょうか。 ほとほと、困り果てております。 宜しくお願い致します。

  • フレームの入れ方が、さっぱりわかりません。

    こんにちは、お世話になります。 ホームページ初心者です。 現在、会社命令で生まれて初めてホームページと言うものを作成しています。 上司に渡されたテキストを参考にして、やっているのですが、 以下にあげます事項が、どうしても反映されず、また、どの場所に必要なタグを入力すべきかが分かりません。 1、左脇に、縦長に、背景は白く、フレームを入れたい。 2、インラインフレームの背景を白くし、常にスクロールできるようにしたい。 以上です。 また、私が現在入力しているデータ(?)は、下記の様になります。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>台湾</title> <style type="text/css"></style> </head> <body background="image/085.jpg"> <br>   <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> <p align="center"><img src="image/080527_pandafullife_main.jpg" alt="" height="312" hspace="100" width="672">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> </p> <div align="center">&nbsp; <b> <br> &nbsp;+更新情報+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <br> </b></div> <p style="height: 17px;" align="center">  <iframe style="top: 600px; left: 650px; width: 457px; height: 121px;" src="image/flame.html" name="" id="center" marginheight="0" frameborder="1" scrolling="yes"></iframe><a><br> <br> </a></p> </body> </html> どなたか、お力を貸しては頂けないでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか?

    色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか? <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか? 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • リンクバナーからリンクできません

    gooでのホームページをホームページビルダー6で作成しました。リンクバナーを貼ったのですがサイト上のバナーからリンクができません。ビルダーのプレビューではリンクできますし、サイト転送もできています。以下がサイトのソースです。どこが間違っているのか教えていただけますでしょうか。どうぞ宜しくお願い致します。また、PC歴が三ヶ月なのであまり専門用語は分りません。お手数をおかけ致しますがどうぞ宜しくお願い致します。 <!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 Homepage Builder Version 6.0.4.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY background="My Pictures/haikei125.jpg" text="#FF00FF"> <P align="center"><EMBED src="divina.mid" autostart="true" hidden="true" loop="true"><BR> <BR> <IMG src="logo2.gif" width="273" height="47" border="0" alt="FreedomClub "><BR> <IMG src="/perl-bin/counter/~sugarless728/?ndigit=5&face=ct_j"> <BR> <P align="center"><IMG src="image.jpg" border="0" width="374" height="262"></P> <CENTER></CENTER> <BR> <P align="center"><FONT size="+1"><B>ここは、****の運営する全サイトの入り口です。<BR> どうぞ、お好きなサイトへリンクして下さいね。</B></FONT></P> <P align="center"> <A href="http://ip.tosp.co.jp/i.asp?i=*****"><IMG src="u-26.gif" width="94" height="48" border="0"></A></P> <P align="center"><B>

  • セレクトボックスで、リンクバナーを表示するには

    ブログのサイドバーがかなり長いので短くしたいと考え、リンクバナーをセレクトボックスで表示したいのです。 例えば <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img/kyoraku.gif" width="99" border="0" name="image" /> <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img_up/ms_17.gif" width="99" /> <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img_up/ms_19.gif" width="99" /></P> この様なリンクバナーをセレクトボックスで表示する方法はないのでしょうか。 入れたいリンクバナーは、複数です。 個別リンクの許可は取ってあります。

  • CSSレイアウトの配置ずれについて

    本を見ながらHTMLとCSSを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }