今回はWordPressでのアンカーリンクが少し特殊？なので、解決した方法を解説します。
【初心者用】アンカーリンクはページ内の瞬間移動
アンカーリンクはクリックすると同じページ内の指定した場所に自動でスクロールしてくれるものです。
これをクリックしてみてください
↓↓↓
アンカーリンクテスト用リンク
つまり”目次”や”コンテンツ内で”ページの下部に詳細を書いたところ”などに移動させることができます。
アンカーリンクを設定する方法
移動先はタグにid名を付けます。
必ずidです。
class名はＮＧです。
移動元はaタグでリンクを張りますが、リンク先は#id名で記述してください。
これだけでアンカーリンクが可能です。
WordPressでアンカーリンクを設置したけど移動しない
h3やh4にidを付けて、aタグでリンクを設置しました。
しかし、いくらやっても飛ばない・・・。
実際にアンカーリンクをする時に陥りやすいミスがあるのですが、それも何度もチェックしました。
id名に#を付けている
リンク先名に#を付けていない
id名などを””（ダブルクォーテーション）で囲ってない
何度見直しても間違ってない・・・。
試しに”https://ホームページのＵＲＬ/#id名”でリンクをしてみましたが、スーッとスライドする感じではなくページ移動と同じような感じになりました・・・。
どうも違う・・・。
nameを付けてみたり、何度も見直したり、調べたりしましたが、やっぱり無理でした。
こだわったせいで１時間ほどかかかりましたが、半分妥協した形ですが次の方法でやることが可能です。
WordPressでアンカーリンクを設置する
リンク元HTML
<a href=”#test”>リンク元</a>
リンク先HTML
<div id=”test”>
<h3>テストタイトル</h3>
<p>テキスト</p>
</div>
これでhタグでスライドさせたいところに移動することができます。
WordPressではhタグでアンカーリンクが設置できませんが、こうすることでhタグに設置した時と同じアクションでりようができます。
是非参考にしてください。
【まとめ】WordPressでhタグに直接アンカーリンクは無理
これが結論でした。
色々やりきった結果、hタグには無理と判断して、hタグをタイトルにしている内容をdivタグの要素として囲むことでアンカーリンクを可能にしました。
