SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

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

  • URLをコピーしました!

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

ページ内リンクの設定方法を30秒で確認!
ページ内リンク

※テキストと画像を使った解説は記事内の「ブロックエディターのページ内リンクの作り方」参照。

ブロックエディターでは、上記動画のとおりHTMLを編集する必要もなく、簡単操作でページ内リンクを設置できます。

さとしん

記事内で頻繁に使うテクニックだと思うので、ぜひ覚えておいてください…!

この記事の内容
  • ページ内リンクの機能紹介
  • ページ内リンクの設定方法
目次

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

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

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

記事の先頭に戻る!!

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

さとしん

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

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

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

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

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

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

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

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

ブロックエディターでページ内リンクを設定する方法を以下の2種類紹介します。

  1. 同じページ内でページ内リンクを設置する方法
  2. 違うページの特定の箇所にリンクを設置する方法

同じページ内でページ内リンクを設置する方法

以下の動画のように、ページ内の任意の箇所にジャンプするページ内リンクの作り方を紹介します。

以下の手順でページ内リンクを設定できます。

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はブロガーさんにおすすめのテーマです…!

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

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

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

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

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

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

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

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

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

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

さとしん

今使っているテーマのブロックエディターが使いにくいなと感じている方には特におすすめです…!

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


ブロックエディターの基本的な使い方はこちら↓↓

ブロックエディターの記事執筆を効率化するショートカットキーまとめはこちら↓↓

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる