WordPressでアンカーリンク,ページ内ジャンプリンクを作る方法【ブロックエディタと旧エディタ】

ワードプレスでの

• 『ページ内ジャンプリンク』
• 『アンカー』をつける
• 『別ページの特定箇所へのリンクジャンプ』

などは、目次を作るためや必要な誘導線として旧エディタでも多様してきた方も多いと思う。

目次を作るためだけなら、今はプラグインやテーマ機能によって自動でできるのですが、必要な誘導線としてや、ここぞという時にはやはり自由にコントロールできる方がいいですよね…

で、ワードプレスのブロックエディタ（Gutenberg)では

プラグインなしでも簡単になっとわぁあああ！

のですw

少年B カクちやん

ってか『アンカーボタンないんだけど？』

り~ちん

ブロックエディタではデフォルト機能でアンカー簡単に付けられるよ…

TinyMCE Advancedではエディタツールに追加すればいいんだけど、WP Multibyte Patchは必要だよ…

少年B カクちやん

ってか『ジャンプ先がズレるんだけど？』

り~ちん

うん、それも改善方法あるよ。。。

カクちゃん

よし、話したまえ…

ということで今回は、

◆ワードプレスでのアンカーリンクの付け方、ページ内ジャンプリンクの作り方

について！

❤︎1,WordPressでアンカーリンク,ページ内ジャンプリンクの作り方

ブロックエディタの場合はデフォルト機能のみでも簡単にできるようになりました。

TinyMCE Advancedでのアンカーは旧エディタや『クラシック版の段落ブロック』,『クラシックブロック』で設定することができます。

で、本題に入る前に、WordPressに『アンカーボタンない!?』ってなってる方多いようなので先にそこに触れておきます。。

り~ちん

それいい、わかってるって方は飛ばして次の章から進んでくださいね。。

▶︎1-1,アンカーをつけてページ内ジャンプリンクを作る方法【ブロックエディタは楽】

1-0,『アンカーボタンない！？』の場合【TinyMCE Advanced/ブロックエディタ】

どのような状態で『アンカーボタンない！？』ってなってるのかで対処は変わってくるので以下の
3つのポイントをチェックしてみてください↓

Point １

ワードプレスサイトのプラグインのなかに『Multibyte Patch』が入ってなければ自分でインストールしておく必要がある。

※『Multibyte Patch』
＞日本語環境で正しく動作させるために必要となる機能を網羅しているプラグイン。
（WordPress4.9.9までは自動インストールに組み込まれてたプラグイン）

WordPress 5.0 以降、日本語版ワードプレスに 『WP Multibyte Patch』 プラグインは含まれなくなり、

新規で5.0以降をインストールする場合は WP Multibyte Patch を自分でインストールする必要がありました。
（※もしかしたら最新バージョンだとインストール対応されてるかもですが）

なので、ワードプレスバージョン5.0以降の時期にワードプレスを新規でインストールしてる場合で何もしていなければWP Multibyte Patchはインストールされてないはず。。。
（※5.0リリース当初の自動インストールでは4.9.9からインストールされるようになってたので入ってました。）

要は、

自サイトのプラグインのなかに『Multibyte Patch』が入ってなければ自分でインストール＆有効化しておく必要があるということ。。。

これがないとTinyMCE Advancedもうまく機能しなくなったり、バグってエディタツールがうまく表示されなくなる要因にもなるようです。

point 2

アンカーボタンがないだけで他のボタンは普通にある状態なら、
『TinyMCE Advancedの設定で』アンカーボタンを追加させてないだけかも…

追加の仕方は、

ダッシュボード＞設定＞TinyMCE Advanced＞
で、エディターにアンカーボタンをドラッグで追加し、保存。↓

Point 3

◆Gutenberg（ブロックエディタ）でTinyMCE Advancedの『アンカーボタン』を使いたい場合は、

ということになります。

ただ、

ブロックエディタの場合、プラグインなしにデフォルトのままでサクッとアンカー付けられるので、
ジャンプリンクのためだけにTinyMCEの『アンカーボタン』使う必要はないんじゃないかなと……

※逆に『クラシック版の段落ブロック』や『クラシックブロック』内でジャンプさせたい場合はアンカーボタンあった方がやりやすいだろうけども,,,,

※ブロックエディタでTinyMCE Advancedを使いたい場合の設定はこちらのページ参照↓

あわせて読みたい

