紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

ページ内リンクをHTMLで設置する方法【はてなブログ】

how-to-setting-in-page-link-in-hatenablog

よく最近ほかのブログを読んでいると、目次に戻るとか目次から別の見出しに行くみたいなのがあってどうやっているのかなって思うんだ。

あれってどうやるのかな。

使うときの中点とかあるのか?教えて。

 

こんなお悩みにお答えします。

 

 この記事でわかること

  • ページ内リンクとは
  • ページ内リンクをHTMLで設置する方法
  • ページ内リンクを置くとき注意点
  • 【番外編】別ページの特定の場所にジャンプする方法

 

こんにちわ、紅蓮です。

 

ブログを読んでいてスクロールするのにつかれることってありませんか?

確かに、スクロールするのに疲れることってありますよね。

 

そんなあなたに、今回はページ内リンクをHTMLで設置する方法をご紹介します。

 

この記事を読むとページ内リンクとは何か、ページ内リンクの設置の方法とその注意点がわかります。

 

この記事を書く僕は、はてなブログ歴3年目。

今ではアフィリエイトで得る収益が月に3000円を超えています。

 

そんな僕もカスタマイズに力を入れており、今までカスタマイズした経験は、約30以上。

 

そんな僕がページ内リンクのすべてをわかりやすく説明します。

 

では行ってみましょう。

Here We Go!!

 

 

ページ内リンクとは?

what-is-in-page-links

まずここで、ページ内リンクとは何かをお話ししましょう。

 

ページ内リンクとは、同じページ内の特定の場所に移動できるドアのことです。

 

百聞は一見に如かず。

 

以下のリンクをクリックしてみてください。

ここをクリック!

 

するとどうですか?

 

下に書いてある、「これはデモ用の文です。」に一瞬で移動しましたよね。

 

これはデモ用の文です。

 

ページ内リンクを設置するメリット

ページ内リンクを文中に置くメリットは、以下の通り。

 

  • メリット①ユーザビリティがあがる
  • メリット②SEO的な期待もできる

 

では詳しく見ていきましょう。

 

メリット①読者のユーザビリティがあがる

まずページ内リンクをおくメリットの1つ目は、ユーザビリティが上がることですね。

 

スマホでホームページを見るときに、スクロールをしなくてはいけないことってありませんか?

 

イライラしますよね。

 

でもページ内リンクがあると、読者にとっては、スクロールする必要がなくなります。

というのも読者が見たい場所にワンタップで移動できるからです。

 

つまり時間にも体力的にも、読者には優しいですよね。

そうすると、読者にとって使いやすいサイトになります。

 

だからページ内リンクを置くのはメリットなんです。

 

メリット②SEO的な期待もできる

ページ内リンクをおくメリットの2つ目は、SEO的な期待もできることです。

これは読者のユーザビリティが上がるからですね。

 

日本の検索エンジンのシェアのトップを行くGoogle先生は、顧客第一主義。

 

その読者が使いやすいと言ったら、Google先生はあなたのサイトを放ってはおけません。

 

また、読者満足度が上がると、総じて直帰率や平均セッション時間の改善、リピーターの増加にもつながる傾向があります。

 

そのために、サイトパフォーマンスも充実することになります。

 

ですからページ内リンクを置くと、あなたのサイトはSEO的にも期待できるようになります。

 

ページ内リンクをHTMLで設置する方法

how-to-setting-in-page-link

ではいよいよ、ページないリンクをHTMLで設置する方法ですね。

 

設置するまでの手順は、以下の通り。

 

  • 手順①ページ内リンクの出発点を指定する
  • 手順②ページ内リンクの到着店を指定する
  • 手順③ページ内リンクの機能を確認する

 

では一つずつ見ていきましょう。

 

手順①ページ内リンクの出発点を指定する

まず一つ目の手順は、ページ内リンクの出発点を指定することです。

 

出発点を決めるときには、以下のような書き方をします。

 

<a href="#id名">ここをクリック!</a>

 

そして””マークの中に、id名を任意で決めてあげましょう。

お好きな名前にしてもらって問題なしです。

 

なお、ここをクリックの文言は何を使ってもらっても構いません。

 

手順②ページ内リンクの着地点を指定する

2つ目の手順は、ページ内リンクの着地点を指定することですね。

 

要はリンク先を決めましょうってことですね。

 

もしh2タグにジャンプ先を設定したい場合には、次のコードを入れましょう。

 

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

 

この時のポイントは、”"マークでくくられたid名を、先ほどの出発点で決めたid名と同じものを使うことです。

 

そうしないとリンクの紐づけがうまくいかずに、リンクできないからです。

 

注意しましょう。

 

また、h2じゃない場合のタグでも全然使えますので、置き換えて使ってくださいね。

 

手順③ページ内リンクの機能を確認する

3つ目の手順は、ページ内リンクの機能を確認することです。

 

手順は、以下の通り。

 

 手順③-1.プレビュー画面に行く

まずは編集画面のプレビューを押してプレビュー画面を開きましょう。

 

