3分でできる！ワードプレスGutenbergでページ内リンクを貼る方法

2021年7月12日

ページ内リンクとは、ページ内の特定場所に飛ばすことができるアンカーリンクのことです。

本記事では、Gutenberg（ブロックエディター）でページ内リンクを貼る方法を3分で解説します。

ページ内リンクを貼る方法の概要

1. 飛ばしたいブロックにid名をつける
2. 付けたidへのリンクを貼る

これだけです。

それでは、具体的にやってみましょう。
例として、本章の見出し”ページ内リンクを貼る方法概要”へ飛ばすリンクを貼る作業をしていきます。

ページ内リンクを貼る具体的手順

（手順１）飛ばしたいブロックにid名をつける

１．飛ばしたいブロックを選択

見出し”ページ内リンクを貼る方法概要”にカーソルを置いて選択状態とします。

２．画面右パネルの”高度な設定”を開けてHTMLアンカーに任意のid名を入力

今回は、”title-gaiyou”というid名にしました。
※id名は半角英数および記号（-や_）。頭は英字から始めてください。

（手順２）リンクを貼る

段落ブロックでリンク用テキストを入力して、リンクを貼ります。リンク先は#+id名です。

以下の例は”方法の概要はこちら”というテキストにリンクを貼る手順です。

①テキストを入力
②入力したテキストをドラッグして選択
③ツールバーのリンクボタンをクリック
④#+id名を入力
⑤リターンマークをクリックして確定

実際に次のテキストにリンクを貼ってみましたのでクリックして確認ください。

方法の概要はこちら

ページ内リンクを貼る方法は以上です。3分でわかりましたでしょうか？（汗）

別ページからリンク先ページの特定場所に飛ぶことも可能

今回はあくまでページ内の特定場所へリンクを飛ばす方法でしたが、別ページからでも特定の場所を指定することが可能です。

リンク先をURL+#+id名とするだけです。

簡単ですよね。

まとめ

まとめると次のようになります。

1. 飛ばしたいブロックにid名をつける
   高度な設定＞HTMLアンカーにid名を入力
2. 付けたidへのリンクを貼る
   ページ内リンクならば#+id名
   ページ外からのリンクならばURL+#+id名