【超簡単!】ブロックエディタのページ内リンク(アンカーリンク)の作り方!

【超簡単!】ブロックエディタのページ内リンク(アンカーリンク)の作り方!

WordPressのブロックエディタでページ内リンク(アンカーリンク)を設置する方法をご紹介します。

ブロックエディタでは、HTMLを編集したり、プラグインを使用せず、簡単操作でページ内にリンクを貼ることができるので、みなさんぜひ試してみてください。

目次

ページ内リンクとは?記事内の任意の箇所にジャンプできる機能

ページ内リンクとは同じページ内の任意の箇所にリンクを設置することが出来る機能です。アンカーリンクとも言われます。

例えば、以下のリンクをクリックしてみてください。記事の先頭まで戻ります。

記事の先頭に戻る!!

さとしん

これがページ内リンクです!よく見かけますよね…!

実際の使用例はこちらの記事内を見てみてください。リンクした先にある以下画像の部分をクリックするとページ内ジャンプするようになっています。

ページ内リンクの使用例

参考>>SWELLのブロックエディタは使い心地が最高でした【WordPressテーマレビュー】

ちなみに各記事の先頭にある目次も、同じようにクリックすると対象の部分までスクロールするようになっています。

さとしん

目次が1番イメージしやすいかもしれませんね…!

記事の中でうまくページ内リンクを活用すると、読者にとって見やすい記事にもなると思います。

ぜひ作り方を覚えておきましょう。

ブロックエディタではHTMLコードを編集せずにリンクを作れる

ブロックエディタではとても簡単にページ内リンクを作ることができます。

旧エディタ(クラシックエディタ)では、HTMLコードを編集したりする必要がありました。

といっても特に難しくは無いのですが、ブロックエディタではより簡単にリンクが設置できるようになっています。

ブロックエディタのページ内リンクの作り方

では、早速ブロックエディタでページ内リンクを設置する方法を解説していきます。

今回はこの動画の様なページ内リンクを作ってみたいと思います。

以下の手順ですすめていきます。

STEP
リンク先にしたい箇所のブロックを選択
ページ内リンクの設定方法-1
STEP
サイドバーの「高度な設定」タブを開く
ページ内リンクの設定方法-2
STEP
HTML アンカー欄にお好きなテキストを入力

お好みでOKですが、英数字で良いと思います。ここでは「link」と入力しました。

ページ内リンクの設定方法-3
STEP
リンク元のブロックを選択し「リンク」をクリック
STEP
「#」を先頭に付けてSTEP3で設定したHTML アンカーを入力

この例では、「#link」と入力すればOKです。

ページ内リンクの設定方法-5

これでページ内リンクが完成です。プレビューからしっかり動作するか確認してみてください。

さとしん

割と簡単にできますよね…!

別記事の任意の箇所にリンクを貼る方法

少し応用して、別のページの任意の箇所にリンク貼る方法もご紹介します。

通常の別記事へのリンク(内部リンク)は皆さん設置されていると思いますが、たまに別の記事の途中の部分にリンクを飛ばしたいというケースもあります。

この記事の前半部分でも使用例として、別記事の途中の部分にリンクを飛ばしています。

この動画の様なイメージです。

これも簡単にできますので、覚えておくと便利です。

以下の手順で設定可能です。

STEP
別記事のリンクを設置したいブロックにHTMLアンカーを入力

先ほどと同様に「link」としています。

ページ内リンクの設定方法-3
STEP
リンク元のブロックの「リンク」に記事のURL+#+HTML アンカーを入力

リンク先の記事URLがhttps://example.com/test/だった場合は、以下のように入力します。

https://example.com/test/#link

別記事へのリンク

これで別記事の好きな箇所へリンクを設置できます。

さとしん

こちらも簡単にできますね…!

ページ内リンクの機能を使って目次を作ることもできる

このページ内リンクの機能を使うとオリジナルの目次を作成することができます。

サクッと作ってみましたが、以下のようなイメージです。

ページ内リンクで目次を作る

自分のお好みのデザインに調整することもできるので、目次の機能が無いテーマを使用している方は必要に応じて作ってみてください。

【参考】目次を自動で作成してくれるプラグイン

上記の方法で目次を作成することができますが、少々手間がかかります。

もし、使っているテーマで目次の生成機能が無い場合は、プラグインを使って目次を作成することもできます。

例えば公式ディレクトリからインストールできる、プラグイン「RTOC」は記事内の見出しを抽出して、自動で目次を生成してくれます。

さとしん

デザインも複数選ぶことができますよ…!

【参考】目次を自動で作成してくれるテーマ

もし可能であれば、目次を自動で生成する機能を持ったテーマを使う方法もおすすめです。

そのテーマのデザインや雰囲気に合ったスタイルの目次を記事内に設置することができます。

例えば、当サイトでも使用しているWordPressテーマ『SWELL』は目次の自動生成機能が標準で用意されています。

さとしん

SWELLはブロガーさんにおすすめのテーマです…!

このように目次の生成機能が搭載されているテーマを選んでおくと、難しい設定やカスタマイズも不要なのでとても便利です。

ページ内リンクをうまく活用して分かりやすい記事を作ろう!

今回は、WordPressのブロックエディタでページ内リンクを設置する方法をご紹介しました。

ページ内リンクを適切に使えると、読者にとっても分かりやすいコンテンツが作れると思います。

設定方法も簡単なので、ぜひ操作を覚えて活用してみてください。

また、クラシックエディタを長く使っていた人には、ブロックエディタが使いにくいと言う方も多いですが、クラシックエディタよりも簡単になった機能も多くあります。

WordPressの開発はブロックエディタが中心になっていますので、ぜひブロックエディタを使ってみてほしいなと思います。

さとしん

慣れるととっても楽しいですよ…!

ブロックエディタの基本操作は当サイトでも解説していますので、ぜひ見てみてください。

そして、ブロックエディタの使い心地はWordPressのテーマによっても大きく変わってきます。

先ほども紹介した、当サイトでも使用している『SWELL』は、ブログ向けで開発されたブロックエディタ完全対応のテーマです。

今使っているテーマのブロックエディタが使いにくいなと感じている方はぜひSWELLの公式サイトを見てみてください。

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

【超簡単!】ブロックエディタのページ内リンク(アンカーリンク)の作り方!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタが好きです!WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる