同一ページで内部リンクをする場合のHTML指定

読者さんより「同一ページで内部リンクをしたい」との
ご質問があったので、方法をご説明します。

ちなみにここで言う内部リンクとは、同ブログ内の
個別記事にリンクする方法ではありません。
同一ページ内で特定の場所にハイパーリンク(移動)する方法です。

ちなみに、なぜ、同一ページ内で内部リンクをする
必要があるの?と思う方もいらっしゃるでしょうね。

基本的にはあまり使わないのですが、例えばこんな
Q&Aページを作りたい時などに使うと便利なんです。
YAMAHIROダウンロードセンター > よくあるご質問

上記は私の商材を購入した方へのQ&Aページなのですが
質問の数が増えてくると「もくじ」を作ったほうが
利用者は把握がしやすいです。

ではこういう場合、どのようにHTMLを記述すれば良いのでしょうか。
以下で説明します。

 

~リンク元(もくじ側)の指定~

リンクタグ <a> を使います。
上記のページで例えると、このように指定しています。
  ↓
<a href="#001">エラーが出て正常に動きません</a>

この#001が、指定した場所に飛ぶ目印みたいなものです。
#が内部リンクを表し、その後ろに自分の好きな
英数字を入力します(この例では001にしています)

 

~リンク先の指定~

こちらは色々なタグが使えます。
一般的には <p> タグを使うことが多いですが
<h> でも指定ができます。

上記のページで例えると、このように指定しています。
  ↓
<h3 id="001">エラーが出て正常に動きません</h3>

このページでは、リンク先に <h3> を指定していますね。
そして id=”001″ と記述しています。
これが「リンク元で指定した場所へ移動する」という指定になります。

この例で言うと、001と指定した場所へ内部リンクをしている
ということです。

実際のソースコード
 内部リンクのソースコード例

内部リンクを使うことは少ないとは思いますが
覚えておくと、いろいろと役立つことが多いです。
ちなみにワードプレスでも使えますよ。

通常、内部リンクの場合はクリックすると同時に「パッ」と
移動するので、一瞬すぎて移動したことを気付かないこともあります。

ちなみに参考ページの内部リンクは「ヌルヌル~」っと動きますが
こちらもある記述を行うことで可能です。それはまた別の機会にでも
ご紹介したいと思います。

  • このエントリーをはてなブックマークに追加
無料メールスクール




サイト著者

管理人やまひろ
運営者:耶麻尋(やまひろ)

インターネットを活用したビジネスでご飯を食べている人。チョコと犬と漫画が大好き。
詳しいプロフィールはこちら


ボタンが反応しない場合は
(ctrl+D)

過去のエントリー

無料メールマガジン

お名前
メールアドレス

      
ページ上部へ戻る