お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

アンカーリンク!同じページ内にジャンプする方法/HTML

アイキャッチ/アンカーリンクカスタマイズ
スポンサーリンク

今回はページ内リンクについて。
(アンカーリンクとも呼ばれます)

ページ内リンク?普通のリンクとは違うの??

同じページ内の途中にジャンプするイメージです!例えば下のボタンをクリックしてみてね。(戻るボタンでここに戻ってこれます)

飛んで戻ってこれたでしょうか?

こういった感じで同じページ内の途中へリンク(ジャンプ)する方法をご紹介します。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

ページ内にリンクする方法/アンカーリンク

\簡単2ステップ/
  • STEP1
    リンク先(着地点)にid名(アンカー)を指定する
    <h2 id="id名">ここに着地します</h2>
  • STEP2
    リンクを作成し、指定したIDへジャンプさせる(#をつける)
    <a href="#id名">ここからジャンプ</a>
  • STEP3
    完成

    プレビュー画面で動作確認

リンク先にid名(アンカー)をつけて、それを目印にリンクさせるイメージですね!

では具体的に設定していきます。

リンク先にid名(アンカー)を設定する

ここに飛びたい!という位置(着地点)のタグに目印となるid(アンカー)を指定します。

例えば特定のh2見出しにジャンプしたい場合はこのように記述します。

<h2 id="midashi1">ここに着地します</h2>
Id(アンカー)の設定について
  • <h2>のタグの中に半角スペースをあけてid=”○”を追加する
  • id名はで分かりやすいように任意に決めてOK 半角英数字
  • 見出しタグの他に段落の<p>や<div>などでも良く、移動先にタグの指定はありません
\覚えておくと便利/
ブロックエディタの簡単設定

Cocoonのブロックエディタだとこのアンカー指定がとても簡単です。

  1. 該当のブロックを選択
  2. メニュー内「高度な設定」→「HTMLアンカー」の欄に任意のid名を入力するだけ!

リンク(ジャンプ)させるボタンを作成する

HTMLでリンクさせるときには<a>タグを使います。

他のページにリンクする場合

通常、例えば当サイトの「ホームページに戻る」といった通常のリンクをつけたい場合、HTMLはこのように記述します。

ホームへ戻る

<a href="ここにURL">ホームページに戻る</a>
リンクさせる方法
  • <a>タグの中に href=”ここにURL”のように、URLを” “(半角ダブルクォーテーション)で囲んで記述します
  • <a></a>タグで囲みます

同じページ内にジャンプする場合

これを他のページではなく同ページの特定の場所にする場合は、URLの部分を先頭に#(半角)をつけたid名にするだけです。

\覚えておくと便利/
ブロックエディタの簡単設定

ブロックエディタの場合、このリンク手順がより簡単にできます。

  1. リンクさせたいテキストを選択
  2. URLに#をつけてid名(アンカー)を入力
  3. 確定させる

意外に簡単なのだ

応用編/他のページの途中にリンクしたいとき

応用編で違うページの途中にリンクすることもできます。

応用編と言っても他ページにアンカーをつけてリンク設定する基本は同じ!

  1. 飛びたいところのタグにidを指定する(同様)
  2. リンクボタンを作成する

POINT

リンク作成の仕方がポイントで、a href=”〜”の中を“飛びたいページのURL/#id名”とします。

例<a href="https://turicco.com/#midashi">ここからジャンプ</a>

リンクボタンに装飾をつけることもできます

<a >タグだけでは通常のテキストリンクになりますが、CSSを使ってボタンのように見せる装飾をつけることもできます。

スムーズにスクロール動作させたいとき

リンクだけだと一瞬で飛ぶジャンプなのですが、それをスクロールしたいときはこのCSSを追加します。これだけでスムーズな動作が実現!

html {scroll-behavior: smooth;}

当ページカスタマイズでも使用しています

先日、ご紹介しましたアピールエリアを用いたカスタマイズについて。

ワードプレス有料テーマ「SWELL」 風に仕上げたトップページのscroll部分でも今回ご紹介するページ内リンクを使用しています。

ヘッダー作成

まとめ/覚えておくと便利です

  • id(アンカー)を設定する方法
  • <a>タグを使ったリンクの書き方
  • ブロックエディタでの簡単操作

以上についてご紹介しました。

意外と簡単だったのではないでしょうか?

素早く、的確に目的の場所へ飛べる操作性はユーザビリティが上がり、SEOにも期待が持てます。知っておくと便利ですね!

↑このボタンをクリックすると記事の冒頭へ戻ります。

Comment

タイトルとURLをコピーしました