【はてなブログ】ページ内で指定の場所に飛ぶ！文字クリックでジャンプする方法

長文の記事を書いていると「このへんは飛ばして読んでもらってもいいかなー」とか「結論を読みたい人には考察部分が邪魔なんだろうなー」とか思うことがあります。

そもそも読んでいる人が気持ちよく読み進められるような記事を書くのがベストなんですが、なかなか難しいところです。

今回はそんな長文記事のために、ページ内の好きな場所に読み手を飛ばす方法を紹介したいと思います。

項目別に読む

とりあえず、やってみる。

こんな感じ。←クリックしてみ？

▼参考にさせて頂いたサイト

はてなブログでは簡単に目次を作ることができます。

▼はてな公式マニュアル

編集でコピペしてあげれば、勝手に目次が生成されます。ただし、見出しの文字のみなんですよね。

例えばこんな感じ。

【目次】

…みたいな感じで、見出しだけがピックアップされます。この目次内の見出し文字をクリックすると、各見出しにスラっと飛べるわけです。（みなさんがよく使っているやつ）

でも、ここで問題が…

下記の目次のように見出しが増えすぎてしまうこともあります（整理しろって話ｗ）。

～目次～

目次ながっ！って思いますよね。で、記事の構成上、最後の方にまとめてしまった「最初に読んでほしい！おすすめ記事」をなんとか目立たせたい！ってこと、あると思います。あくまで例なので他に良い構成はあると思いますが、ご了承ください。

この場合、記事初めに「おすすめの記事まで飛ばす」なんて文字を入れて、なおかつ飛ばすことができればいいですよね。

ずばり！ジャンプしたい場所が見出しではない場合、目次の生成だけではどうにもなりません。困った困った。

上記の問題をクリアする方法はあります！それが下記をコピペして貼りつけるっていう方法です。細かいことは分かりません！（おい）

HTML

&lt;a href="#a"&gt;「飛びたい場所」へ&lt;/a&gt;
&lt;a name="a"&gt;飛びたい場所&lt;/a&gt;

1 2	<a href="#a">「飛びたい場所」へ</a> <a name="a">飛びたい場所</a>

HTML編集で上記をコピペしてみてください。練習ぅ練習ぅ！

「a」の部分は英数字であれば何でもいいそうです。僕の場合は分かりやすく「a」としています。記事内にいくつものジャンプ先を作る場合は「a」「b」「c」など分かりやすくするといいかも。

※企業のサイトだと、ハッシュタグの後ろは飛びたい場所に関連した英単語が入っているケースが多いですね。「#content」とか「#about」とか。

▼記事トップに戻りたい場合は「#」のみでいけます。

HTML

&lt;a href="#"&gt;一番上に戻る&lt;/a&gt;

1	<a href="#">一番上に戻る</a>

ぽんぽん飛ぶのは面白いですよね。でも、あまり記事内にジャンプリンクを貼らない方がいいです。

読み手が迷子になってしまいますし、こちらの意図通りに読み進めてもらえなくなってしまいます。

ほどよくってことで、覚えておきましょう。

おぉ！こんなこともできるのか！って感じで驚きましたが、めちゃくちゃ便利ですよね。

たまーに使うことをおすすめします！

では。

いらっしゃ～い！！