WordPress アンカーリンク ジャンプ位置のずれ 解決方法

2021.09.15

WordPressでは アンカーリンク （ページ内リンク）にジャンプ（移動）した時、表示位置がずれていて、見たい項目タイトル(h2やh3等)が画面の上に切れてしまっていました。　　そんな場合でも確実に正しい場所にジャンプさせる簡単な解決方法をご紹介します。

解決方法

下の表記をWordPressのカスタムCSSに追記するとあっさりとうまく動作しました。　わざわざクラスやidを個別に用意したりしなくてもサイトの全てのページに対応するのでめっちゃ便利です。（私は、固定ヘッダがないので、60pxではなく”height:3rem;”、”margin:-3rem 0 0;”にしました。　固定ヘッダがある場合は、ヘッダの高さにしたらいいようです）

/* きれいに動作しました */
:target::before {
    content:"";
    display:block;
    height:60px;       /* 移動する距離。 私の場合は、height:3rem; 　高さは調節してくださいね。*/
    margin:-60px 0 0;  /* heightのマイナス値と0　0。 私の場合は、margin:-3rem 0 0; */
}
  • :targetは、.my_classのようなもので、cssで予め用意されている疑似クラスでジャンプする先の場所と言う意味です。
  • :targetを使うと、ページに関わらずサイト内の全てのアンカーリンクに適用されるので、クラスや要素を指定する必要がありません。
  • ::beforeも、cssで予め用意されている疑似要素です。 :target::beforeはジャンプする先の前（上）の場所と言う意味です。
  • ::beforeでリンクのターゲット（＝アンカーリンクの場所）の上に疑似的に要素（見えない要素）を作っています。 content:””をcontent:”ichiri”とすると、ターゲットの上に”ichiri”が表示されます。 この疑似要素の高さを設定できるように、この疑似的な要素をblock型にしています。
  • margin:の設定値が３つの時は、上|左右|下となるので、上は-60pxとして下を0にする為、左右も0としているのでしょうね。　このCSSは素晴らしいです。

StackOverFlowの『Fixed page header overlaps in-page anchors』ここで紹介されてました。

追記（2023/04)：まだ公開していない別のページからアンカーリンクに飛ぶ場合は、上記のCSSをジャンプ元のページのカスタムCSSに貼り付けておいたら位置補正できました。

カスタムCSS記述方法

WordPressのカスタムCSSに追記すると全てのページに反映され、しかもWordPressのバージョンアップ時にも消えないので便利です。

１．『ダッシュボード』
　～『外観』
　～『カスタマイズ』を選択

２．『追加CSS』を選択

３．CSSを記述して～『公開』をクリックすると、記述したCSSがサイト内の全てのページに反映されます。

もどる

参考

phpやjsで記述

phpで記述する方法やjsで記述する方法は以下の理由でおすすめしません。

WordPressのメインのphpやjsを変更すると、

  1. バージョンアップ時に消えるので、再度記述しなければならない。

jsをページ内に書き込むと、

  1. アンカーを付ける全てのページに記述しなければならない。　面倒だし、将来WordPressの仕様が変更された時、全て修正する必要がある。

自作プラグインでjsで処理する

  1. phpのプログラミングも必要で敷居が高い。

なので、上記のCSSを作った人は凄い！

jQuery で記述

同じ疑似クラスの :targetに対して相対的にスクロールするjQueryの方法も出てました。　しかし、WordPressでは各ページに追記するか、自作jsに書き込み自作プラグインで読み込まなければならないのではと思います。　しかし、万が一上記方法が効かなくなった場合、各ページに以下を記述して動作を確保できるかもしれないので、念の為ここに置いておきます。

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

アンカーリンク （ページ内リンク）作成方法

  1. ジャンプしたいブロック(見出しなど）を選択する。（下の場合は、『おまけ　ページ内リンク…』のブロックをクリックして選択。
  2. 右のブロック設定の、『高度な設定』の『∨』をクリックして、『高度な設定』を開く。
  3. 『HTMLアンカー』の入力フィールドにアンカー名称を記入する。（この名称は、ページ内で重複するとページが表示されなくなる可能性があるので注意。）　
アンカーリンク 設定方法
  1. リンクを作りたいところを選択する。右の例の場合、『アンカーリンク設定』という文字全てを選択して
  2. 『』を選択
  3. 先ほど『HTMLアンカー』に入力した文字の左先頭に半角『#』を付けて記入する。（この場合、『#anchor_in_page』）
  4. これでページ内でジャンプするようになりました。

このCSSでは解決しませんでした

他の人では解決したと紹介されていましたが、私の場合はこのCSSでは解決しませんでした。　私のページには固定ヘッダはないのですが、目次からの見出し（h2やh3）へのジャンプで位置がずれて見出し（h2やh3）が画面の上側で切れてしまい、何処にジャンプしたか分かりにくい状態でした。　多分、ワードプレスがh2, h3等の各要素に対してて何等かの動作のプログラムが記述がされ、そちらの方が優先されるのでしょうね。

/* 動作しませんでした */
h2,h3 {
    height:60px;
    margin:-60px;
}

ページ内アンカーリンクに飛ぶ前の位置に戻る方法

Backボタンを押すと、前のページに戻ってしまい、同じページの前の位置にもどりません。

<a>タグ内に　href=”javascript:history.back();　と書くだけで、前の位置に戻ります。
*WordPressのビジュアル編集では、カスタムHTMLブロックにしました。段落ブロックだｔHTML編集にしても何故か<p>タグの中に<a>タグを書かないと勝手に修正されて記述が全て消えてしまいました。

<a href="javascript:history.back();">前の位置にもどる</a>

の様にボタン表示にしたい時は下のコードをWordPressのカスタムHTMLに記述。

<form>
<INPUT type="button" onClick='history.back();' value="前の位置にもどる">
</form>

コメント