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