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

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

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

twitter.com

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

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

子テーマの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:<span class="font_color1">60px</span>;/*ヘッダーの高さにあわせて調整*/
}

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
  padding-top: <span class="font_color1">60px</span>;/*ヘッダーの高さにあわせて調整*/
  margin-top: -<span class="font_color1">60px</span>;/*ヘッダーの高さにあわせて調整（マイナスは消さない）*/
}
}

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

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

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

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

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

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

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

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

/*目次から見出しへ飛ぶリンクのズレを修正*/
h2 span, h3 span {
  padding-top: <span class="font_color1">62px</span>;/*ヘッダーの高さにあわせて調整*/
  margin-top: -<span class="font_color1">62px</span>;/*ヘッダーの高さにあわせて調整（マイナスは消さない）*/
}
}

まとめ

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

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

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