ページ内リンクの設置についてまとめてみました
ページ内リンクはWEBページに付けられたid属性をめがけて設置されるリンクです。
同ページ内・別ページ問わず別ウィンドウでもid属性の位置へとジャンプします。
見出しが固定ヘッダーに隠れない様に、idに対しCSSで追記をしておきましょう。
ページ内リンクについて
ページ内リンクとは
ページ内リンクとは、特定ページのさらに「特定の位置」に飛ばすリンクの事です。
通常のリンクだと、リンク先のページが一番頭から映りますよね。
ページ内リンクを指定した場合、そのページ内の途中にある「指定位置」から始まります。
このリンクにより、ページ内・別ページ問わずあらゆる位置に移動できる訳です。
ページ内リンクの重要性
ページ内リンクを付ける一番の理由は、ユーザーに迷わずに目的の情報に到達してもらうためです。
もし知りたい情報が1ページに切り取られていれば、ページの上部から表示しても問題はないでしょう。
しかしそれだと1ページあたりのボリュームが少なくなってしまいますよね。
それに掲載側としては、それ以外に類似する様なコンテンツは一まとめにしたい訳です。
ページ内リンクがある方がユーザービリティが高い
そんな時ページ内を自由にたどれるリンクを付けておけば、ユーザーは迷わずに済みますよね。
どれだけ長いコンテンツであっても、知りたい情報部分にすぐに到達できますからね。
その意味でページ内リンクが設置してある方が、検索評価（SEO）にも高いとされています。
ユーザーにとって有益な（ユーザービリティの高い）サイトという評価がされるためですね。
ブログ形式のWEBページであれば、ページ内リンクを積極的に導入していくべきでしょう。
ページ内リンクの設置方法
飛びたい位置にidを指定
まずは飛ばしたい情報先（見出し部分が理想）に、id属性タグを設置します。
<h2 id="ex1">ジャンプ先の見出し部分</h2>
今回ex1と付けましたが任意の名称でOKです。以下の事を守りましょう。
・付けたid値はそのページ内に1つのみ（複数あるならそれぞれ変える）
・数字で始める事はできない（半角英字からスタート）
・class属性は別に設置できる
class名と併設
<h2 class="hoge test" id="ex1">このようにidとclassは別々に指定できる</h2>
※依然はname=""属性を設置していましたが、HTML5からはid属性が担当する事になりました。
aリンクを設置する
次にリンクを作りましょう。
リンクは通常通りaタグで作りますが、その際のURLに#をつけるのがポイントです。
先ほど指定したid値と同じ値を、#の後ろに入れるだけです。
リンク元とリンク先が同じページ内の場合
<a href="#ex1">同じページにあるex1へ移動</a>
リンクが#名称だけの場合、同じページ内でid値を探そうとします。
仮にそのページ内に指定したid値が無い場合は、ジャンプしません。
リンク先が別のページの場合
<a href="hoge.html#ex1">hoge.htmlが別ウィンドウで開き、ex1へ移動</a>
#の前にURLが付く場合はまずその該当ページへ飛び、id値が付けられたところに移動します。
絶対リンク・相対リンクのいずれも同じ効果となります。
リンク先が/で終わる場合（Wordpressなど）
<a href="hoge/#ex1">hogeディレクトリへ飛び、ex1へ移動</a>
ディレクトリ名の後に#を付けた形でも、もちろん機能します。
リンク先を別ウィンドウで開く
<a href="hoge.html#ex1" target="_blank">hoge.htmlが別ウィンドウで開き、ex1へ移動</a>
target="_blank"を付けると、リンク先が別ウィンドウで開きますよね。
その上で指定のid値がつけられたところまで移動する事ができます。
ジャンプした後に見出しが見えない
今のWEBサイトではヘッダーが固定されて、常に上部に引っ付いている事がありますよね。
これが固定ヘッダーと呼ばれるものです。
指定箇所を画面上端から表示
ページ内リンクは基本的に、id値が付いたところが画面の一番上に来るように仕組みがされています。
そうすると、id値がついた見出しがこの固定ヘッダーの下に隠れてしまう事があるのです。
ユーザーを迷わせる
ユーザーはきちんと目的の場所にジャンプしたかどうかを、見出しタイトルで確認します。
その見出しが固定ヘッダーの下に隠れてしまったら、目的のところに来れたのかどうかが察知できません。
辿った場所は正しいのに、元に戻ったり違うサイトに行ってしまったりするかも知れませんよね。
ですのでクリアしなければならない問題の一つと言えるでしょう。
解決方法
一番簡単な解決方法はCSSを使って、id値の入った見出し位置を固定ヘッダーの高さ分だけ下にずらす手段です。
つまり一番上ではなく、ある程度下に下がった位置にに見出しを持ってくるのです。
ソース例を紹介しましょう。
html
<div id="header"> ヘッダー項目部分 </div> <div id="content"> … <h2 id="ex1">目的の見出しテキスト</h2> 文章が入ります。 … </div>
他のページからジャンプしてh2タグ（id="ex1"部分）を表示しようすると、#headerのメニュー枠がページ上部に表示されます。
この固定ヘッダーが表示される事で、h2部分が隠れる訳ですね。
これを回避するためにid属性にCSSを入れます。
CSS
#header { width: 100%; height: 100px; position: fixed; top:0; left:0; z-index: 1; } #ex1 { margin-top: -100px; padding-top: 100px; }
この時固定されたヘッダーの高さは、100pxとしています。
アンカー範囲を上まで伸ばして調整
重要なのはid属性のスタイル部分です。
まず、padding-top:100px;で固定ヘッダーの高さ分だけ下にずらします。
同時にmargin-top: -100px;とマイナスの値を入れます。
これにより見出しの位置は下にずれたままですが、アンカー（リンク）範囲が固定ヘッダーの高さ分だけ上に伸びてくれます。
これにより固定ヘッダー部分に隠れる事無く、id値のついた見出しテキストを表示させる事ができます。
サンプル例
固定ヘッダーのリンク（menu1…）を押すと、各見出し部分へときれいにジャンプします。
ぜひ試してみて下さい。
見出しがページの一番上に来る場合
サンプルを実際に作ってみるとわかるのですが、一番最初のid属性「ex1」のみ他のid属性とは違うCSSを入れる場合があります。
最初のid属性が既にページの中盤の位置にある場合は問題ありません。
各id全て、先ほどの2行のCSS追記で機能します。
ページの一番上部にある見出しは隠れる
ただサイトの構成によって、例えばex1の見出し自体が一番上に位置する場合もありますよね。
そうするとex1の付いた見出しは、CSSを入れていても固定ヘッダーの後ろに隠れてしまうのです。
一番上の見出しが隠れたサンプル
このようにex1の上に何もコンテンツが無い場合は、固定ヘッダーに隠れたままです。
CSSを少し書き変える必要があります。
CSSの修正
修正は簡単です。ページの一番上に位置するid属性だけ、padding-top: 100px;のみとします。
上の例ならex1だけ「margin-top:-100px;」部分を取り去りましょう。
CSS
#ex1 { padding-top: 100px; } #ex2, #ex3, #ex4 { margin-top: -100px; padding-top: 100px; }
これによりページ上部にあるid属性も、固定ヘッダーに隠れる事はありません。
ページ内リンクでアコーディオン内タブを開く
次はページ内リンクで別ページにあるアコーディオンコンテンツの特定タブを開く方法です。
アコーディオンはコンテンツが縦に長くなる事を避けるため、必要な部分以外は閉じているのが普通ですよね。
そこでページ内リンクからアコーディオン内の特定コンテンツを開いた状態にする応用編をご紹介します。
これにはjsを使います。
アコーディオンメニュー内の構造を知る必要がある
jsを使うにあたり、まずはどのようにしたらそのアコーディオンメニューが開くのかを知る必要があります。
本サンプルでは、展開される枠に設置されたclass名の中に"in"が入る事で枠が開きます。
それを前提として紹介しますので、実装時にはオープン時の条件を把握してjsで実現する事になりますね。
ジャンプ元のページ内リンク
<a href="hoge/#collapse1">hoge/ページ内のアコーディオンのcollapse1を開く</a>
hoge/のアコーディオンソース例（panel部分のみ）
<div class="panel"> <div id="head1" class="panel-heading" role="tab"> <h4 class="panel-title"><a class="collapsed main-bg shape" role="button" href="#collapse1" data-toggle="collapse" data-parent="#collapse1" aria-expanded="true" aria-controls="collapse1">見出しテキスト</a></h4> </div> <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse1"> <div class="panel-body">コンテンツが入ります。</div> </div> </div>
上記は一例です。
各所にcollapse1が入っていますが、id値として入っているのは1か所のみです。
h4タグ見出しタイトルを押す事でアコーディオンが展開される必要があるため、この様になっています。
本サンプルにおいてdiv枠が開く条件は、id="collapse1"が付いたdiv枠のclass名に「in」が入る事です。
<div id="collapse1" class="panel-collapse collapse"… <div id="collapse1" class="panel-collapse collapse in"…これで枠が開く
JS
<script> var url1 = location.hash; if (url1 == "#collapse1") { var acc1 = document.getElementById('collapse1'); acc1.classList.add('in'); } </script>
このスクリプトは、アコーディオンHTMLソースの下に続けて設置しましょう。
JSの解説
まずlocation.hashでURLを取得し「url1」に代入します。
取得したURL（url1）の中に#collapse1が入っていた場合のif文を作ります。
document.getElementById('collapse1');でid値がcollapse1のタグ部分を探します。
JSで強制的にinを入れる
そのタグに対してのクラス追加で「in」の名称を追加します。
これにより指定したアコーディオンタブが最初から開いた状態で表示されます。
もちろんアコーディオンを閉じる事で、jsが付けたinは無くなります。
変数名を増やして複数アコーディオンに対応
当然アコーディオンで開く枠は複数あるでしょうから、その全てにページ内リンクを付ける可能性もありますね。
その場合はif{}部分をコピペして、変数を全て別名（url1,url2,url3等）にして増やしましょう。
固定ヘッダーとの兼ね合い
この場合も、先ほど紹介した固定ヘッダーの問題が出てくる事でしょう。
つまり固定ヘッダーが邪魔をしてアコーディオンメニューのタイトルが見えない訳ですね。
先ほどのid値に付与したCSSをうまく使って、調整していく必要があります。
※アコーディオンによってはCSSの追記実装が難しいかも知れません。
