ブログの記事にページ内リンクを貼ってみることにしました。
菜根譚の現代語訳のトップページで使います。
現代語訳が進むにつれて記事が長くなってきたので、ページ内リンクでもくじを作って読みやすくしたいなと思います。
ページ内リンクは、むか～しHTMLの本を読んだときに、ちょこっと勉強しました。
思い出しながら、やってみます。
ページ内リンクとは
ふつうはリンクをクリックすると別のページに飛びます。
ページ内リンクは、おなじページ内のどこかに飛びます。
よくあるのは…
ページの上の方にもくじがあって、その目次の項目をクリックすると、ページ内の該当する見出しに飛ぶ、っていうものです。
どこをクリックすると、どこに飛ぶのか
どこをクリックすると、どこに飛ぶのかを決めます。
つまり、出発点と到着点ですね。
ページ内リンクには、HTMLを使います。
HTMLとは、なんていうか、ちょっとした記号みたいなものです。（←ざっくり）
HTMLの書き方
ブログでページ内リンクを設定する場合…
記事の編集画面では、テキストモードを使います。
ワードプレスでは、記事の編集画面の右上のほうに「ビジュアル」とか「テキスト」というタブがあります。そこでどちらかを選べるようになっています。
実際のタグの記述
出発点（クリックする文字）のHTMLは、こんなふうに書きます。
↓
<a href=”#●●●”>ここをクリックすると</a>
到着点（クリックのあとに表示させたい場所）のHTMLは、こんなふうに書きます。
↓
<h2 id=”●●●”>ここに飛びます</h2>
※コピーして使う場合は、ダブルクォーテーション（●●●の前後にあるちょんちょん）を半角に直してください。
●●●の部分
上の例は…
「ここをクリックすると」という文字をクリックすると、「ここに飛びます」という見出しの部分までジャンプする、というものです。
●●●の部分は、自由に書き換えてOKです。
たとえば、「link1」とか「link2」とか。
ただし、出発点と到着点で●●●の部分は同じにします。
出発点の●●●と対応する到着点にジャンプするので、ここが違っているとジャンプできません。
到着点のh2の部分
上の例では、到着点のタグは「h2」となっています。
これは「h1」でも「h3」でもOKです。
「h1」とか「h2」とか「h3」っていうのは、見出しの文字の大きさです。
「h1」が大きくて、「h3」が小さいです。
好みで設定します。
実際にやってみた
実際にページ内リンクを貼ってみました。
こちらのページです。
もくじの項目をクリックすると、対応する見出しに飛ぶようにしてあります。
めでたし、めでたし。
