ヘッダー固定(position:fixed)で、アンカーリンクがずれる場合の解決法

position:fixedで固定ヘッダーを使っていると絶対出てくる「アンカーリンクずれる」問題。

毎回毎回おんなじことの繰り返しなので、備忘録。

でも、アンカー自体にぞれぞれ指定しなくていいこの方法はめちゃ楽でおすすめです。

cssファイル内に記述するだけだし。

 

アンカーリンクのずれを解消するcss

:target:before {
   height: 100px;/* ヘッダの高さ */
   margin: -100px 0 0;/* ヘッダの高さ */
   content: ‘ ‘;
   display:block;
}

を入れましょう。

大体うまくいきますが、解消されない場合は下記の方法を。

 

ターゲットとなるIDに直接指定する

#ID名::before {
   content: ‘ ‘;
    display: block;
    height: 100px;/* ヘッダの高さ */
    margin-top: -100px;/* ヘッダの高さ */
    vertical-align: top;
   }

このどちらかでうまくいくでしょう。

WPの仕様だったり、HTMLの構造上なぜかうまくいかないことが多いですが、大体上記でまかなえている気がします。