最初にブログを書き始めたAmebaOwndではページ内リンク（ページ内ジャンプ）の設定ができず、不便な思いをした。他にもいろいろと不自由な点があったので、一大決心をしてワードプレスでブログを書くことにし、契約したエックスサーバーへのブログサイトの大引っ越し作業を敢行した。
早速ページ内リンクを作成して大感激したが、自分が想定したよりも使用頻度は少なく、老齢化のせいもあってページ内リンクの設定方法をすぐに忘れてしまう。作成するたびにやり方の検索を繰り返してきたが、更なる記憶力の低下に備えて、以下に備忘録として記録しておくことにした。
ページ内リンク（アンカーリンク）とは
同一記事内で、ある部分にリンクを設定してそこに飛ばすこと。例えば、上にある目次の項目をクリックすると、該当部分にジャンプするような設定のこと（補注：ワードプレスでは目次の自動作成機能があるので、目次に関しては手動で設定しなくてもページ内リンクが作成される）。
以下は目次のように自動作成されたページ内リンクではなく、私が作成したページ内リンクの例（クリックしてみて下さい）：
「リンク先」にジャンプ ☜ クリックしてリンク先に移動（下のリンク元に戻ってこられます）
「リンク元」 ☜ ここに戻ってきた
ページ内リンク（アンカーリンク）の設定
リンク先（飛ばす先）の操作
手順① リンク先（ジャンプ先）の文章や画像などを選択する
ドラッグして指定してもよいし、単純にカーソルを置くだけでも良い。
手順②「高度な設定」をクリック
画面上部のワードプレスのメニューバーで、右端から2番目の設定ボタン（右端の縦の三点リーダー「︙」の左横アイコン。□の中に縦線があるアイコン）を選択。一番下の「高度な設定」をクリックする。なお、スマホを用いてリンク設定する場合は、画面の上から２段目のメニューバーにある。
手順③ HTMLアンカーに適当な文字列を入力する
表示された「HTMLアンカー」のボックス内に適当な単語や文字列を入力する。例えば、「jumpto」とか 「123」とか「リンク先」とか。この際にスペースは使用しないこと。同一記事内でページ内リンクを複数設定する場合は同じ名前にしないこと。数字やアルファベットで区別すると良い（リンク先１、リンク先２など）。
リンク元（ジャンプ元）の操作
手順④ リンク元の文章などを選択する
単語や文章をドラッグして選択する。
手順⑤ 選択したリンク元にリンク設定（アンカー設定）する
選択した部分の上か下に表示されるボックスメニューの中の「リンクアイコン」（右から3つ目）をクリックし、表示されたボックス内に「＃＋HTMLアンカーとした文字列」を入力してボックス右端のエンターキーをクリックする（＃のすぐ後にHTMLアンカーとして手順③で作成したjumptoなどの文字列を入力。#jumpto のように。＋は不要）。なお、スマホを用いてリンク設定する場合は、上から３段目のメニューバーにある。メニューバーを左へスライドさせればリンクアイコンが現れる。
リンク先の表示の位置調整（ヘッダーやメニューバー等の干渉回避）
上記の手順で作成したページ内リンク（アンカーリンク）が正しく動作することをプレビュー画面で確認する（ワードプレスのメニューバーの「下書き保存」と「公開」の間にある山高帽子のようなボタンをクリック）。場合によっては、リンク先の行がヘッダー部分やメニューバーの下に隠れてしまうことがあるので、以下のいずれかの方法でリンク先の表示位置を調整する。後述するようにこの現象はデスクトップ（PC）の表示で発生するもので、モバイル（スマホやタブレット）では発生しない。
ヘッダーの追従設定をOFFにして位置調整する方法
リンク先に飛ばした際に、リンク先がヘッダー部分やメニューバーに隠れてしまう現象は、ワードプレスのテーマとして使用するCOCOONなどの設定で、ヘッダーを「追従」設定している場合などに見られることがある。当ブログの場合、デスクトップ（PC）の表示設定でヘッダー背景画像の下に緑色のグローバルナビメニューを設定している。画面を下にスクロールしてもナビメニューが常時表示されるように「追従」の設定をONにしていたため、リンク先がこの緑色のメニューバーの下に隠れてしまった。「追従」設定を外したところ、リンク先が隠れずに画面の一番上に表示されるようになった。なお、モバイル（スマホ）の場合はナビメニューの表示の仕方が異なり、必要な時にメニューボタンで呼び出す方式なので、この問題は発生しない。
追従のON/OFF設定は以下の通り：
１） ワードプレスのダッシュボードの左側メニュー一覧から「COCOON設定」を選択する
２） 右側のメイン画面の上に並んでいるメニューから「ヘッダー」を選択（上段の左から３つ目）
３） ヘッダーのプレビュー画像の下に並ぶメニューで、上から二つ目の「ヘッダーの固定」において、 「ヘッダーを固定する」の前にあるボックスのレ点をクリックしてOFFにする
ヘッダーの追従設定をONにしたまま位置調整する方法
ヘッダーの追従をONにしたままでリンク先の表示位置調整をしたい場合は、ヘッダーに隠れている幅の分だけリンク先の表示位置を調整する方法がある。『ページ内リンク 位置調整方法』などとネット検索すれば、位置ずれを修正する方法のブログ記事がたくさん出てくる。phpやjQueryやCSSなどで調整することになるのでそれなりの知識を要するが、私のような素人でも比較的簡単に調整できるCSSを追加する方法を以下に紹介する。
以下の青線で囲ったCSSコードを「追加 CSS」に加筆またはコピペする。
下から３行目と２行目の「height」と「margin」の数字をいろいろ試行錯誤して微調整する（例えば50pxとか150pxとか）。私の場合は、リンク先の表示位置を90px分だけ下げる設定にしたところ、リンク先が緑色のグローバルナビメニューに隠れることなく、メニューの下に表示されるようになった。迷った挙句、最終的にはメニューバーを固定しない方法にすることにした。
細かいことを言うと、スマホの場合はメニューバーを必要時に呼び出す方式で、常時表示させる「追従」設定がない。そのため上述のような方法でリンク先の表示位置を調整すると、スマホ画面では一番上ではなく、位置調整した分だけ下がった位置に表示されるようになる。現時点でPCとスマホの両方のリンク先表示を最適化する方法は分からないが、スマホの場合の少し下がった位置の表示でも特に違和感はないと思う。
この方法で調整する場合には、実際にプレビュー画面で確認しながらリンク先の表示が最適になるように、height とmarginの数字をいろいろ変えて試すことになる（二つとも同じ数字で良い）
/************************
リンク先の位置調整
************************/
:target::before {
content:″″;
display:block;
height:90px;
margin:-90px 0 0;
}
補足：「追加 CSS」への加筆・コピペ方法
１）ワードプレスのダッシュボードのメニューから「外観」を選択
２）上から二番目の「カスタマイズ」をクリックする
３）表示された画面左のメニューの一番下の「追加 CSS」を選択
４）上記のCSSを加筆またはコピペして追加する（既存のCSSコードの一番下に加筆・コピペすれば良い。何もない場合は一番上に加筆・コピペ）
追記したCSSが何の目的かすぐ分かるように、タイトルとして「リンク先の位置調整」と表記するようにしておいた。
一度「追加 CSS」を行うと、すべての投稿記事に適用されるようになるので、phpなどの方法のように記事ごとに個別に位置調整を繰り返す必要がない。
蛇足：HTML5でページ内リンクを設定する方法
上記した手順のように、ワードプレスには「高度な設定」を用いてページ内リンクを簡便に設定する機能がある。この機能を使用しないで、オーソドックスにHTML5を用いてページ内リンクを設定する方法を以下に補足する。
本記事においては２種類のページ内リンクを設定している。ページ内リンクの設定手順の記述の前に、一つ目の事例として「リンク先」へ飛ばしたり「リンク元」へ戻ったりする例をデモンストレーションとして示した。二つ目は「ヘッダーの追従設定をONにしたまま位置調整する方法」の説明において、『補足：「追加 CSS」への加筆・コピペ方法』へジャンプするようにリンク設定している。
実は、一つ目のリンクはこれから説明するHTML5を使用して設定したもので、二つ目のリンクはワードプレスの「高度な設定」機能を使用して設定したものだ。一つ目のリンク設定も二つ目と同じ方法で簡単に設定できるのだが、HTML5を使用する事例としてあえて作成した次第。
リンク先（飛ばす先）の単語や文章などをHTMLコードで作成
以下が本記事内のリンクのデモンストレーションで使用したリンク先のコード例：
<a id=″link1″><b>「リンク先」<span style=″color:red;″> ☜ ここにジャンプしてきた</span></b></a>
HTMLコードを記事内に書くためには、ブロックを追加する際に表示されるブロックメニューで、一番下の「すべてを表示」をクリックする。表示されたメニュー一覧のウィジェットにある選択肢から「カスタムHTML」をクリックすると、HTML入力ボックスが表示される。そこに上記のようにリンク先の単語や文章をHTMLで書く。
本記事の例では、『「リンク先」 ☜ ここにジャンプしてきた』 を表示するため、上記の <a id=″link1″> で始まるHTMLコードを書いている。<b>と</b>で挟んだ部分は太文字を、<span style=″color:red;″>と</span>で挟んだ部分は赤字を表示するための追加コード。太字や赤字が不要なら以下のようなシンプルなコードになる。
<a id=″link1″>「リンク先」 ☜ ここにジャンプしてきた</a>
リンク元の単語や文章などをHTMLコードで作成
以下が本記事のデモで使用したリンク元のコード例：
<p><a href=″#link1″>「リンク先」にジャンプ</a> ☜ クリックしてリンク先に移動（下のリンク元に戻ってこられます）</p>
本記事の例では、『「リンク先にジャンプ」 ☜ クリックしてリンク先に移動（下のリンク元に戻ってこられます）』 を表示するために<p>と</p>で挟んだコードを作成した。
細かい話になるが、クリックするリンク元を「リンク先にジャンプ」だけにして、「☜」以降の文章をリンク元として設定せず、単なる補足文章にするために<p>と</p>をかませている。文章を含めてリンク元に設定するのであれば、以下のコードになる。
<a href=″#link1″>「リンク先」にジャンプ ☜ クリックしてリンク先に移動（下のリンク元に戻ってこられます）</a>
以 上
「リンク先」 ☜ ここにジャンプしてきた
「リンク元」 ☜ クリックしてリンク元へ