Twenty Seventeen ページ内リンクのリンク先位置調整

WordPress Twenty Seventeen
ページ内リンクのカスタマイズ
リンク先位置調整
 
ページ内リンクで、リンク先の先頭位置が隠れてしまい、最適な位置で表示されない。この解決方法を以下に記す。

スポンサー リンク

 
1. CSSで位置調整する
 
ページ内リンクの【HTML】での書き方。
アンカー名をあらかじめ決めておく。例:『 title1 』。
<a href=”#title1“>sampleへ</a>
・・・・・
<div id=”title1“>
ここがsample
</div>
 
CSSの【 padding-top 】で高さ分ずらし、【 margin-top 】margin-topでマイナスの値をいれる。
#title1 {
margin-top: -30px; /* リンク位置上昇分 */
padding-top: 30px; /* 上昇分を戻す分 */
}
 
 
CSSでの位置調整サンプルコード。
 

2. 記事内に余白をとる
 
さらに、記事内にアンカーを設置するときに【余白】を設ける。
 

ページ内リンクのリンク先位置調整

 
 
リンク先位置の調整結果。
ページ内リンクのリンク先位置調整
 

これで、スクロールをすることなくリンク先の先頭から読めるので、見やすくなった。

以上。
(2017.11.05)

 

 

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください