今回はページ内リンクについて。
（アンカーリンクとも呼ばれます）
ページ内リンク？普通のリンクとは違うの？？
同じページ内の途中にジャンプするイメージです！例えば下のボタンをクリックしてみてね。（戻るボタンでここに戻ってこれます）
飛んで戻ってこれたでしょうか？
こういった感じで同じページ内の途中へリンク（ジャンプ）する方法をご紹介します。
- ブログ好きな40代主婦
- CocoonサイトをCSSでフルカスタマイズ
- JavaScriptを勉強中
- ドメインパワー32
- ワードプレスで２サイトを運営しています
です
ページ内にリンクする方法／アンカーリンク
- STEP1リンク先（着地点）にid名（アンカー）を指定する
<h2 id="id名">ここに着地します</h2> - STEP2リンクを作成し、指定したIDへジャンプさせる（#をつける）
<a href="#id名">ここからジャンプ</a> - STEP3完成
プレビュー画面で動作確認
リンク先にid名（アンカー）をつけて、それを目印にリンクさせるイメージですね！
では具体的に設定していきます。
リンク先にid名（アンカー）を設定する
ここに飛びたい！という位置（着地点）のタグに目印となるid（アンカー）を指定します。
例えば特定のh2見出しにジャンプしたい場合はこのように記述します。
<h2 id="midashi1">ここに着地します</h2>- <h2>のタグの中に半角スペースをあけてid=”○”を追加する
- id名はで分かりやすいように任意に決めてOK 半角英数字
- 見出しタグの他に段落の<p>や<div>などでも良く、移動先にタグの指定はありません
Cocoonのブロックエディタだとこのアンカー指定がとても簡単です。
- 該当のブロックを選択
- メニュー内「高度な設定」→「HTMLアンカー」の欄に任意のid名を入力するだけ！
リンク（ジャンプ）させるボタンを作成する
HTMLでリンクさせるときには<a>タグを使います。
他のページにリンクする場合
通常、例えば当サイトの「ホームページに戻る」といった通常のリンクをつけたい場合、HTMLはこのように記述します。
<a href="ここにURL">ホームページに戻る</a>- <a>タグの中に href=”ここにURL”のように、URLを” “（半角ダブルクォーテーション）で囲んで記述します
- <a></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部分でも今回ご紹介するページ内リンクを使用しています。
まとめ／覚えておくと便利です
- id（アンカー）を設定する方法
- <a>タグを使ったリンクの書き方
- ブロックエディタでの簡単操作
以上についてご紹介しました。
意外と簡単だったのではないでしょうか？
素早く、的確に目的の場所へ飛べる操作性はユーザビリティが上がり、SEOにも期待が持てます。知っておくと便利ですね！
↑このボタンをクリックすると記事の冒頭へ戻ります。
Comment