おはようございます。
近牡です。今日は2本目。
以前紹介した目次の作り方ですが、実はあのまま使用すると
アメブロの場合表示位置がずれてしまいます。
例：ページ内リンクを押してみよう
導入部分を飛ばしたい方はこちら
表示位置のずれが…
厳密には表示位置がずれているわけではないのですが、上側にアメブロのメニューが被ってしまいます。
対策としてグローバルメニュー（上側に固定されているメニュー)を抑止する方法などが検索するとあがりますが、もともとの仕様に干渉してしまうと訪問される方の使い勝手を損ないかねません。
ではどうすればいいのか？答えは単純です。
ずれてしまうならはじめから表示位置をずらせばいいじゃない！
本題となりますが、ページ内リンクを直接指定するのではなく、ワンクッションページ内リンクにしたい手前にタグを用意し、そのタグにジャンプできるように設定しましょう。
ジャンプ先には、HTML5で使用可能なdivタグがいいでしょう。特定のまとまりに色々デザインを調整したい場合に使用可能なタグですが、このdivタグ自体に特別な意味はありません。
設定されている文字の大きさによっても変わりますが、基本的には2～3行手前にジャンプ先を指定するといい具合に飛んでくれます。
注意点として、ジャンプ先に指定しているidはページ内で一度使用するとほかの場所では原則使用できません。そのため、被ることがないようにid名の後ろに現在時刻などを入れる癖があるといざ使いたいときに余計な手間がなくて済みます。
例：<div id="jump271155"></div>
<p>この内容を見やすく表示したい</p>
ジャンプ元には、ハイパーリンクで通常URLを入れる場所に#id名を入力し、表示したいリンク用文字列を設定します。
<a href="#jump271155">記事本編はこちら！</a>
目次の作成でやることはこれだけ！
- 表示したい2～3行手前にジャンプ用タグを設置
※idは重複しないものを指定する - リンク先は#id名で指定し、リンク用の文字列等を設定