「お客さんに『リンクを踏んだら別のページの特定の部分に移行させたい』って言われたけど、どうすればいいの？」
Web制作の受注をしていたり、自分でWordPressブログを開設して更新していくと、アンカーリンクの設定で誰もが1度は悩むと思います。
今回は、そんな悩みを持っている人にアンカーリンクについての説明と
具体的な設定方法について紹介していこうと思います。
また、今回はコーディングを利用する場合（主に、静的サイトに実装する場合など）と
コーディングを利用しない場合（WordPressサイト（ブログ）を利用する場合など）の2つのパターンに分けて解説していこうと思いますが
後者の方では、下の記事ページの特定のセクションに飛ばす方法で解説していきたいと思います。
アンカーリンクとは？
見出しや好きなテキストにアンカーリンクを設定することによって
リンクを貼ることによって、指定のページのトップではなく、好きな要素に飛ばすことができます。
例えば、「HTMLにCSSを当てる具体的な方法を知りたい方は、こちらの記事を参考にしてください！」
と記事を紹介したはいいが、HTMLにCSSを当てる方法は記事の最後の方で解説している場合などもあると思います。
そういう場合でも、アンカーリンクの設定をすることによって
リンクをクリックした人を、詳しく解説されている部分に飛ばすことができるということです。
アンカーリンクを設定する方法
コーディングを利用する場合
まずは、コーディングを利用してアンカーリンクを設定する場合ですが
こちらは、aタグのhref属性の内部を変更することで実装できます。
アンカーリンクを設定する手順は、基本的に次の2つ。
①飛ばしたい先のタグにid属性を付ける
②リンクを設定するaタグのパスの最後に、付けたid属性を指定
例えば、「講師紹介」という下層ページを作った上で、トップページにも講師を紹介するセクションを実装し
「VIEW MORE」というボタンを押すことで、その下層ページの真ん中らへんの位置に飛ばしたいとしましょう。
トップページと下層ページが、以下のようなHTML構造だったとします（DOCTYPE宣言やCSSなどは省略）。
トップページ（https://abcschool.comというURLと仮定）
<section>
<h3>講師紹介</h3>
<p>当スクールでは、実績が豊富な様々な講師から指導を受けることができます。</p>
<a href="#">VIEW MORE</a>
</section>（アンカーリンクの当て方を説明してからリンク先を指定するので、href属性は一旦「#」を当てておきます。）
下層ページ（講師紹介ページ：https://abcschool.com/teacherというURLと仮定）
<div id="description">
<h2>講師紹介</h2>
<p>当スクールでは、実績が豊富な様々な講師から指導を受けることができます。</p>
</div>
<div id="teacher-intro">
<div id="teacher01">
<img src="./img/xxx.png" alt="田中講師">
<h3>田中講師</h3>
<p>講師の田中です。今まで50件以上のWebサイトを作ってきた経験から、 理由も交えた分かりやすい教え方をしたいと思います。</p>
</div>
<div id="teacher02">
<img src="./img/yyy.png" alt="鈴木講師">
<h3>鈴木先生</h3>
<p>生徒に寄り添い、理解できないところがあればとことんまで付き合います！よろしくお願いします。</p>
</div>
<div id="teacher03">
<img src="./img/zzz.png" alt="佐藤講師">
<h3>佐藤先生</h3>
<p>前のプログラミング塾で、100人以上を教えてきました。些細なことでも丁寧に指導いたします！</p>
</div>
</div>
トップページのセクション内にはもう少し情報入れた方がいいとは思いますが、まぁそこは本題じゃないので省略。
ここで、トップページの「VIEW MORE」というボタンを押したら、id=”teacher-intro”のdivタグの箇所に飛ぶような設定にしたいと思います。
アンカーリンクは、飛ばしたい先のページの後にid名をつければいいのですが、id名の前に「#」を付けるという決まりがあります。
ということで、講師紹介ページのリンクはhttps://abcschool.com/teacher、id名は”teacher-intro”なので
「VIEW MORE」の部分のaタグのhref属性には
<a href="https://abcschool.com/teacher/#teacher-intro">VIEW MORE</a>となります。
つまり、トップページの該当セクションは
<section>
<h3>講師紹介</h3>
<p>当スクールでは、実績が豊富な様々な講師から指導を受けることができます。</p>
<a href="https://abcschool.com/teacher/#teacher-intro">VIEW MORE</a>
</section>と指定すれば、飛ばしたい講師情報の最初の部分に飛ばすことができます。
コーディングを利用する場合は、このように指定していきます。
コーディングを利用しない場合
続いては、コーディングを利用しない場合です。
主に、WordPressサイト（ブログ）でブロックエディターを使用している場合ですね。
ちなみに、コーディングなしの方法ではありの方法と設定の仕方は違いますが
どちらも「アンカーリンクを設定する作業」なので、やっている内容は同じです。
冒頭でも説明しましたが、こちらの方法では、このブログの記事の1つである
「あしらいってどういう意味？よく使う種類と実装方法についても解説！」という記事の
「下線（アンダーライン）を実装してみよう！」という見出しをリンク先に設定したいと思います。
一応、記事の内容を説明しておくと
この記事では「あしらい」というWeb制作やWebデザインでも重要な装飾についての説明と
あしらいの内の2つの実装方法について解説している記事なのですが
アンカーリンクに設定するのは、「テキストに下線を引く」というあしらいのコーディングの実装について解説している見出しになります。
コーディングなしでアンカーリンクを指定する場合は、
まず、見出しの内容が書いてあるテキストと同じ行にカーソルを当てます。
上のように、いろいろな項目が出ていたらちゃんとカーソルが当たっています。
ちなみに、このブログではSWELLを使っているので上のような表記になります。
カーソルを当てたら、右側の設定から「ブロック」を選択し、下までスクロールすると
最後の方に「高度な設定」がありますので、そこをクリック。
すると、「HTMLアンカー」が出てきますので、そこに文字列を指定します。
もし設定が表示されない場合は、赤枠で囲まれたマークを押すとWordPressの投稿設定が出てきます。
今回は、「下線のあしらい」について解説している見出しなので
「underline」と付けておきます。
これで設定は完了したので、記事を保存します。
これで、アンカーリンクが設定できたはずです。
試しに、下の「ここをクリックしてみてね。」というテキストを押してみてください。
「下線（アンダーライン）を実装してみよう！」という見出しに飛ぶはずです（別のタグでページを開く設定していますが、この記事はまだ続くのでリンク先に飛んだら戻ってきてくださいね。笑）。
おかえりなさい。笑
こんな感じで、リンク先の指定の場所に飛ばすことができるのがアンカーリンク設定です。
まとめ
ということで、今回はアンカーリンクの設定を
コーディングありの場合となしの場合に分けて解説していきました。
軽く復習すると
・コーディングで実装する場合は、aタグのhref属性に、飛ばしたい下層ページのリンクの後ろに「#id名」を付けた指定を行う
・コーディングなしで実装する場合は、選択した要素のHTMLアンカーに文字列を入れ、リンク設定する際に指定するリンクの最後に、「#文字列」を指定する
ということでした。
もし、設定方法などで分からない点や疑問点がありましたら、コメントしてみてくさいね！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント