うえのブログ

身の回りの気になった事を記事にすることが多いのですが、気付いたら雑学系が多くなりました。今のとこ一年以上は毎日更新しちゃってます(^o^)

うえのブログ

ページ内で途中の項目にジャンプさせたい…記事内リンクを飛ばす方法

f:id:uenoyou111:20190311112014j:plain

長いページを見ていたり、何度も見返してほしいところは適正な場所へ飛べるリンクがあると便利じゃないですか?

 

ハリーポッターのホグワーツ魔法魔術学校4寮を詳しく知るという記事を書いた際、長くなってしまったので目次に戻れたら便利だろうな~と思いました。

 

内部や外部リンクで他のページに飛ばすことはご存知かと思いますが、今回はこのページ内で狙ったところにリンクする方法をご紹介します。

 

 

ページ内リンクって?

 

多少HTMLをいじったことがある方なら分かると思うのですが、ページ内のタグにidを指定してそこに飛べるリンクを作るイメージです。

 

あとで詳しく解説しますので、ここはなんとな~くなイメージで考えていただければと思います。

 

実際に作ってみますと、これで目次の上に飛ぶことが出来ます。

 

これはある程度どこでも使えるので、長いページなら目次に戻ったり。重要な箇所へページ内で飛ばしたい時にリンクさせると非常に便利です。

 

やり方1~飛ばしたいところを指定する

 

当ブログは現在はてなブログで運営しておりますので、見たままモードで編集している前提に書き出していきます。

 

まず使うコードはこちら。

 

<h3 id="mokuji">ページ内リンクって?</h3>

 

mokujiと書いたところはなんでも大丈夫です、区別できるように変更しましょう。

 

通常、はてなブログは大見出しがh3というタグになっています。この大見出しに飛ばす場合、HTML編集にするとh3で囲まれているところがあります。

 

f:id:uenoyou111:20190311114851j:plain


今の記事をHTML編集にした時、上の画像どおりになっています。h3の上にあるcontentsは目次です。

 

赤線が引いてあるところに、コピーしたコードを置き換えます。

 

f:id:uenoyou111:20190311115228j:plain

 

h3のタグを使いつつ、idをmokujiとして挟み込みました。これで指定は完了です。

 

やり方2~飛ばしたいタイミングでリンクを作る

 

後は任意のところでリンクを作ります。使うコードはこちら。

 

<a href="#mokuji">一番上の見出しに戻る</a>

 

例えば私の使い方ですが、一番上に戻るボタンだとまた冒頭から読ませちゃうな…それなら目次がいいなぁ、とか。

 

先程説明しましたが~という流れで、前書いた目次を参照してもらう時などに使います。

 

HTML編集モードにして、先程のコードを一番上の見出しに戻るとして貼り付けます。

 

f:id:uenoyou111:20190311120023j:plain

 

これで最初の大見出しに戻るリンクが作れました。

 

見出しだけにしか設定できないの?

 

これはコードを変更すると、テキストにも飛ばすことが出来ます。

 

ただ、目次に設置してみたところ反応しなかったので、目次のすぐ上にあるpタグに設置しました。

 

使ったコードはこちら。

 

<p id="modoru"></p>

 

HTML編集モードにすれば、カッコで挟まれたpたちがたくさんいると思います。これがpタグです。

 

f:id:uenoyou111:20190311121330j:plain


目次に飛ばしたい場合はそのすぐ上、赤線が引いてあるところにidを指定します。

 

f:id:uenoyou111:20190311121718j:plain


あとはリンクをidと同じ、modoruに変えます。

 

<a href="#modoru">目次の上</a>

 

このコードをこのへんに目次の上として設置。pタグならあちこち使えるので、直接なにかのタグに指定しなくても良いかと思います。

 

流れのおさらいと注意点

 

1、飛ばしたいところにidを指定する。

 

<h3 id="oomidasi">大見出しの場合</h3>
<h4 id="nakamidasi">中見出しの場合</h4>
<p id="ptag">pタグの場合</p>

 

2、飛ばすタイミングでidへ#を付けて発リンク。

 

<a href="#oomidasi">大見出しに戻る</a>
<a href="#nakamidasi">中見出しに戻る</a>
<a href="#ptag">pタグに戻る</a>

 

かんたんです。知識があれば、もっとあちこち飛ばせるでしょう。

 

 

まとめ:ページ内でリンクすればより見やすい記事づくりになる

 

特に長文になった時は、そのまま読ませるんじゃなくてユーザーに選んでもらう動線も必要かなぁと思います。

 

他にもページ内のリンクではなく、ちょっと応用すると他の記事のidにも飛ばすことができます。

 

このへんについては後日まとめようかと思います( ˘ω˘)

 

 

 

ではでは(`・ω・´)ゞ