Gutenbergで内部リンクを張る方法


新エディタ、グーテンベルクで内部リンクを張る方法・特定箇所へジャンプさせる3つの方法をご紹介します。

内部リンクを張る方法

内部リンクとは、自分のサイト内のページとページをつなぐリンクのことです。


まず、リンクを貼りたい文字をドラッグして選択します。リンクをクリックします。


すると上図のような画面が表示されます。

リンク先のページを別タブで表示したい場合 → ①をクリックすると②が表示されるので、クリックしてオンの状態(青色)にします。


③にタイトル名の一部を入力すると、自分のサイト内の候補ページが表示されるので選択します。または、リンク先(ページ2)のURLを貼りつけます。

④の適用ボタンをクリックして設定完了です。


内部記事の特定箇所にリンクを設定する方法

方法1

内部のリンクを張りたいページを開きます。

目次でリンクを張って開きたい項目をクリックしてから、URLをコピーします。

あとは先程と同じ手順でURLを貼り付け、適用ボタンを押し設定完了です。


方法2 アンカーを使う

同じページ内


【ジャンプ元の設定】

リンクを貼りたい文字列をドラッグし範囲を選択します。

リンクをクリックし、#test(任意)を入力、適用をクリックします。


【ジャンプ先の設定】

ジャンプ先にアンカーをつけます。アンカーをクリック。

こちらには#は不要ですので、注意して下さい。OKをクリック。

id名は任意でつけることができますが、1ページ内で1回のみです。同じ名前は付けられません。


アンカーを使って自分のサイト内の他のページ特定箇所へジャンプする方法

【ジャンプ元の設定】

リンクをクリックし、ジャンプ先のURLを貼り付け、URLの直後に#testと入力します。適用をクリック。

【ジャンプ先の設定】

ジャンプ先のページのURLをコピーしておき、ジャンプ元の設定の際貼り付けます。

ジャンプしたいブロックでアンカーをクリックします。

ID名を入力しOKをクリックします。

すると上図のようにイカリのマークが表示されます。これで完了です。
アンカーを外したい際は、このイカリマークを削除すれば解除できます。

そもそもアンカーボタンがないという方は Gutenbergで TinyMCE Advancedを使うをご覧ください。

プラグインはなるべくいれたくないという方でも、Gutenbergでは「高度な設定→HTMLアンカー」というものがあります。

方法3  Gutenbergの「高度な設定→HTMLアンカー」を使う

まず上記と同じ手順で、ジャンプ元の設定をします。


ジャンプ先のブロックをクリックし、画面右の高度な設定→HTMLアンカーにID名を入力します。

見出しにジャンプさせたい時には高度な設定をつかえば簡単ですね。

以上で完了です。

画像にリンクを貼る方法は?という方は下記関連記事をご覧ください。

WordPress画像にリンクを設定する方法(Gutenberg)

2019-08-19

内部リンクを設定し、クローラビリティを高めることで、クローラーがインデックスしやすいサイトを作ることを意識していきたいですね。

それでは最後までご覧頂きありがとうございます。