【ワードプレス】ページ下から見出しに戻る方法!アンカーリンクを設定してみよう!

色んな情報を載せたページを作成することありますよね。

そんな時、ページ内でリンクできたら良いな。そう思ったことはありませんか?

結論から言います。

当然ながらできます。

しかも簡単に。

【ワードプレス】ページ下から見出しに戻すアンカーリンクとは?

アンカーリンクは、ページ内で指定場所に飛ばすリンクを言います。

正確に言うと、どこそこのページへというのが普通の内部リンク、どこそこのページのどの場所へというのがアンカーリンクやページ内リンクと呼ばれています。

SEO的には、そんなに重要ではありませんが、ユーザビリティ向上のために設置する場合が多いです。

たくさんの情報を載せたページの一番最後に設置すると、「あ、この情報が一番良かったな。これもう一度読みたいな」と思ったときにそこに戻ることが出来たら便利ですよね。

そんなわけで、本日はアンカーリンクの設置について、レッツトライ!

目次

【アンカーリンク】すでにアンカーは打たれている!?

アンカーリンクを設置する場合、まず初めに「ここに戻りたい!」という場所にアンカーを打たなくてはいけません

ですが、みなさんは以下のプラグインやテーマを使用していませんか?

アンカーを打つ必要がないテーマやプラグイン

ワードプレス有料テーマのswellでは、目次表示が標準搭載ですので、プラグインは必要ありません。

あわせて読みたい
【wordpress】有料テーマはswellをオススメします。
【wordpress】有料テーマはswellをオススメします。現在、お盆限定サマーセール中につき25%OFFです。https://swell-theme.com/今がチャンス!SWELL公式サイトへ!※当ブログはswellを使用して作成しています。ワードプレス...

【ワードプレス】swellの場合

swellでは、見出しにindex_id0から順番に名前がつけられています。

目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。

お友達のちむにーさんのサイトで設置しています。
https://chimu-chimu.com/maternity-application

Table Of Content Plus、Easy Table Of Contentの場合

Table Of Content Plus(TOC+)とEasy Table Of Contentでは、目次の上から順にii-2i-3のように名前がつけられています。

目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。

Table Of Content Plusは4年ほどバージョンアップされていません。
早急にEasy Table Of Contentへ変更をおすすめします

SUGOI MOKUJIの場合

SUGOI MOKUJIでは、st-toc-h-1からst-toc-h-2と順番に名前がつけられています。

目次の上から順番に、h2見出しやh3見出しに関係なく、上から順番にです。

【アンカーリンク】アンカーの設置

プラグインやswellを使用していない方や、見出し以外にアンカーを設置したい方は手動で設置しなければいけません

アンカーというのは英語で錨。ニュアンス的には停泊場所、錨泊場所といったところでしょうか。

まずは、ここに戻りたい!という場所にアンカーを打ちます。

後からわかるよう、ここにアンカーを打ってみます。(実際にアンカーを打っています)

【ビジュアルエディタ】アンカーリンクの設置

[timeline]
[tl label=’step1′ title=’【ビジュアルエディタ】アンカーの文字列’]

アンカーを設置したい文字列を選択します。
画像
[/tl]
[tl label=’step2′ title=’【ビジュアルエディタ】アンカーの設置’]
文字列を選択したら、リンクを貼ります。

リンクを貼るというより、アンカーに名前を付けるイメージです。
画像
[/tl]
[tl label=’step3′ title=’【ビジュアルエディタ】アンカーに名前をつける’]
名前をつける際に、「#」は必須です。
ビジュアルエディタでは仕様により「#」を付けないと、自動成形されてアンカーをドメインと勘違いしたリンク先を出力してしまいます
また、名前が被らないよう注意が必要です。

画像
[/tl]
[/timeline]

【テキストエディタ】アンカーリンクの設置

テキストエディタで設置する場合のほとんどは、タグで設置するかと思います。

タグは、<span id=”anchor”>文字列</a>です。

アンカーの名前は被らないように注意しましょう!

ブロックエディタの場合

画像

ブロックエディタは少し特殊です。

もともと特殊なエディタなのですがw

「HTMLとして編集」を選択することで、従来のテキストエディタに近いエディタをブロック単位で入力することが出来ます。

ここに、<span id=”anchor”>ここにアンカーを入れました!</span>とタグを入れることで、アンカーを打つことが出来ます。

なぜ、aタグでアンカーを打たないのか

基本的に、ワードプレスでなければaタグでアンカーを打ちます。

理由は「わかりやすいから」です。

実はアンカーを付けるのは、どんなタグでもいいのです。

divタグでもtableタグでもpタグでもidがあれば、そこに勝手にアンカーが打ち込まれます。

ですが、ワードプレスでは、aタグでアンカーを作ってしまうと、自動で成形され、そこにリンクがあるように表示されてしまいます。

私はそれを嫌って、spanタグでアンカーを打ち込んでいます。

ただ、ビジュアルエディタではどうしようもなく、aタグでアンカーを打ち込まなければなりません。

【アンカーリンク】リンク先はどうするの?

リンク先は、先程付けたアンカーの名前です。

先程つけたアンカーへ飛ぶ!

実際には<a href=”#anchor”>先程つけたアンカーへ飛ぶ!</a>と記載してあります。

ただ単にリンク先を#anchorにしているだけです。

この場合の「#」は、アンカーの印ですので、名前をつけたidに飛ぶためには、必ず#を付けなければリンクされません。

まとめ

最初に述べたとおり、アンカーリンクはユーザビリティ向上のためです。

集中的な場所を見てもらいたい場合などにも使われます。

また、通常のリンク先にアンカーを指定することで、このドメインのこのページのこのアンカーへというリンクも作ることが出来ます。

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

よかったらシェアしてね!
目次
閉じる