長いページを見ていたり、何度も見返してほしいところは適正な場所へ飛べるリンクがあると便利じゃないですか？
ハリーポッターのホグワーツ魔法魔術学校４寮を詳しく知るという記事を書いた際、長くなってしまったので目次に戻れたら便利だろうな～と思いました。
内部や外部リンクで他のページに飛ばすことはご存知かと思いますが、今回はこのページ内で狙ったところにリンクする方法をご紹介します。
ページ内リンクって？
多少HTMLをいじったことがある方なら分かると思うのですが、ページ内のタグにidを指定してそこに飛べるリンクを作るイメージです。
あとで詳しく解説しますので、ここはなんとな～くなイメージで考えていただければと思います。
実際に作ってみますと、これで目次の上に飛ぶことが出来ます。
これはある程度どこでも使えるので、長いページなら目次に戻ったり。重要な箇所へページ内で飛ばしたい時にリンクさせると非常に便利です。
やり方１～飛ばしたいところを指定する
当ブログは現在はてなブログで運営しておりますので、見たままモードで編集している前提に書き出していきます。
まず使うコードはこちら。
mokujiと書いたところはなんでも大丈夫です、区別できるように変更しましょう。
通常、はてなブログは大見出しがh3というタグになっています。この大見出しに飛ばす場合、HTML編集にするとh3で囲まれているところがあります。
今の記事をHTML編集にした時、上の画像どおりになっています。h3の上にあるcontentsは目次です。
赤線が引いてあるところに、コピーしたコードを置き換えます。
h3のタグを使いつつ、idをmokujiとして挟み込みました。これで指定は完了です。
やり方２～飛ばしたいタイミングでリンクを作る
後は任意のところでリンクを作ります。使うコードはこちら。
例えば私の使い方ですが、一番上に戻るボタンだとまた冒頭から読ませちゃうな…それなら目次がいいなぁ、とか。
先程説明しましたが～という流れで、前書いた目次を参照してもらう時などに使います。
HTML編集モードにして、先程のコードを一番上の見出しに戻るとして貼り付けます。
これで最初の大見出しに戻るリンクが作れました。
見出しだけにしか設定できないの？
これはコードを変更すると、テキストにも飛ばすことが出来ます。
ただ、目次に設置してみたところ反応しなかったので、目次のすぐ上にあるpタグに設置しました。
使ったコードはこちら。
HTML編集モードにすれば、カッコで挟まれたpたちがたくさんいると思います。これがpタグです。
目次に飛ばしたい場合はそのすぐ上、赤線が引いてあるところにidを指定します。
あとはリンクをidと同じ、modoruに変えます。
このコードをこのへんに目次の上として設置。pタグならあちこち使えるので、直接なにかのタグに指定しなくても良いかと思います。
流れのおさらいと注意点
１、飛ばしたいところにidを指定する。
２、飛ばすタイミングでidへ#を付けて発リンク。
かんたんです。知識があれば、もっとあちこち飛ばせるでしょう。
まとめ：ページ内でリンクすればより見やすい記事づくりになる
特に長文になった時は、そのまま読ませるんじゃなくてユーザーに選んでもらう動線も必要かなぁと思います。
他にもページ内のリンクではなく、ちょっと応用すると他の記事のidにも飛ばすことができます。
このへんについては後日まとめようかと思います( ˘ω˘)
ではでは(｀･ω･´)ゞ
