オタクマン

田舎暮らし崖っぷちニートの雑記ブログ

初心者ブロガー必見!記事内で目的の見出しに一気に飛べるリンクの作り方!

 

記事内の見出しの部分に一気に飛ぶようなリンクを作りたいと思ったことはありませんか?

 

↓こんなやつです。

ジャンプボタン

 

 

 

 

 

 

 

 

見出し

 

目次もありますけど読者が見逃してしまうと記事の途中では飛べなくなってしまいますよね

 

記事自体が短かければ問題ありませんが、長くなるとそうはいきません😅

 

例えば「格安simのサービスの特徴や登録・解約方法の仕方」をテーマとした記事を書いたとします

 

この場合、格安simの基本情報(サービスや料金の詳細)などから入っていくと思います

 

しかし読者が1番知りたい情報が格安simの「登録方法や解約方法」だと前半部分で挫折して離脱してしまう可能性もあります!

 

「いや目次あるやん!」と思った方は要注意です!

 

なぜなら検索でくるような読者は目次の存在に気づかなかったり、そもそも目次の存在を知らない場合もありますので普通にスルーされることも可能性としてあります

 

なので記事の途中に目的の見出しに飛べるようなリンクを付けておくと離脱の危険性を回避できます

 

↓こんな感じのイメージです

 

タイトル:LINEモバイルの特徴や登録・解約の仕方を分かりやすく解説

 

冒頭

 

見出し1

(サービスの特徴、料金など)

 

【見出し3に飛ばすボタン】

                     

見出し2       ⬇︎

 

                    ⬇︎

見出し3(登録・解約方法の説明)

 

このように見出し1と見出し2の間にリンクを設置していれば一気に目的のページに飛ばすことができます

 

では格安simのサービスの特徴と登録・解約方法を分けた記事にすればいいのでは?というツッコミはとりあえず置いといてください。笑

 

まあとりあえず長くなっても離脱を防ぐ確率を減らせます!

 

前置きが長くなってしまいましたが今回は記事の中で目的の見出しに飛べるようなリンクの作り方の説明をします!

 

 

初心者ブロガー必見!記事内で目的の見出しに一気に飛べるリンクの作り方

というわけでやり方を説明します!

 

①飛びたい位置の見出しにidコードを貼り付ける

まずお好きな「id」を付けたコードをHTML編集画面で飛ばしたい見出しタグに貼り付けます。見出しタグに貼り付けるコードは以下です。「~」の部分にお好きなid名を入れます

 

id="〜"

 

今回のid名はてきとうに「otaku」としてh2タグの見出しに貼り付けます。以下は先程のコードをh2見出しを例に貼り付けたものです

 

 <h2 id="otaku">見出し名</h2>

 

 太字の部分が貼り付けたコードです

 

 

これでジャンプ先は完成です

 

②ジャンプボタンの作成

次は「ジャンプリンク」の作成です。お好きなテキストのジャンプリンクを作ります!先ほどのidコード「otaku」を貼り付けたコードを作ります。テキストの部分は「こちらをクリック」にしてみます。もちろんテキストの部分は何でも構いません

 

上の感じで作成したコードは以下です

 

<a href="#otaku">こちらをクリック!</a>

 

これでジャンプボタンが完成するはずです!

 

実際に作ると下のような感じになります

 

こちらをクリック!

 

 

 

 

 

 

 

 

 

見出し名

どうでしょうか?多分、飛べたはずです😄

 

こんな感じで目的の見出し部分に飛ばしたい場合はこんな感じでできます!

 

ちなみに参考にした記事は以下になります!

 

saruwakakun.com

 

もちろん見出しだけではなくタグがあればどこでも飛ばすことは可能なので自分の好きなように設置してみてください!

 

まとめ:記事が長くなる場合は目的の見出しへ飛べるようにして離脱率を防ごう!

 はい、そんな感じで今回は見出しへのジャンプボタンの設置方法でした!

 

特に検索の読者は目的をもって検索をかけてやってくる場合が多いので読者の意図を想定した記事作りは大切だと思います!

 

目次があるから大丈夫でしょ!という考えは読者の方に対する配慮を少々怠っているかもしれません

 

その場その場で読者のために臨機応変な記事作りは大切だと思います

 

とは言っても自分もまだまだなので偉そうなことは言えませんが、なにかの参考になれば幸いです!

 

今回は以上です!