WordPress ブロックエディタで『TinyMCE Advanced』をフル機能で使う方法 『Gutenberg』のブロックエディタで『Classic Paragraph』を追加して『TinyMCE Advanced』のフル機能を使える状態にしてみた。ブロックエディタと旧エディタのいいとこ取り状態で使えます！

ということでまずは上記のことを確認してみてください。

　では、アンカーリンク、ページ内ジャンプの色々な作り方をば↓

1-1,アンカーをつけてページ内ジャンプリンクを作る方法【ブロックエディタは楽】

見出しブロックだけでなく、普通のブロックや、グループブロックでもアンカー付けるの簡単。

ガイド

❶目次から中見出しへジャンプさせる場合

例えば下図のような場合です

手順❶、
ジャンプさせるリンクを作る。
下図のようにまず範囲を選択 ↓

リンクボタンでアンカーリンクタグを入力 （またはcommand+K）↓

適用ボタン、またはEnterキーで確定 ↓

適応ボタンをクリックすると下図にように表示され、『アンカーリンクタグ』ができる。↓

手順❷
ジャンプ先の見出しブロックに上記で入力したアンカー部分をつけます。

見出しブロックは、プラスボタン（ブロック追加ボタン）で呼び出せる ↓

※各ブロックの呼び出しかたは、最新のGutenbergはもっと短略化できる部分もあるのでそれぞれ好きなようにやってみてくださひw

今回は中見出しなので、『h2』ブロックにしてみました↓

Gutenberg ブロックエディタでのアンカー付け方

手順❸、見出しブロックを選択した状態で、エディタ右下の、『高度な設定』のところに、『HTMLアンカー』というのがあるので、そこに上記で作った『アンカーリンクタグ』の『アンカー』を入力する。（#はいらない）↓

これでOK

飛べるか確認しておきましょううw
たまに確認し忘れた時にかぎって間違ってたりします笑

❷見出し段落以外のブロックへジャンプさせたい場合

で、

上記の場合は『見出しブロック』に設定の例ですが、

現在のブロックエディタでは見出しブロックだけでなく、

これは、

ってことでもある….

例えば

『高度な設定』も『HTMLアンカー』もないブロックに

なんらかの普通のブロック（スペースでもいい）を下や上に加えて『グループブロック化』すれば
普通のブロックのように『高度な設定』枠、『HTMLアンカー』欄が設けられ、
アンカーをサクッと付けられます。

※グループ内の不要なブロックはグループ化してから削除すればOK。

ジャンプ先がショートコードブロックや再利用ブロックなどを使った目次などでもアンカー付けられるので、
『目次へ戻る』なども個別に簡単にでき、

• 位置を自由に決められる
• 付けないページや付けるページを自分で自由にできる

などで楽にコントロールできるということ。。。

色々応用もできるので便利w

ブロックエディタはどんどん進化して便利になってきてますよ…

1-2,別ページの特定箇所へジャンプリンクを作る方法

例）別ページ中見出しへの場合

下図のように、アンカー候補で検索してジャンプ先を指定もできますが、↓

違うページのアンカーはかぶってるなども多いと思うので、これだと見つけづらい….

なので、

そのジャンプ先をブラウザで一度開いてそのURLをコピぺする方法が楽かなと….

手順❶
そのジャンプ先をブラウザで開く
例えばその飛ばせたい場所が、下図のように同じくアンカーリンクを作っているページなら簡単。↓

手順❷
開いたら、そのブラウザの検索窓のURLをコピー ↓

手順❸
リンクを貼りたい場所に戻ってコピペする ↓

これもリンクをクリックしてちゃんとそこに飛べるか確認しておく ↓

もしまだアンカーリンクを作ってない特定箇所に飛ばせたい場合は、

ジャンプ先のその行（または見出し・段落・ブロックなど）にアンカー付けておいて、
リンクジャンプさせたいテキストに、

＊ジャンプ先アンカー↓

<h2 id="a01">見出し</h2>

【Gutenberg】ではジャンプ先の見出しや段落などを選択し、右側の下の方にある高度な設定から＞HTMLアンカーの蘭にアンカー（上記の例ではa01の部分）を記述

＊ジャンプさせるリンク↓

<a href="ページの絶対URL#a01">見出し</a>

そのページURL＋アンカータグ

そんな感じです。

❤︎2,HTMLで書くページ内ジャンプや特定ページ箇所へのジャンプリンク

逆に手打ちでの基本的なところも理解しておくと上記のこともわかりやすくなり応用もしやすくなる。

