アンカーリンクは、あまりたくさん議論されるトピックではありませんが、実はとても便利です。今回は、WordPressでアンカーリンクを作成する方法とそれを今後使用した方がよい理由を、深掘りしてご紹介します。経験から言って、アンカーリンクの使用により、ユーザー体験の向上につながり、長文のコンテンツを閲覧するのが飛躍的に楽になり、Googleの検索結果でも若干有利になります。無料でGoogleの検索結果(つまりSEO)の改善をしたいと思いませんか?😉

アンカーリンクの例

まだアンカーリンクがなんなのかよく分からないという方も、ご安心ください。次の画像の例をご覧ください。箇条書きの文章の全てにアンカーリンクを使用しています。クリックすると、そのコンテンツを含むH2見出しへと移動します。実際にこの記事内で試してみることもできます。アンカーリンクはテキスト、画像、H1-H6見出しなど、どんなものにでも使用できます。

アンカーリンク

アンカーリンク

多くのサイトではアンカーリンクは長文記事のはじめの目次くらいでしか使用されていません。当社のランディングページの例のようにCSSを少し使用すれば、よりクリエイティブでスタイリッシュなものを作ることもできます。

長文記事のアンカーリンク

長文記事のアンカーリンク

また、アンカーリンクの表示はせず、見出しにアンカーリンクを設定しておいて、リンクを直接特定のセクションへの誘導のために使っているサイトもあります。

アンカーリンクのメリットとデメリット

アンカーリンクはどんな時でも使うべきというわけではありません。アンカーリンクをWordPressサイトで使用する際のメリットとデメリットをご紹介します。

メリット

デメリット

メリットがデメリットを確実に上回っていると思いますが、念のため使用する前に知っておきたいデメリットをご紹介しておきます。

アンカーリンクの移動方法

また、アンカーリンクのジャンプ(移動)方法を変更したいという方もいるかもしれません。デフォルトでは、アンカーリンクはページ下部のidへ一瞬でジャンプします。これを不快に感じる方もいるかもしれません。これを滑らかなスクロールでの移動に変更することができます。実際、Kinstaのブログでもこの方法を採用しています。 Page scroll to idなどの無料プラグインを使用してもいいですし、 scroll-behavior: smooth;などのCSSをサイトに追加してもいいでしょう。こちらのStack Overflowの記事では開発者向けの情報が確認できます。

WordPressではよくあることですが、アンカーリンクを追加する方法はいくつかあります。簡単に実施できる次の4つの方法を見ていきましょう。ちなみに次のリンクにはアンカーリンクを使用しています😁

最初にご紹介する方法は、各記事にHTMLを使用して手動でアンカーリンクを追加する方法です。仕組みを理解するために実際に作成してみましょう。

ステップ1

リンクのテキストを作成し、そこに他のリンクで行うのと同じようにハイパーリンクを追加します。

HTMLでアンカーリンクを作成

HTMLでアンカーリンクを作成

ステップ2

URLや記事、固定ページへリンクする代わりに、アンカー名を指定します。URLには「#」そしてアンカー名がつきます。名前はなんでも構いませんが、短く、実際の見出しと関連のあるものにすることをおすすめします。

テキストビュー(HTML)を確認すると次のようになっています。

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

次の例はこの記事内で使用している全てのアンカーリンクです。

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

ステップ3

次に、アンカーリンクのジャンプ先の見出しにidを追加する必要があります。そのためにはWordPressエディタのテキストビュー(HTML)に切り替えます。見出しに(今回の場合H2)idとステップ2で指定したアンカー名を追加します。リンクが正常に機能するにはアンカー名とid属性が完全に一致している必要があります。

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

毎回HTMLを編集するのが面倒だという方も心配はいりません。記事にアンカーリンクや目次を簡単に追加できる素晴らしい無料のWordPressプラグインも存在します。

プラグインを使ってアンカーリンクを追加する

アンカーリンクを最も簡単に追加する方法の一つは無料のプラグインTinyMCE Advancedを利用する方法です。プラグインを使用すると、エディタにショートカットボタンによる機能が追加されます。この記事を執筆している時点での有効インストール数は200万以上、評価は5つ星中4.5となっています。

WordPressプラグインTinyMCE Advanced

WordPressプラグインTinyMCE Advanced

ステップ1

プラグインをインストール、有効化したら記事へ移動し、アンカーテキストにハイパーリンクを作成します。URLや記事、固定ページにリンクする代わりに、#で始まるアンカー名を指定します。

アンカー名を追加

アンカー名を追加

ステップ2

リンク先に指定したい見出しを選択した状態で、上部のボタンの「挿入」をクリックし、「アンカー」を選択します。TinyMCE Advancedをインストールすることで、このボタンがエディタに表示されるようになります。

アンカーを追加

アンカーを追加

ステップ3

ステップ1でつけたアンカー名を入力し、OKをクリックします。このプラグインを使用するとビジュアルエディタから離れる必要が一切ないため、時間を節約できます。HTMLを使用し手動で行う場合、ビジュアルエディタとテキストエディタ(HTML)の両方を行き来する必要があります。