すると以下のような画面になりますね。

ページ内リンクの機能確認の仕方①

 

 手順③-2.実際に置いたページ内リンクをクリックして、動くか確かめる

次に実際に置いたページ内リンクをクリックして、正常に動くか確認します。

 

以下の画像は当記事で置いた内部リンクをクリックしたものです。

ページ内リンククリック前
ページ内リンククリック後

  

ページ内リンクを置くとき注意点

the-point-of-cautious-setting-in-page-link

ここでは、ページ内リンクを置くときの注意点をお話ししましょう。

 

注意点は、以下の通り。

 

  • 注意点①idの重複に注意
  • 注意点②多用しないこと
  • 注意点③読者にわかるようにしておくこと

 

では詳しく見ていきましょう。

 

注意点①id名の重複に注意

ページ内リンクを置くときの注意点の1つ目は、id名の重複に注意することですね。

 

ウェブ上には決まりがありまして、同じページ内に使用できるid名って一つだけなんですよね。

 

そのために、重複してしまうとリンクがうまくできなくなってしまいます。

 

1つのid名1リンクっていう風に徹底するようにしましょう。

 

注意点②読者にわかるようにしておくこと

ページ内リンクを置くときの注意点の二つ目は、読者にわかるようにしておくことです。

というのもページ内リンクも同じ普通のリンクと同じように青のリンクになるんですよね。

 

そのためにアフィリエイトの広告なのか、記事のページサイトなのか、それとも内部リンクなのかがわからず混乱してしまう可能性があります。

 

ですから○○に戻るなどとしっかりと書いておく必要がありますね。

  

【番外編】別ページの特定の場所にジャンプする方法

how-to-setting-other-page-link-in-article

ここまでは同ページ内のリンクでした。

 

でも実は別のページの特定の場所にジャンプすることもできるんです。

 

この方法を使うと、内部リンク先の読みたい見出しにすぐ行くことが可能なんです。

 

手順は、以下の通り。

 

  • 手順①ページ内にボタンを作る
  • 手順②機能の確認する

 

では詳しく見ていきましょう。

 

手順①ページ内にリンクを作る

手順の1つ目は、ページ内にリンクをつくることですね。

 

まず、ページのボタンを置きたい場所に、以下の例の感じでコードを書きましょう。

 

<a href="https://www.affili-blog-of-gren.com#id名">ここをクリック</a>

 

これだけで、ドアが完成ですね。

 

この時のポイントは、””マークの中で囲われるところが、ページのURL#idということですね。

 

よく忘れがちなのが、URLの後ろに#id名をつけること。

これをわすれると、リンクができないので忘れないようにしましょう。

 

id名は、先ほどと同じです

自分で決めてもらって問題ないですが、基本は見出しになることが多いですね。 

 

 新しいタブで開きたいときの入力方法

ブログを書いているときに新しいタブで出るようにしたいときには、以下のコードを入力しましょう。

 

<a href="https://www.affili-blog-of-gren.com#id名">ここをクリック</a>

 

すると、新しいタブでページが開き指定位置までスキップできます。

 

手順②機能の確認する

次に実際に作ってみたボタンを、確認してみましょう。

 

実際に以下のものを確認してみましょう。

ここをクリック

 

もしリンク先に移動出来たら、問題なくリンク設置完了です。

 

まとめ|ページ内リンクをうまく使ってユーザビリティを向上しよう

お疲れさまでした。

 

ここまでページ内リンクをhtmlで設置する方法をお話してきました。

 

まとめると以下のようになります。

 

まとめ
  • ページ内リンクとは同じページ内で特定の場所に移動ができるドアのような存在。
  • ページ内リンクを設置するメリットは、以下の通り。
    • メリット①ユーザビリティがあがる
    • メリット②SEO的な期待もできる
  • ページ内リンクの設置の手順は簡単で、以下の通り。
    • 手順①ページ内リンクの出発点を指定する
    • 手順②ページ内リンクの到着店を指定する
    • 手順③ページ内リンクの機能を確認する
  • ページ外にもリンクをすることもできる。

 

ページ内リンクを使うと、行きたいところにそのままボタン一つで行くことができるので間違いなくユーザビリティは上がります。

 

ぜひやってみてはいかがでしょうか。

 

最後にちょっと宣伝!!

なお、もしカスタマイズに興味が出てきたら、HTMLやCSSを勉強するのがおすすめです。

 

初心者から始めるなら、以下の本がおすすめですね。

 

 すらすらわかるHTML&CSS

 

 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

本での学習で気を付けたいのが、一番最初から読むと結構すぐに飽きることですね。

HTMLやCSSって基礎だけにめちゃめちゃ範囲があるんですよね。

 

だからどちらかというと辞書のように読むほうがいいかも。

そのほうがわからないことが出てきたときに読むようにできるので、結構すぐに身に付きますよ。

 

ぜひ使ってみられてはどうでしょうか。

 

ってことで今回はこの辺で。

また次回に。