ブロックエディタの場合、
『HTMLとして編集』や『ビジュアル編集』などをそのブロックごとに切り替えられるのでそこもやりやすい。↓

でまず、

• 飛ばしたい先の『絶対URL』（そのページのURL）に、 『アンカータグ』を決めて書きます。

<a href="ページの絶対URL#a01">見出し</a>

• 『#』は必須で決まり文句みたいなもの
• 『a01』の部分は自由に自分がわかりやすいものにしていい
  （ただし、同じページ内でかぶってしまわないようにする）

なので、

• 目次１（#a01)
• 目次1-1（#b1-1）
• 目次1-2（#b1−2）
• 目次2（#a02)
• 目次2-1（#b2-1）
• 目次2-2（#b2-2）
• 目次3（#a03）

などにするとわかりやすいのではないでしょうか….

で、そこからジャンプさせて素早く目的の内容に辿り着けるようにするには、

• ジャンプ先に、上記で決めた『アンカー』を記述する。

<h2 id="a01">見出し</h2>

これは小見出し h3 とかも同じで、

ジャンプさせるリンクが、↓

<a href="ページの絶対URL#b1-1">見出し</a>

※ブロックエディタ＋目次自動生成できるテーマなどは以下のようにHTMLアンカーを手打ちで打っておくと、管理が更に楽になる（現在は見出しだけでなくほとんどのブロックにつけられる）↓

ジャンプ先見出しが↓

<h3 id="b1-1">見出し</h3>

という感じになる。。。

❤︎3、ジャンプがズレる！？って場合

やり方間違ってないのにジャンプがズレる場合ってあります。

カラムシフトなどでズレると読みづらく、誤クリックなどにもつながり、
運営者としても耐え難いストレスになりますよね。。。

100%バッチリ改善ってまでは難しいのですが、やり方によって簡単にほぼ解消することは可能です。

3-1、ページジャンプ,目次ジャンプがズレる主な3つの要因

ザックリの大枠は上記の3つあたり。

つまり、これらを対策すればだいたいは改善されます。

3-2、ジャンプズレ改善の手段

1. ワードプレスにログインしたままジャンプチェックしている
   ＞上部にワードプレスのバーがある

これの場合は、ログインしてないブラウザでチェックしてみてください。

それでちゃんと着地してれば問題なし…

2. 使用テーマでヘッダー固定バーを設定してる

使用テーマによってはヘッダー固定バーを設置するとかぶってしまうものもあります。

テーマによるものが完全な原因なのであれば、
テーマ作成者やフォーラムで改善方法を問い合わせてみるのが一番かなと。。。

改善できないのであれば、最初から何の問題もないテーマもあるので乗り換えも考慮かなと….

3. 画像遅延ロード系のプラグイン使ってる

この場合、画像や外部リンク広告などのスペースサイズを指定してないことによりおこる問題。

指定してないと遅延の段階ではそのスペースを読み取れないので、表示された瞬間にいきなりそのスペースを設けることになり、ズレる。

画像遅延プラグインが要因での改善策

自分で上げてる画像などはフルサイズで上げて表示サイズ調整しないとか、
高さの値を指定することで改善されますが、

広告スペースや外部リンク画像などの指定は？ってなりますよね。。。。。

ただ、そもそも現在のワードプレスではデフォルトで画像遅延（ネイティブLazy-Load）がサポートされていて、
それによってのジャンプのズレはほぼ生じません。。。↓

※このあたりについての詳しい情報はこちらがわかりやすく、ありがたいです
▶︎WordPress 5.5がネイティブLazy-loadをサポート。画像にloading=”lazy”を自動追加し遅延読み込みさせる|海外SEO情報ブログ

私も色々試してみましたが、プラグインで遅延させるより圧倒的にズレは解消されました。

ただ、このネイティブLazy-Loadってsafariではまだサポートされてないみたいで遅延されない 笑

• safari
• Chromeスマホ版

などはまだのようです。
（Chromeの新しいバージョンでパソコン版はサポートされてる）

サポートされるのは時間の問題っぽい。。。

ということでズレるのはほんと最小限にしたいので、

• ネイティブLazy-Loadでいく
• 画像はアップロードする前に最適化しとく
  ＞サイズ・形式・重さ（圧縮）
• キャッシュ系でもカバーする
• 高速化できるテーマを使う

こんな感じです。

❤︎4、もっと自由に、もっと楽に効率化するには？

上記のアンカーリンクはあくまでもデフォルト状態でも簡単になったよね、という話ですが、

