【SANGO/ストークカスタマイズ】スマホのヘッダーメニューを固定する方法

スマホから見たとき、ページ上部へ戻ってメニューを表示させるのが面倒に感じたので、ヘッダー部分を固定するカスタマイズをしました。

動画のように、スクロールしてもページ上部が固定されるカスタマイズ方法を記事にまとめました。

ググって知識を得ているレベルの初心者なので、動作の保証は出来ませんが、お役に立てたら嬉しいです。

ストークでヘッダーメニューを固定する方法

子テーマのstyle.cssを編集します。

子テーマの導入方法などについては公式サイトをご覧ください。

 

下記コードを子テーマのstyle.cssの一番下にコピペします。

style.css
/*--------------------------------------
  スマホヘッダーメニュー固定
--------------------------------------*/

@media only screen and (max-width: 767px) {

.header {
  position: fixed;/*ヘッダー固定*/
  top: 0;
  left: 0;
  width:100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .18);/*ヘッダーに影をつける*/
}

/*ヘッダーの高さだけコンテンツを下げる*/
#container{
  padding-top:60px;/*ヘッダーの高さにあわせて調整*/
}

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
  padding-top: 60px;/*ヘッダーの高さにあわせて調整*/
  margin-top: -60px;/*ヘッダーの高さにあわせて調整(マイナスは消さない)*/
}
}
MEMO
ヘッダーのロゴサイズを大きくしている場合は、padding-top:60px;のサイズを大きくして調整して下さい。

スマホ用グローバルナビは固定されないので、非表示を推奨します。

/*ヘッダーの高さに合わせて調整*/の部分はすべて同じ数字にして下さい。(3つ目のみマイナス)

SANGOでヘッダーメニューを固定する方法

子テーマのstyle.cssを編集します。

子テーマの導入方法は公式サイトをご覧ください。

下記コードを子テーマのstyle.cssの一番下にコピペします。

style.css
/*--------------------------------------
  スマホヘッダーメニュー固定
--------------------------------------*/

@media only screen and (max-width: 767px) {

.header {
  position: fixed;/*ヘッダー固定*/
  top: 0;
  left: 0;
  width:100%;
}

/*ヘッダーの高さだけコンテンツを下げる*/
#container{
  padding-top:62px;/*ヘッダーの高さにあわせて調整*/
}

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
  padding-top: 62px;/*ヘッダーの高さにあわせて調整*/
  margin-top: -62px;/*ヘッダーの高さにあわせて調整(マイナスは消さない)*/
}
}
MEMO
ヘッダーのロゴサイズを大きくしている場合は、padding-top:62px;のサイズを大きくして調整して下さい。

スマホ用スライドメニューを表示している場合は、40px追加するといい感じになります。

/*ヘッダーの高さに合わせて調整*/の部分はすべて同じ数字にして下さい。(3つ目のみマイナス)

まとめ

SANGO用とストーク用としましたがCSSはほとんど同じです。

応用すれば他のテーマでも使えるかもしれませんが、動作は保証しません。

どなたかのお役に立てたら嬉しいです。

 

ストーク・SANGOについてはこちらの記事もおすすめです。

\ランキング参加中/
にほんブログ村 その他生活ブログ 節約・節約術へ 
ポチッと応援していただけると嬉しいです。

コメントを残す

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