ブログ運営

【WordPress】ページ内リンク(アンカーリンク)の作り方

2021年6月9日

 

どうも、にわとりちきんです。

 

今回は、ページ内リンク(アンカーリンク)の作り方について紹介します。

ページ内リンクとは、ページ内の任意の場所にジャンプさせるためのリンクのことです。目次などで特によく使われるものですね。

それでは早速、ページ内リンク(アンカーリンク)の作り方を解説します。

 

ページ内リンク(アンカーリンク)の作り方

今回の説明ではプラグイン「Advanced Editor Tools (TinyMCE Advanced)」を導入している前提でお話しをさせていただきます。

というのも、「Advanced Editor Tools」を使用せずに作成することも可能なのですが、テキストエディタを使用してコードを直接入力することになるので、手間がかかってしまいます。

「Advanced Editor Tools」を使えばビジュアルエディタで簡単に設定できるようになるため、作業の効率化という点でもおすすめですので、この機会に導入すると良いかと思います。

Advanced Editor Toolsの導入方法はこちら

【WordPress】投稿ページのツールバーを編集できるプラグイン「Advanced Editor Tools」の使い方

続きを見る

 

それでは、ページ内リンク(アンカーリンク)の作り方を説明していきます。

 

リンクを作成する

 

まず、ジャンプ元のテキストにリンクを設定します。

 

step
1
ジャンプ元のテキストを選択して「リンクの挿入」ボタンをクリックする

 

step
2
リンクを設定する

リンクをつけるときにはルールがあるので、以下の通りに設定してください。

  1. 使用できるのは半角英数字のみ
  2. 先頭に必ず「#」をつける
  3. 「#」の次の文字はアルファベットのみ
  4. ページ内で複数使う場合は全て異なるリンク名にする

例えば「#a01」はOKですが、「#1a」はNGといった感じです。

複数使う場合は「#a01」「#a02」といったように付けるとわかりやすいでしょう。

 

アンカーを作成する

 

次に、ジャンプ先(アンカー)を設定します。

 

step
1
ジャンプさせたい位置を選択して「アンカー」ボタンをクリックする

※「アンカー」ボタンが表示されていない方は、Advanced Editor Toolsの導入方法にツールバーの設定方法を記載しているので、ツールバーに「アンカー」ボタンを追加してください。

 

step
2
アンカーを設定する

アンカーボタンをクリックすると入力画面が表示されるので、アンカーを設定します。

アンカーにはジャンプ先のリンクから「#」を外したものを設定します。

 

設定できるとアイコンが表示されます。

以上で完了です。

 

まとめ

今回は、ページ内リンク(アンカーリンク)の作り方について紹介しました。

目次や任意の文章を読んでもらいたいときなどに使い勝手の良いものなので、ユーザビリティの良いページ作成のためにも覚えておくと良いでしょう!

 

目次と目次からのページ内リンクを自動で作成できるようにしたいという方はこちら

【AFFINGER5】目次を自動で作成してくれるプラグイン「TOC+」の使い方

続きを見る

 

最後まで読んでいただきありがとうございました!

「にわとりちきんのブログ」ではTwitterで最新記事の投稿、更新などのお知らせをしております。

次回も読んでいただけるという方は、是非Twitterのフォローよろしくお願いいたします!

それでは、また!

 

こちらの記事もおすすめ

 

© 2021 にわとりちきんのブログ Powered by AFFINGER5