ページ内リンクを作って目次から各見出しにジャンプする方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

ブログの記事にページ内リンクを貼ってみることにしました。

菜根譚の現代語訳のトップページで使います。

現代語訳が進むにつれて記事が長くなってきたので、ページ内リンクでもくじを作って読みやすくしたいなと思います。

ページ内リンクは、むか~し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」が小さいです。

好みで設定します。

実際にやってみた

実際にページ内リンクを貼ってみました。

こちらのページです。

もくじの項目をクリックすると、対応する見出しに飛ぶようにしてあります。

めでたし、めでたし。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