同じページ内でリンクを飛ばす事は出来ますか?

  • vancouverhideaway · メンバー ·

    こんにちは。いつもお世話になっております。・・・また質問させて頂きたく。

    同じページ内で
    Aをクリックすると同ページ内のAについて述べられている箇所へ
    Bをクリックすると同ページ内のBについてのべられている箇所へと
    リンクを飛ばす事は出来ますでしょうか?

    具体的にご説明すると、私のサイトではコンドミニアムのお部屋を旅行者の方にご提供しているのですが現在は2つのお部屋があり
    それぞれの概要を二つのタブ(ページ)にて説明しています。

    これを、今後お部屋が増えた場合、いくつもタブを増やすのは見苦しいので
    ＜物件概要＞という一つのタブ（ページ）内に全ての物件概要を入力しいちいちAからDまでスクロールダウンするのではなく、
    ページの最初に<物件Aへ/物件Bへ/物件Cへ/物件Dへ>という表記にリンクをつけてクリックをしたら
    物件A,B,C,Dのそれぞれの同一ページ内の記載箇所にリンク出来るようにしたいのです。

    ちょっと説明が下手ですね。おわかり頂けるといいのですが・・・宜しくお願いします。

    ヘルプが必要なブログは (ログイン中のユーザーにのみ表示) です。

  • asazuki508 · メンバー ·

    この件についてはここで改めて解説するよりも、「ページ内リンク」等で検索すると説明がたくさん出てくるので、その中から自分がわかりやすいと感じるものを読まれるのがベストな解決策と思います。

    例えば、私がわかりやすいと感じたものは、以下のページのコメント欄での説明。
    ie6でページ内リンクが効かない « kawama.jp

    そのまま引用させていただくと以下のような記述をするとページ内リンクを貼れます。

    ページ内リンク
    <div id=”Hoge1″>
    　　<p>hoge1 hoge1 hoge1 hoge1 hoge1</p>
    </div>

  • asazuki508 · メンバー ·

    引用部分の貼付けに失敗したので、もう一度貼ります。（もし、これでもおかしい感じでしたら、参照先を見て下さい。） 

    <a href="#Hoge1">ページ内リンク</a>
<div id="Hoge1">
　　<p>hoge1 hoge1 hoge1 hoge1 hoge1</p>
</div>
  • vancouverhideaway · メンバー ·

    asazuki508さん：
    ご教示有難うございます！なんとか頑張ってみますね。
    いつもすみません、大変助かっています。

  • asazuki508 · メンバー ·

    これはとてもいい質問だと思います。応用範囲が広く、有用です。
    例えば、URLアドレスバーに
    http://ja.wikipedia.org/wiki/WordPress#.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3_2
    と入力し、エンターキーを押すと、WikipediaのWordPressの「プラグイン」という項目に直接ジャンプします。
    つまり、
    「URL」に「#」 + 「id番号」を後付けするとページの特定の箇所を指定することができるということです。

    この「id番号」を調べるには、Firebugなどを使います。

    是非マスターしてみてください。

  • asazuki508 · メンバー ·

    追記：
    ざっと調べたところ、id番号の調べ方は、
    Google Chrome：右クリック＋「要素を検証」
    Firefox：選択 ＋ 右クリック +「選択した部分のソースを表示」
    Safari：選択 ＋ 右クリック +「要素の詳細を表示」
    （ieは不明）でもOKです。Firebug（Firefoxのアドオン）はあくまで私のイチオシです。

  • トピック「同じページ内でリンクを飛ばす事は出来ますか?」には新しい返信をつけることはできません。