#kiki,#rinshou,#kenkyu,#db,#kouza{
padding-top:90px;
margin-top:-90px;
}
以前は、下記のような修正で、サイト内のリンクの位置のズレを修正していたが、もっと簡単に。
原因と解決方法の理屈は同じ。 記述方法と記述場所が違う。
以前は、スタイルシートにコードを書き、htmlでページ内にクラスで設定していた。
今回(財団様)の場合は、リンク先のIDをスタイルシート内で、直接ズレを調節する方法。
【以前のchj様の修正方法】
ヘッダーメニューが常時表示されるテーマではよく起こる。(それ以外のテーマでも可能性はある)
id にジャンプする指定をしても、数行分下に飛んでしまうのを修正する。
これは、チャレンジドジャパン(旧ひゅーまにあ)様のサイトのCSS
id で指定した部分(今回は ジャンプ先のタイトル部分)に、contents_inner クラスを指定(html)し、ずれる分(今回は180px)分、調整する(CSS)。
padding-top で180px 下げる。
margin-top で180px 上げる。(-180px とする)
これをセットで設定しないと、サイト上での表示までずれてしまうため、要注意
/* Q&Aページ 上部のアンカーリンクのずれを直す PC*/
.qa_contents_inner {
padding-top: 180px !important;
margin-top:-180px !important;
}
/* Q&Aページ 上部のアンカーリンクのずれを直す モバイル*/
.mb-qa_contents_inner {
padding-top: 80px !important;
margin-top:-80px !important;