ブロックエディタ(Gutenberg)でアンカーリンク(ページ内リンク)を設定する方法
![](https://kirari-yums.net/wp-content/uploads/2018/06/ダウンロード-18.jpeg)
今回はブロックエディタ(Gutenberg)でアンカーリンクの設定する方法について書きたいと思います。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
アンカーリンク?
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
うん。旧エディタではHTMLで記述してたんだけど…ブロックエディタではどうやって設定すればいいのかなぁ?って思ったから今回書いてみることにした!
アンカーリンクとは?
アンカーリンクとは、「アンカータグ」と呼ばれるHTMLソースを設定し、aタグでアンカータグを設置した場所にジャンプさせるリンクのことです。
特定の場所にジャンプさせることができるのでページ内リンクなどで使われます。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
なるほど~!アンカータグをつけた場所にジャンプさせるからアンカーリンクっていうんだね。
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
アンカーリンクを使えば自分で目次を作ったりすることもできるよ。
ブロックエディタでこのアンカーリンクを設定する方法をHTMLも一緒に紹介します。
ブロックエディタでアンカーリンクを設定する
アンカーリンクを設定する手順は2つです。
- ジャンプさせたい場所にアンカータグ(id属性)をつける
- aタグでリンクを設定する
アンカータグをつける
ではジャンプさせたい場所にアンカータグをつけます。(ここでは見出しにアンカータグをつけます)
アンカータグはid属性を使用して設定します。HTMLは以下のようになります。
<h3 id="アンカー名">見出し</h3>
複数アンカータグをつける場合の注意点
1ページに複数のアンカータグをつける場合は同じアンカー名をつけないでください。必ず一つ一つ違うアンカー名をつけてください。
ジャンプさせるためのリンクを設定する(ページ内リンク)
続いてアンカータグをつけた見出しにジャンプさせるためのリンクを設定します。
リンクを設定するテキストを選択する
ブロックのツールバーの中のリンクアイコンをクリックする
URLを入力する欄に「#」をつけてアンカー名を入力する
![](https://kirari-yums.net/wp-content/uploads/2021/10/F320EAA3-1F6A-4EEF-A12C-3F1E2EE20729.jpeg)
入力したら右の矢印をクリックすれば設定完了です。
上記のリンクのーHTMLは以下のようになります。
<a href="#アンカー名">リンクをつけるテキスト</a>
上記は同一ページ内に設定したアンカーにジャンプさせる方法です。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
ブロックエディタだと簡単に設定できるんだね。
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
うんうん。簡単だよね~。きらりでもできるんだもんねぇ(笑)
他のページの特定の場所にジャンプさせる
他のページの特定の場所にジャンプさせる場合はジャンプさせるページの見出しなどにアンカー名を設定し、リンクのURL欄にページのURLの後ろに「#アンカー名」を入力してください。
他のページの特定の場所にジャンプさせるリンクのURLは以下のようになります。
<a href="他のページのURL/#アンカー名">リンクをつけるテキスト</a>
ページ内リンクで位置がずれる場合の調整方法
ページ内リンクでジャンプした時、表示される位置がずれることがあります。
ジャンプ後の位置はCSSを使えば簡単に調整できます。位置の調整方法については以下のページを参考にしてください。
最後に
今回はアンカーリンクについて書きました。
ページ内リンクを使うとユーザビリティが上がりSEO的に良いといわれています。
アンカーリンクを使って目次などを作成すればユーザーが知りたい項目をすぐに見つけやすくなり、利用しやすくなると思います。
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
とはいっても1ページずつ目次を作るのはとても大変なのでプラグインやテーマなどに目次機能があるならそれを利用した方が簡単です。
![](https://kirari-yums.net/wp-content/uploads/2021/07/3D2E8421-8FC7-41BD-A116-DCAC36E3715A.png)
ボクも目次はテーマの昨日におまかせw
アンカーリンクを使ってユーザーが使いやすいサイトを作れるといいですね。
ディスカッション
コメント一覧
まだ、コメントがありません