こんにちは、椿(つばき)です。
ブログって結構スマホで見ることが多いと思うんですがどうでしょう？
で、スマホでブログを読む時どーーーしても気なることの一つがヘッダーの追従です。
どんなに下へスクロールしようがずっとついてくるアレです。
今回はヘッダーを追従させない方法をお伝えします。
スマホのヘッダーを追従させない方法
まず、どんな感じについてくるか見てみますね。
こんな風に、ヘッダーのタイトル部分がずっとついてきます。
それでは早速、ワードプレスのダッシュボードを開きます。
外観
↓
カスタマイズ
↓
追加css
この順番にクリックしていきます。
左側の入力欄に以下の記述をコピー＆ペーストします。
/*スマホヘッダー画像追従させない*/
@media only screen and (max-width : 736px){
.keni-header_wrap {
position: static!important;
}
.keni-container.fn-keni-container {
padding-top: 0!important;
}
}
背景色の変更やその他もろもろカスタマイズしている場合はその下に続けてコピペしていけば反映されます。
最後に上にある【公開】のクリックを忘れずにしましょう。
変更後は、
見事、ヘッダーは追従されなくなりました！
さいごに
はい、今回はスマホで見る場合のヘッダーの追従をさせない方法でした。
デフォルトではついてきますので(;’∀’)気なる場合はこれもcssへ追加しちゃいましょ♪
今回は以上です。
お疲れさまでした！
