WordPressでアンカーリンクは超簡単!Gutenbergなら

アンカーの画像 WordPress
この記事は約2分で読めます。

文章の見出しや特定の場所にリンクを貼ることができるアンカーリンク。
たとえば表から特定の見出しにクリックひとつで移動させることができます。
こちらの記事でアンカーリンクをバリバリに使っています。

記事中にある表の動画配信サービス名をクリックすれば、その見出しへと飛ぶようになっていると思います。また「一覧に戻る」をクリックすると、表に戻れます。

WordPressでクラッシックエディターを使っていた時は、ちょっと面倒な記述が必要だったのですが、Gutenbergエディターにしたらめちゃくちゃ簡単にアンカーリンクが使えるようになりました。

投稿編集画面の右に表示される「ブロック」の「高度な設定」にあるHTMLアンカーを使います。

スポンサーリンク

ブロック > 高度な設定 > HTMLアンカー で指定するだけ

WordPressの投稿画面で文章を編集していると右側に表示される投稿とブロック。このブロックの下の方に行くとある「高度な設定」を使います。

見出しにアンカーを設定する手順

たとえば「ここに飛ばすようにする」という見出し部分に飛ばすようにするには、見出しに文字を入力したら、HTMLアンカーに好きな文字を入れます。ここでは「coco」と入力。

これでこの見出しにアンカーが打てました。

見出しに飛ぶようにするには、文字にリンクを設定するだけですが、これが簡単。
リンクさせたい文字を選択し、ツールバーのリンクマークをクリック。

するとリンクを設定するボックスが表示されるので、先程のアンカー名cocoの先頭に小文字で#を付けて入力。すると、下にこのリンクを追加するにはEnt…と出るので、クリック。

これでリンクが設定できました。
ここへ飛ぶの文字をクリックすると、見出しに飛ぶようになります。

実際にここへ飛ぶをクリックすると、この上の見出し飛びます。

Gutenbergならアンカーが簡単に

クラッシックエディターだと、アンカーにうまく飛ばなかったり、HTMLを入力するのが面倒だったりしましたが、Gutenbergエディターだと簡単にできちゃいます。

冒頭の参考記事ように、ユーザーにあちこちに飛んで見て欲しい文章の場合など、アンカー機能は便利です。使い勝手もよくなるんじゃないでしょうか。

コメント