この記事では、WordPressの投稿にアンカーリンク(ページ内リンク)を設置する方法をご紹介する。

アンカーリンクは、船の錨(いかり=アンカー)を打つように同じ記事内の好きな場所に目印を立てて、別の場所からサッと移動することができる。

たとえば3,000文字を超えるような長いブログ記事を書いたときに、読者が目次までさっと戻れるようにしたいときなどに便利だ。

なるべくWordPress初心者でも迷わないように、文章よりも写真(スクリーンショット)をたくさん使って解説している。

アンカー(ページ内リンク)の設置方法

WordPressの投稿にアンカー(ページ内リンク)を設置する方法は2種類ある。

ひとつはビジュアルエディタを使う方法。

もうひとつはテキストエディタを使う方法だ。

どちらかといえばビジュアルエディタで設置するほうが簡単だ。

ただWordPressの操作に慣れていたりHTMLの知識がある人は、テキストエディタのほうが早いかもしれない。

自分のレベルに合わせて好きなほうで設置していただきたい。

ビジュアルエディタでアンカーを設置する方法

ここからはビジュアルエディタでアンカー(ページ内リンク)を設置する方法をご紹介する。

アンカー設置の流れは、

  1. TinyMCE Advanced(プラグイン)をインストールする
  2. リンク元の設定をする
  3. リンク先にアンカーを設定をする

の3ステップで、記事内を自由に移動できるページ内リンクが完成する。

TinyMCE Advanced(プラグイン)のインストール

ビジュアルエディタでアンカーを設置するには TinyMCE Advanced というプラグインを使う。

TinyMCE Advancedは、さまざまな文字装飾をボタンひとつで使える入力補助プラグインだ。

すでにTinyMCE Advancedがインストールされている場合はこの項目は不要なので、読み飛ばして次へ進もう。

それでは以下プラグインのインストール手順。

まずは管理画面のプラグイン→新規追加をクリックする。

プラグイン→新規追加をクリック
プラグイン→新規追加をクリック

画面右上のキーワードと書かれた部分の右側にある空欄(検索窓)にカーソルを合わせよう。

右上のキーワードと書かれた右の空欄へ
右上のキーワードと書かれた右の空欄へ

検索窓に tinymce advanced と入力する。

 tinymce advanced と入力
tinymce advanced と入力

すると検索結果の中に TinyMCE Advanced というプラグインが表示される。

TinyMCE Advancedというプラグインが表示される
TinyMCE Advancedというプラグインが表示される

今すぐインストール をクリックしてTinyMCE AdvancedをWordPressにインストールしよう。

今すぐインストールをクリック
今すぐインストールをクリック

最後に 有効化 をクリックすればTinyMCE Advancedの準備は完了だ。

有効化をクリック
有効化をクリック

リンク元(クリックする場所)の設定

TinyMCE Advancedがインストールできたら、早速アンカーの設定をしていく。

管理画面から投稿→新しい投稿で新しい投稿画面(またはアンカーを設置したい投稿画面)を開こう。

投稿→新規追加で投稿ページへ
投稿→新規追加で投稿ページへ

右上にテキストとビジュアルのタブがあるので、ビジュアルをクリックする。

右上のビジュアルをクリック
右上のビジュアルをクリック

すると入力部分の上のほうにTinyMCE Advancedについている入力補助ボタンがたくさん出てくる。

入力補助ボタンがたくさん出てくる
入力補助ボタンがたくさん出てくる

リンク元に指定したい(クリックして別の場所へ飛ばしたい)文字を選択しよう。

ここで設定した文字をクリックすると記事内の別の場所へスーッと移動するようになる。

リンク元の文字の左端にカーソルを合わせる
リンク元の文字の左端にカーソルを合わせる

マウスのボタンを押したまま横に移動すると、文字が選択されて青く反転する。

マウスをクリックしたまま右にスライドして選択
マウスをクリックしたまま右にスライドして選択

リンク元の文字を選択したら、上のボタンの中にある リンクの挿入/編集ボタン をクリックしよう。(くさりのような形のボタン)

右上のリンクの挿入/編集ボタンをクリック
右上のリンクの挿入/編集ボタンをクリック

すると文字が入力できる空欄があらわれるので、カーソルを合わせて小文字の # を入力する。

まず小文字の # を入力(Shift+3)
まず小文字の # を入力(Shift+3)

#につづけて、好きな英数字を入力しよう。(#はキーボードのShiftボタン+3で入力できる)※先頭に数字は使えない

