➡ ENDOO VLOGで紹介したものはコチラ ⬅

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

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

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

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

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

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

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

ページ内ジャンプ HTML <a>

「目次」を作って読みやすくするのはどう?

はてなブログの目次について

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

▼はてな公式マニュアル

参考 記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログはてなブログ開発ブログ

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

例えばこんな感じ。

【目次】

  • Endooって誰?
  • Endoo Siteってどんなブログ?
  • 当ブログの活用方法
  • 最初に読んでほしい!おすすめ記事
  • 最後に

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

でも、ここで問題が…

目次の項目が多すぎた場合

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

~目次~

  • Endooって誰?
  • 1
  • 2
  • 3
  • 4
  • 5
  • Endoo Siteってどんなブログ?
  • 当ブログの活用方法
  • 最初に読んでほしい!おすすめ記事
  • 最後に

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

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

飛ばしたい指定の場所が「見出し」ではない

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

ジャンプ先を自由に指定してみよう!

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

HTML

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

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

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

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

HTML

注意点

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

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

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

まとめ

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

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

では。

いらっしゃ~い!!

クリックすると記事トップに戻れるYO←クリック