アンカーリンクがうまくいかない・・・。WordPressでhタグの場所に飛ばすために超簡単に解決した方法の解説

アンカーリンクがうまくいかない・・・。WordPressでhタグの場所に飛ばすために超簡単に解決した方法の解説

2~3年前からマイクラをやろうと購入してましたが、やる度にマイクラ酔いになって全然やりすすめられず・・・。

Youtuberのマイクラ動画を見て満足していましたが、PEにすることでどうにか解決できそうな妃魯です。

今回はWordPressでのアンカーリンクが少し特殊?なので、解決した方法を解説します。

【初心者用】アンカーリンクはページ内の瞬間移動

アンカーリンクはクリックすると同じページ内の指定した場所に自動でスクロールしてくれるものです。

これをクリックしてみてください
↓↓↓
アンカーリンクテスト用リンク

ここまで移動します。

つまり”目次”や”コンテンツ内で”ページの下部に詳細を書いたところ”などに移動させることができます。

アンカーリンクを設定する方法

アンカーリンクの設置方法

 

移動先はタグにid名を付けます。

必ずidです。

class名はNGです。

移動元はaタグでリンクを張りますが、リンク先は#id名で記述してください。

これだけでアンカーリンクが可能です。

 

WordPressでアンカーリンクを設置したけど移動しない

h3やh4にidを付けて、aタグでリンクを設置しました。

しかし、いくらやっても飛ばない・・・。

 

実際にアンカーリンクをする時に陥りやすいミスがあるのですが、それも何度もチェックしました。

アンカーリンクを設置で陥りやすいミスidではなくclassで書いている
id名に#を付けている
リンク先名に#を付けていない
id名などを””(ダブルクォーテーション)で囲ってない

何度見直しても間違ってない・・・。

試しに”https://ホームページのURL/#id名”でリンクをしてみましたが、スーッとスライドする感じではなくページ移動と同じような感じになりました・・・。

どうも違う・・・。

 

nameを付けてみたり、何度も見直したり、調べたりしましたが、やっぱり無理でした。

こだわったせいで1時間ほどかかかりましたが、半分妥協した形ですが次の方法でやることが可能です。

WordPressでアンカーリンクを設置する

リンク元HTML

<a href=”#test”>リンク元</a>

リンク先HTML

<div id=”test”>
<h3>テストタイトル</h3>

<p>テキスト</p>
</div>

これでhタグでスライドさせたいところに移動することができます。

WordPressではhタグでアンカーリンクが設置できませんが、こうすることでhタグに設置した時と同じアクションでりようができます。

是非参考にしてください。

【まとめ】WordPressでhタグに直接アンカーリンクは無理

これが結論でした。

色々やりきった結果、hタグには無理と判断して、hタグをタイトルにしている内容をdivタグの要素として囲むことでアンカーリンクを可能にしました。

 

 

アンカーリンクがうまくいかない・・・。WordPressでhタグの場所に飛ばすために超簡単に解決した方法の解説
最新情報をチェック‼