久々にHTMLをいじってみると、うまくいかない事が多々ある。
今回も実に初歩的なHTMLタグの書き方で「別記事の特定の場所にリンクさせる」を多分何年かぶりにやってみた。
手打ちでこの手の初歩的HTMLタグを書くなんて最近しないからね。
で、やってみたらぜんぜん動かないのでいろいろ確認して解決した過程を書いてみます。
別記事の特定の場所にリンクさせるHTMLタグ
今回使うのは10年ぐらい前に初めてHTMLをさわったときに出会った初歩的なタグですね。
最初にWEBページを作ったころを思い出します。
HTMLを手打ちする事がなくなってきたので、どんどん忘れていきますよ。
tableタグのセルの繋ぎ方とかも、いちいち解説見ないとできなかったりします。
情けない！
リンク先の書き方
リンク先記事の特定の場所のタグ、たとえばH2とかDIVとかに書く。
<h2 id=aaa>特定の場所</h2>
リンクさせたい箇所にidをつけるわけですな。
すでにidがついている要素であれば、それを使えばいい。
リンク元の書き方
リンク元の記事に書くタグ。
<a href=”飛び先のurl#aaa”>こちらに飛びます<a>
飛び先のurlに続けて#プラスリンク先に設定したidを書く。
リンク先のurlが「https://stray-light.info/wp/noindex-error/」だったら
<a href=”https://stray-light.info/wp/noindex-error#aaa”>こちらに飛びます<a>
となります。
と、まあこんだけの事なんですけど。
wordpressだとうまくいかなかった点
簡単な事なんだけど、全然うまくいかなかった。
リンクしてくれないんですよ。
どんな事をしていたかというと。
スラッシュが自動生成される
<a href=”https://stray-light.info/wp/noindex-error#aaa”>こちらに飛びます<a>
こういう風に書いて実際に動作させた場合、ブラウザの一番上に表示されるリンク先の記事のurlは
「https://stray-light.info/wp/noindex-error/#aaa」
となる。
飛ばしたいidの前にスラッシュが入っているね。」
これだと機能する。
だけど！
<a href=”https://stray-light.info/wp/noindex-error/#aaa”>こちらに飛びます<a>
こうやって前もってidの前にスラッシュを入れたり
<a href=”https://stray-light.info/wp/noindex-error/#aaa/”>こちらに飛びます<a>
idの後にスラッシュを入れたりした場合は、リンクしてくれない。
つまり、こちらで書いたリンク先のurlが微妙に変化されてリンク出来ない結果になっているみたい。
このリンクしてくれない時にブラウザの一番上に表示されるリンク先の記事のurlは
「https://stray-light.info/wp/noindex-error/#aaa」
ってことでリンクしてくれるときと同じurlになって表示される。
だから今回なかなか原因が特定出来なかったんよ。
今回の解決策は
リンク元のurlの書き方の問題で
<a href=”https://stray-light.info/wp/noindex-error#aaa”>こちらに飛びます<a>
このように飛び先の記事のurlの最後に#aaaといれる。
“https://stray-light.info/wp/noindex-error/#aaa”>
“https://stray-light.info/wp/noindex-error#aaa/“>
“https://stray-light.info/wp/noindex-error/#aaa/“>
みたいにスラッシュを入れるとリンクしてくれない。
という事で解決した。
すご〜い単純な事なのに時間がかかってしまった。
プラグイン『TinyMCE Advanced』を使う
プラグイン『TinyMCE Advanced』を使って別記事の特定の場所にリンクを貼ればもっと簡単なのかもしれない。
今度時間あったら試してみます。
wordpressではなく普通のHTML文書だったら
なんか微妙に失敗するのは、やはりwordpressのphpで生成されるコードのせいなんだと思う。
HTMLファイルに直に書く場合はおこらない失敗だと思う。
と言っても今回、時間ないからHTMLファイルの直に書く場合はどうか検証してないけどね。
もう何年もwordpress以外でwebページを作ってないから、ちょっと手間かけないと検証できないので今回スルーします。
以上「wordpressで別記事の特定の場所にリンクさせる」という記事でした。
今回はほんとの備忘録。
時間のあるときにもっとちゃんとした検証記事にしておきます。
また見にきてください。