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

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

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

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

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

 

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

 

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

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

 

関連記事

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

THE THOR コメント リンク ページ内

 

ページ内リンクの位置を調整する方法

 

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

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

THOR ページ内リンクの位置調整
リンクの位置を余白(padding)のサイズ分だけ上にあげることができます

 

THE THOR ページ内リンクの位置調整 をするカスタマイズ

 

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

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

 

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

 


 

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

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

 

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

 

あとがき

 

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

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

>