この記事では、WordPressの投稿にアンカーリンク(ページ内リンク)を設置する方法をご紹介する。
アンカーリンクは、船の錨(いかり=アンカー)を打つように同じ記事内の好きな場所に目印を立てて、別の場所からサッと移動することができる。
たとえば3,000文字を超えるような長いブログ記事を書いたときに、読者が目次までさっと戻れるようにしたいときなどに便利だ。
なるべくWordPress初心者でも迷わないように、文章よりも写真(スクリーンショット)をたくさん使って解説している。
アンカー(ページ内リンク)の設置方法
WordPressの投稿にアンカー(ページ内リンク)を設置する方法は2種類ある。
ひとつはビジュアルエディタを使う方法。
もうひとつはテキストエディタを使う方法だ。
どちらかといえばビジュアルエディタで設置するほうが簡単だ。
ただWordPressの操作に慣れていたりHTMLの知識がある人は、テキストエディタのほうが早いかもしれない。
自分のレベルに合わせて好きなほうで設置していただきたい。
ビジュアルエディタでアンカーを設置する方法
ここからはビジュアルエディタでアンカー(ページ内リンク)を設置する方法をご紹介する。
アンカー設置の流れは、
- TinyMCE Advanced(プラグイン)をインストールする
- リンク元の設定をする
- リンク先にアンカーを設定をする
の3ステップで、記事内を自由に移動できるページ内リンクが完成する。
TinyMCE Advanced(プラグイン)のインストール
ビジュアルエディタでアンカーを設置するには TinyMCE Advanced というプラグインを使う。
TinyMCE Advancedは、さまざまな文字装飾をボタンひとつで使える入力補助プラグインだ。
すでにTinyMCE Advancedがインストールされている場合はこの項目は不要なので、読み飛ばして次へ進もう。
それでは以下プラグインのインストール手順。
まずは管理画面のプラグイン→新規追加をクリックする。

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

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

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

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

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

リンク元(クリックする場所)の設定
TinyMCE Advancedがインストールできたら、早速アンカーの設定をしていく。
管理画面から投稿→新しい投稿で新しい投稿画面(またはアンカーを設置したい投稿画面)を開こう。

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

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

リンク元に指定したい(クリックして別の場所へ飛ばしたい)文字を選択しよう。
ここで設定した文字をクリックすると記事内の別の場所へスーッと移動するようになる。

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

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

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

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

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

リンク先(飛ばしたい先)の設定
今度はリンク先の設定をする。
設定が完了すれば、先ほど設定したリンク元をクリックすると画面が自動でリンク先のところまで移動するようになる。
まずはリンク先(飛び先)に指定したい場所の文字を選択する。

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

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

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

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

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

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

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

テキストエディタでアンカーを設置する方法
次にテキストエディタでアンカーを設置する方法をご紹介する。
テキストエディタを使うのはWordPressに慣れている人がほとんどかと思うので、細かい説明は抜きでサクッと解説。
まずリンク元を選択する。

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

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

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

リンク先に指定したい文字の直前に
<a id="abc"></a>
と入力する。(#abcのabcの部分にはリンク元で決めた任意の英数字を入力)

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

追伸 ページ分割は読者への愛がない
ここから先は完全な余談なので、興味のある人だけ読んでもらえるとうれしいです。
ボクがアンカーリンクを使おうと思ったのは、ページ分割がキライだからなんです。
ブログやサイトの記事を読んでいるとたまに、細かくページ分割をしている記事に出会いませんか?
アレ、本当にイラッとしちゃうんですよね。
せっかちな性格なので、ページを移動する時間が待てなくてすっかり読むのをやめてしまいます。
きっと同じように感じている人も少なくないと思うし、だからボクはページ分割は極力使いたくないんです。
とはいえ5000文字とか1万文字なんて長い記事だと読むほうも大変ですよね。
とくにスマホだと上まで戻るのも一苦労。
だからボクは、記事の途中に目立つように「目次へ戻る」というアンカーボタンを設置するようにしています。
たとえばこの記事なんかわかりやすいかも。大量に戻るボタンがありますよね。
ページ分割をする理由は人それぞれだと思うんですが、PVが増えるからって理由で分割するのはどうにも納得がいかないんですよね。
読者への愛が足りないなあって。
Googleだって、ブログやWebサイト作りはユーザーのことを一番に考えればうまくいくって言ってますからね。
Google上に愛のある記事が増えれば利用ユーザーは増える。
利用ユーザーが増えれば広告主や広告費も増える。
広告費が増えればアドセンスなどを通してサイト運営者に還元される。
Win Win Winの関係じゃないですか。
PVばかり追い求めるより、三方よしの愛されるブログを作ってまいりましょう。
(Photo by FirmBee)