テーマの機能を活用できればこんな面倒な作業は一気に不要になる。。。

◆テーマの目次自動生成機能を使う！

普通に記事を書き、「目次表示」にしておけばいいだけ。

プラグインなし・手打ちなしでも、

• 目次表示の有無をページ単位で変更
• 目次ボタン表示をページ単位で変更
• 見出しを変えても自動で反映
• 目次位置を自由に設置
• デザインを選ぶ&カスタマイズ
• ブロックエディタ機能と組み合わせられる
• 画像遅延ロードによるジャンプズレの改善

などなどがサクッと可能になります。

私も、手動でできることは手動でやる、テーマはデフォルトで十分ってスタンスでしたが、時代は変わりました笑

自動で済ませられることは自動に、テーマでできることはテーマに任せること、「効率化」がどれだけ大事かを今では痛感しています。

プラグインはバージョン更新により不具合が起こったり、更新されなくなってセキュリティ的に乗り換えが必要になったりなどで結構めんどくささがつきまとう。最小限にしておきたいところ。

『SWELL』というワードプレステーマを導入すれば、どれだけ今まで無駄足を踏んでいたか痛感でき、笑えてくるほど楽になります。。。

◆テーマ目次自動生成機能と手打ちアンカーを併用する！

更に、手打ちアンカーと併用して使えば、後管理も効率的になる。

目次自動生成では、HTMLアンカーも都度自動。

リライトなどで見出しを増やしたり、順番を変えても、自動でHTMLアンカーも割り振られる

ただこれは、割り振られたブロックの順番が変動するようなリライトをした場合には、「URLが変わる」ということでもあり、その箇所にリンクしたものはリンク切れになる。

つまりこの場合、リンクした全ての個別修正が必要になってくる場合もあるということでもあります。

が、これはHTMLアンカーのみ手打ちで割り振っておけば解決です。

見出しを増やそうと減らそうと、順番が変わっても、その手打ちHTMLアンカーは残り、既存のURLは変わらず生かされます。

まぁ、ページ単位でのリンクのみにすると決めて組み立てておくのもいいですが、アンカー付けるだけなら現在ワードプレスブロックエディタでは超簡単なので知っておいて損はないと思う。↓

ブロックエディタでのアンカー付け方

詳細は上記
▶ブロックエディタでのアンカー付け方参照

現在ワードプレスブロックエディタでは「ドキュメント既観」から、

「アウトライン」や「リストビュー」で、各ブロックにジャンプしたり、ブロック内容やHTMLアンカー名なども一覧で確認が可能で、

執筆中に全体を把握しつつ効率的な編集が可能になってる。

ドキュメント既観＞アウトラインから見出し全体を閲覧でき、クリックでその見出しに飛べる↓

ドキュメント既観＞リストビューでは、ブロック内容や、HTMLアンカー名も閲覧できる↓

それらも把握した上で、

必要なページには、前もってHTMLアンカーは手打ちで割り振っておき、テーマでの目次自動生成機能と掛け合わせて使えば、リライト・ページ全体の後管理も楽になります。

• SWELLテーマ機能
• ブロックエディタ機能

この２つと、合わせてちょっとの単純で簡単な知識をスパイスすれば、ワードプレスでの記事執筆・運営管理が本当に楽しくなります。

ワードプレステーマの「SWELL」の利点を挙げてくとキリがないのでざっくりまとめると、

SWELLザックリポイント

表示速度やSEOは運営者がサイトをどう管理してるかでも変わってくる部分ですが、
もともと備わってるものが素晴らしい…

そして上記の内容を含め、他のテーマより一歩リードしてる。

とにかく楽！w

※とても気に入ってます。詳細はこちら↓

あわせて読みたい

WordPressテーマ【SWELL】は高機能で運営を圧倒的に楽にする！ ワードプレステーマ『SWELL』のここがいいというところ、カスタマイズ性や機能内容、使い心地、そしてデメリットとは？などを実際購入して使ってる現状から共有したいと思います。

『再利用ブロック』もフル活用！↓

あわせて読みたい

WordPress Gutenberg『再利用ブロック』の使い方【超時短!】 ‘21.02.22⇅ワードプレスのGutenberg（ブロックエディタ）は『再利用ブロック』が超便利。鍵になるのは『編集』。連動での上書き・通常ブロックへ変換・一括管理、ここを理解すればフル活用で時短できる！

ってことで楽しいクリエイトをば！

しゃらんるあぁあああああ❤︎

\(`^`)b (￣v￣)ゞ