アンカーID

アンカーID

プラグインを使って目次を追加する

さらに作業をスピードアップしたいという方もいるかもしれません😄 常に長文のコンテンツを作成し、必ず記事内に目次(アンカーリンク一覧/ジャンプメニュー)を含めたいという方は目次プラグインを活用するといいでしょう。

優れたユーザーエクスペリエンスは、優れたレンタルサーバーから。Kinstaを無料でお試しください.

おすすめの無料プラグインの一つはEasy Table of Contentsです。このプラグインでは見出しのアンカーリンクを自動で作成し、シンプルなショートコードを使って記事内の好きな場所に自由に挿入することができます。この記事を執筆している時点で、プラグインの有効インストール数は30,000以上、評価は5つ星中4.5です。

WordPressプラグインEasy Table of Contents

WordPressプラグインEasy Table of Contents

ステップ1

プラグインをインストールし、有効化した後に、いくつか変更しておいた方がいい設定があります。「設定」→「目次」から変更が可能です。

Easy Table of Contentsの設定

Easy Table of Contentsの設定

ステップ2

目次を手動で挿入するには記事内の表示したい場所に[ez-toc]のショートコードを挿入するだけOKです。

ショートコード「EZ-TOC」

ショートコード「EZ-TOC」

すると、記事の目次が自動で作成されます。便利ですね。

WordPressの目次

WordPressの目次

表示のされ方、除外、外観など他にもたくさんの設定を変更できます。例えば、記事の最後に必ず「まとめ」という見出しがあるとします。この見出しを除外のリストに追加すると、目次から除外されます。

もう一つのお勧めしたいプラグインはShortcode Table of Contentsです。比較的新しいプラグインですが、KinstaでもインタビューをしているJames Kemp氏の開発したプラグインです。

プラグインを使用して見出しにアンカーリンクを自動で追加する

単純に全ての見出しに自動でアンカーリンクを追加したいという方は、無料のプラグインWP Anchor Headerをチェックしてみてください。全てのH1-H6見出しにアンカーリンクが追加できます。

WP Anchor Header

WP Anchor Header

とても基本的なプラグインで設定もあまり多くありません。インストールし、有効化するだけですぐに利用できます。各見出しには自動で(見出し名から派生した)アンカー名がつけられ、見出しの上にマウスを合わせると小さなアンカーのアイコンまで表示されます。こうすることで、サイト訪問者は、「コピーできるリンクがそこにある」ということが簡単に分かります。

自動作成される見出しのアンカーリンク

自動作成される見出しのアンカーリンク

WordPress 5.0に搭載予定の新しいグーテンベルクエディタ。機能が改善され、アンカーidを見出しに追加することができます。

ステップ1

グーテンベルクブロックの見出しを選択し、右側にある「高度な設定」をクリックします。HTMLアンカーを追加できる画面が表示されます。

グーテンベルクエディタでHTMLアンカーを追加する

グーテンベルクエディタでHTMLアンカーを追加する

ステップ2

そこにリンクしたい場合は、アンカーテキストにハイパーリンクを設定するだけでOKです。URLや投稿、固定ページにリンクする代わりに、#で始まるアンカー名を指定します。

グーテンベルクでアンカーリンクを追加する

グーテンベルクでアンカーリンクを追加する

HTMLを利用したり、プラグインを利用したりせずにアンカーリンクを作成したいという方は、無料のChromeの拡張機能であるAnchor Linksをお試しください。セルフホスティング型WordPress(WordPress.org)、WordPress.com、Medium と完全に互換性があります。

ステップ1

Chromeの拡張機能をインストールしたら、アンカーリンクを追加したい見出しを選択します。次にブラウザのツールバーにある、Anchor Linkのアイコンをクリックします。

Chrome拡張機能でアンカーリンクを追加

Chrome拡張機能でアンカーリンクを追加

背景でアンカーID(見出し名から派生)が作成されます。上記の例では#Header_1となっています。アイコンをクリックすると自動でクリップボードにコピーされます。

クリップボードにコピー

クリップボードにコピー

ステップ2

次にアンカーリンクを追加したいテキストに移動し、通常通りハイパーリンク設定のために、「ペースト」します。

アンカーリンクを追加

アンカーリンクを追加

これで完了です!Chromeの拡張機能では外部のプラグインを使用せずに簡単にアンカーリンクが追加できます。

まとめ

ご覧の通り、WordPressでアンカーリンクを追加する方法はたくさん存在し、手軽さもそれぞれ異なります。長いコンテンツをたくさん公開しているサイトでは、アンカーリンクを追加することで、訪問者が見たいコンテンツにすぐに移動することができるようになります。また、アンカーリンクを使用することで、検索結果画面に「個々のリンク先」が追加で表示されるケースも確認できています。オーガニック検索結果におけるクリック率増加が期待できます。

あなたのWordPressサイトではアンカーリンクを使用していますか?使用しているという方は是非ご自身の体験やご意見をお聞かせください。


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。