HOME → 3 WordPress → 03 カスタマイズ → 

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での位置調整サンプルコード。
/*-----------------------------------------------------------*/
/* ページ内リンクのリンク先位置調整 */
/*-----------------------------------------------------------*/
#title1 {
   margin-top: -50px; /* リンク位置上昇分 */
   padding-top: 50px; /* 上昇分を戻す分 */
}
#title2 {
   margin-top: -50px; /* リンク位置上昇分 */
   padding-top: 50px; /* 上昇分を戻す分 */
}
#title3 {
   margin-top: -50px; /* リンク位置上昇分 */
   padding-top: 50px; /* 上昇分を戻す分 */
}
#title4 {
   margin-top: -50px; /* リンク位置上昇分 */
   padding-top: 50px; /* 上昇分を戻す分 */
}
#title5 {
   margin-top: -50px; /* リンク位置上昇分 */
   padding-top: 50px; /* 上昇分を戻す分 */
}
 

2. 記事内に余白をとる
 
さらに、記事内にアンカーを設置するときに【余白】を設ける。
 
ページ内リンクのリンク先位置調整
 
 
リンク先位置の調整結果。
ページ内リンクのリンク先位置調整
 

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

以上。
(2017.11.05)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

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