THE THOR ザ・トール【ヘッダー固定時】ページ内リンクの位置調整 THE THOR

THE THOR のページ内リンクの位置調整をしました。

これは「ヘッダーを固定表示」設定にしたとき起こる問題を解決するカスタマイズです。トラブルの解消以外にもページ内リンクの位置を微調整したいときに役立ちます。

THE THOR ヘッダー固定表示のときに起こる問題

あまり頻繁に起こるケースではありませんが、「ヘッダー固定表示」で「別ページへのページ内リンク」をするとジャンプしたときに「固定ヘッダー」と「リンク先」が重なってしまうというトラブル(?)が起きます。重要な部分が隠れてしまう可能性もあるので出来れば回避した問題です。

同一ページ内でのジャンプには問題ありません。

THE THOR コメントに飛ぶページ内リンクを追加しました。当サイトのコメント欄は記事や関連記事、広告などが表示されたあとにあります。通常そこまで閲覧するユーザーは少なく、コメントがあることに気づかないことも多いでしょう。見つか[…]

ページ内リンクの位置を調整するには「余白(padding)」と「ネガティブマージン(-margin)」を利用します。要素のサイズを「余白(padding)」で変更し、見た目の位置を「ネガティブマージン(-margin)」で元通り戻すという作業です。

言葉にすると難しいので下の図を見てください。

まずジャンプする場所の上に以下のHTMLを設定します。（テキストエディタでリンク先の要素の上に設定）

<div id=”page-jump” style=”margin-top:-70px; padding-top:70px;”></div>

page-jumpがこの場所のリンク先として使用される名前。-70と70がサイズになります。必要な余白(固定ヘッダーの縦幅)にあわせて数値を設定してください。

今回のカスタマイズは「別ページへのページ内リンク」です。リンク先の指定はページのURLに#page-jumpをつけます。リンクボタンは好みで作ってください。（同一ページの場合はURLは必要ありません）

例. https://karaagebow.com/#page-jump

以上でカスタマイズは完了です。お疲れさまでした。

石川栄和, 大串肇, 星野邦敏

1,564円(11/21 12:44時点)

発売日: 2019/07/25

Amazonの情報を掲載しています

実際の使用では見出しをリンク先にすることが多いと思います。見出しそのものにアンカーを設置したいところですが、装飾の関係上うまくいかないことが多かったのでアンカーは別で設置することとなりました。

同一ページでのページ内リンクはTHE THOR の標準状態で問題ありません。あくまで「ヘッダーを固定表示」した時の「別ページへのページ内リンク」の場合のカスタマイズなので間違えのないようご注意ください。