新着記事プログラミングスクールホームページ作成ツールネットショップお問い合わせサイトマップ口コミ投稿wordpress口コミホームHTMLwordpressで別記事の特定の場所にリンクさせるHTML2019.03.27久々にHTMLをいじってみると、うまくいかない事が多々ある。今回も実に初歩的なHTMLタグの書き方で「別記事の特定の場所にリンクさせる」を多分何年かぶりにやってみた。手打ちでこの手の初歩的HTMLタグを書くなんて最近しないからね。やってみたらぜんぜん動かないのでいろいろ確認して解決した過程を書いてみます。Advanced』を使うwordpressではなく普通のHTML文書だったら別記事の特定の場所にリンクさせるHTMLタグ今回使うのは10年ぐらい前に初めてHTMLをさわったときに出会った初歩的なタグですね。最初にWEBページを作ったころを思い出します。HTMLを手打ちする事がなくなってきたので、どんどん忘れていきますよ。tableタグのセルの繋ぎ方とかも、いちいち解説見ないとできなかったりします。情けない!リンク先の書き方リンク先記事の特定の場所のタグ、たとえばH2とかDIVとかに書く。id=aaa>特定の場所</h2>リンクさせたい箇所にidをつけるわけですな。idがついている要素であれば、それを使えばいい。リンク元の書き方リンク元の記事に書くタグ。href=”飛び先のurl#aaa”>こちらに飛びます<a>飛び先のurlに続けて#プラスリンク先に設定したidを書く。href=”https://stray-light.info/wp/noindex-error#aaa”>こちらに飛びます<a>となります。こんだけの事なんですけど。簡単な事なんだけど、全然うまくいかなかった。リンクしてくれないんですよ。どんな事をしていたかというと。href=”https://stray-light.info/wp/noindex-error#aaa”>こちらに飛びます<a>こういう風に書いて実際に動作させた場合、ブラウザの一番上に表示されるリンク先の記事のurlは「https://stray-light.info/wp/noindex-error/#aaa」となる。飛ばしたいidの前にスラッシュが入っているね。href=”https://stray-light.info/wp/noindex-error/#aaa/”>こちらに飛びます<a>idの後にスラッシュを入れたりした場合は、リンクしてくれない。こちらで書いたリンク先のurlが微妙に変化されてリンク出来ない結果になっているみたい。このリンクしてくれない時にブラウザの一番上に表示されるリンク先の記事のurlは「https://stray-light.info/wp/noindex-error/#aaa」ってことでリンクしてくれるときと同じurlになって表示される。今回なかなか原因が特定出来なかったんよ。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/“>みたいにスラッシュを入れるとリンクしてくれない。すご〜い単純な事なのに時間がかかってしまった。Advanced』を使って別記事の特定の場所にリンクを貼ればもっと簡単なのかもしれない。今度時間あったら試してみます。wordpressではなく普通のHTML文書だったらなんか微妙に失敗するのは、やはりwordpressのphpで生成されるコードのせいなんだと思う。HTMLファイルに直に書く場合はおこらない失敗だと思う。言っても今回、時間ないからHTMLファイルの直に書く場合はどうか検証してないけどね。何年もwordpress以外でwebページを作ってないから、ちょっと手間かけないと検証できないので今回スルーします。以上「wordpressで別記事の特定の場所にリンクさせる」という記事でした。今回はほんとの備忘録。時間のあるときにもっとちゃんとした検証記事にしておきます。関連記事HTML<head>内のlightbox用設定を読み込む順番jsでオブジェクトのサイズを取得して表示に生かすデザインのサイトで、特定のページだけ変な動きをするので、ちょっと調べてみた。headerのサイズ(height)を取得してデザインに反映するjsが変なのだ。したまでスクロールした時にフッター下に謎の隙間が出来る問題。子要素のmargin-bottomが関係していると思う。フッター下に子要素のmargin-bottom領域がはみ出している。