今回はページ内リンクについて。

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

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

こういった感じで同じページ内の途中へリンク(ジャンプ)する方法をご紹介します。
ページ内にリンクする方法
- STEP1リンク先にid名(アンカー)を指定する
<h2 id="id名">リンク先</h2>
- STEP2リンクボタンを作成する
<a href="#id名">リンク元</a>
- STEP3完成
プレビュー画面で動作確認

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

では具体的に設定していきたいと思います。
STEP1/リンク先にid名(アンカー)を設定する
ここに飛びたい!という位置(リンク先)のタグに目印となるid(アンカー)を指定します。
例えば特定のh2見出しにジャンプしたい場合はこのように記述します。
<h2 id="midashi1">見出し(リンク先)</h2>
- <h2>のタグの中に半角スペースをあけてid=”○”を追加する
- id名はで分かりやすいように任意に決めてOK 半角英数字
- 見出しタグの他に段落の<p>や<div>などでも良く、タグの指定はありません
Cocoonのブロックエディタだとこのアンカー指定がとても簡単です。
- 該当のブロックを選択
- メニュー内高度な設定→HTMLアンカーの欄に任意のid名を入力するだけ!

STEP2/リンク(ジャンプ)させるボタンを作成する
他のページにリンクする場合
例えば当サイトの「ホームページに戻る」といった通常のリンクをつけたい場合、HTMLはこのように記述します。
<a href="https://turicco.com/">ホームへ戻る</a>
同じページ内にジャンプする場合
これを他のページではなくて同ページの特定の場所にする場合は、URLの部分を先頭に#(半角)をつけたid名にするだけです。

ブロックエディタの場合、このリンク手順を簡単に行うことができます。
- リンクさせたいテキストを選択
- URLに#をつけてid名(アンカー)を入力
- 確定させる


意外に簡単なのだ
他のページの途中にリンクしたいとき
応用編で違うページの途中にリンクすることもできます。
応用編と言っても他ページにアンカーをつけてリンク設定する基本は同じ!
- 飛びたいところのタグにidを指定する(同様)
- リンクボタンを作成する
リンク作成の仕方がポイントで、a href=”〜”の中を“飛びたいページのURL/#id名”とします。
例<a href="https://turicco.com/#midashi">見出しへジャンプ</a>
リンクボタンに装飾をつけることもできます
<a >タグだけでは通常のテキストリンクになりますが、ボタンのように見せる装飾をCSSでつけることもできます。
スムーズにスクロールさせたいとき
リンクだけだと一瞬で飛ぶジャンプなのですが、それをスクロールしたいときはこのCSSを追加します。これだけでスムーズな動作が実現!
html { scroll-behavior: smooth;}
当ページカスタマイズでも使用しています
先日、ご紹介しましたアピールエリアを用いたカスタマイズについて。
ワードプレス有料テーマ「SWELL」 風に仕上げたトップページのscroll部分でも今回ご紹介するページ内リンクを使用しています。

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

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