【WordPressで簡単！】ヘッダーメニューからページ内リンクを設定する方法

以下について確認してみてください。

• リンク先のIDが正しく設定されているか
  • ID名は半角英数字になっていますか？
  • 大文字と小文字は区別されるので、入力時に注意が必要です
  • スペースは使えません（ハイフンやアンダースコアを使いましょう）

• リンクURLは正確か
  • #（シャープ）は半角になっていますか？
  • ID名は設定したものと完全に一致していますか？
  • URLの最後に余分なスペースが入っていませんか？

固定ヘッダーを使用している場合、リンク先がヘッダーに隠れてしまうことがあります。
簡単な方法として、ブロックにクラス名を追加して調整する方法があります。

【追加CSSに貼り付けるコード】

/* ページ内リンクのヘッダー重なり防止 */
/* PC用の調整 */
.anchor {
    display: block;
    height: 0;
    margin-top: -100px;        /* ヘッダーの高さに応じて調整 */
    padding-top: 100px;        /* ヘッダーの高さに応じて調整 */
    visibility: hidden;
}

/* スマートフォン用の調整 */
@media screen and (max-width: 768px) {
    .anchor {
        margin-top: -60px;     /* スマホ用ヘッダーの高さに応じて調整 */
        padding-top: 60px;     /* スマホ用ヘッダーの高さに応じて調整 */
    }
}

WordPressのページ内リンクは、スムーズなスクロールに変更できます。

以下のCSSコードを、カスタムCSSを入力できる場所（「外観→カスタマイズ」の「追加CSS」など）に貼り付けてください。

/* ページ内リンクのスムーススクロール設定 */
html {
  scroll-behavior: smooth;
}

同じページ内の場合は、リンクURLに「#」と「ID」だけを入力すれば簡単にリンクが作れます。

別のページからジャンプさせる場合も、ヘッダーメニューと同じように、完全なURLが必要です。

「ページのURL#ID」の形でリンクを設定してください。

ヘッダーメニューでも、ページ内のボタンやリンクでも、別ページへのジャンプは同じ設定方法です。