アンカーリンク!同じページ内にリンク(特定の場所へジャンプ)する方法/HTML

アイキャッチ/アンカーリンクカスタマイズ
お知らせ

2/2(木)09:00 - 2/5(日)23:59
オトクなお買い物のチャンス!
Amazonのタイムセール祭り、
開催されています!

\ポイントアップキャンペーンも同時開催/

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

ページ内リンク?普通の

リンクとは違うの??

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

記事の最後へジャンプ

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

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

\簡単3ステップ/
  • 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のブロックエディタだとこのアンカー指定がとても簡単です。

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

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

HTMLで他のページにリンクさせたいときには<a>タグを使います。

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

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

ホームへ戻る

<a href="https://turicco.com/">ホームへ戻る</a>

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

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

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

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

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

意外に簡単なのだ

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

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

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

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

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

例<a href="https://turicco.com#midashi">見出しへジャンプ</a>

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

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

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

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

html { scroll-behavior: smooth;}

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

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

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

ヘッダー作成

ひとこと

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

知っておくと便利ですね!

ページトップへ戻る

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

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に .(ドット)が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
お役に立てる情報をお届けします
 
この記事を書いた人
はっちゃん

2人の息子(中1、小3)を育てる40代主婦。
子供達の発達障害、次男の難病(ネフローゼ症候群)と向き合う日々。趣味として楽しんでいるCocoonのブログカスタマイズ、暮らしの中で役に立つこと、家族での海釣り記録(姉妹サイト)を主に発信しています。

\Follow/
\Follow/
Turicco

Comment

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