好きな英数字を入力 例)abc
好きな英数字を入力 例)abc

英数字を入力して右側の青い確定ボタンをクリックすれば、リンク元の設定は完了。

これでリンク元(飛び元)の設定は完了
これでリンク元(飛び元)の設定は完了

リンク先(飛ばしたい先)の設定

今度はリンク先の設定をする。

設定が完了すれば、先ほど設定したリンク元をクリックすると画面が自動でリンク先のところまで移動するようになる。

まずはリンク先(飛び先)に指定したい場所の文字を選択する。

リンク先(飛び先)に指定したい文字を選択する
リンク先(飛び先)に指定したい文字を選択する

選択したら右上の アンカーボタン をクリックしよう。

右上のアンカーボタンをクリック
右上のアンカーボタンをクリック

アンカーボタンをクリックすると入力画面が表示されるので、先ほど設定した英数字を入力する。※英数字のみ。#は不要

さっき決めた英数字を入力
さっき決めた英数字を入力

これで設定は完了なので、きちんと反映されているか画面右上のプレビューでチェックしよう。

プレビューで成功しているかチェック
プレビューで成功しているかチェック

プレビュー画面が開いたら、リンク元をクリックして、リンク先まで移動するか確認する。

リンク元をクリックしてみる
リンク元をクリックしてみる

画面がスーッと上(下)に移動すれば完成。

画面がスーッと移動すれば成功
画面がスーッと移動すれば成功

ひとつ注意点があって、英数字を決めるところで先頭に数字を使うことはできない。もちろん数字だけを指定することもできない。

111は指定できない(数字だけだから)
111は指定できない(数字だけだから)

入力に失敗すると下記のエラーが表示される。

数字だけを入力するとこんなエラーが出る
数字だけを入力するとこんなエラーが出る

テキストエディタでアンカーを設置する方法

次にテキストエディタでアンカーを設置する方法をご紹介する。

テキストエディタを使うのはWordPressに慣れている人がほとんどかと思うので、細かい説明は抜きでサクッと解説。

まずリンク元を選択する。

今日の天気(リンク元)を選択
今日の天気(リンク元)を選択

linkボタンをクリックする。

linkボタンをクリック
linkボタンをクリック

URLに#と任意の英数字を入力する。(例:#abc)

URLに #abc と入力
URLに #abc と入力

これでリンク元の設定は完了。

リンク元の設定は完了
リンク元の設定は完了

リンク先に指定したい文字の直前に

<a id="abc"></a>

と入力する。(#abcのabcの部分にはリンク元で決めた任意の英数字を入力)

リンク先の直前に<a id="abc"></a>と入力
リンク先の直前にコードを入力

あとはきちんと飛べるかチェックして完了。

きちんと飛べるかチェック
リンク先へきちんと飛べるかチェック

追伸 ページ分割は読者への愛がない

ここから先は完全な余談なので、興味のある人だけ読んでもらえるとうれしいです。

ボクがアンカーリンクを使おうと思ったのは、ページ分割がキライだからなんです。

ブログやサイトの記事を読んでいるとたまに、細かくページ分割をしている記事に出会いませんか?

アレ、本当にイラッとしちゃうんですよね。

せっかちな性格なので、ページを移動する時間が待てなくてすっかり読むのをやめてしまいます。

きっと同じように感じている人も少なくないと思うし、だからボクはページ分割は極力使いたくないんです。

とはいえ5000文字とか1万文字なんて長い記事だと読むほうも大変ですよね。

とくにスマホだと上まで戻るのも一苦労。

だからボクは、記事の途中に目立つように「目次へ戻る」というアンカーボタンを設置するようにしています。

たとえばこの記事なんかわかりやすいかも。大量に戻るボタンがありますよね。

ページ分割をする理由は人それぞれだと思うんですが、PVが増えるからって理由で分割するのはどうにも納得がいかないんですよね。

読者への愛が足りないなあって。

Googleだって、ブログやWebサイト作りはユーザーのことを一番に考えればうまくいくって言ってますからね。

Google上に愛のある記事が増えれば利用ユーザーは増える。

利用ユーザーが増えれば広告主や広告費も増える。

広告費が増えればアドセンスなどを通してサイト運営者に還元される。

Win Win Winの関係じゃないですか。

PVばかり追い求めるより、三方よしの愛されるブログを作ってまいりましょう。

(Photo by FirmBee)