アクアリウムのおすすめグッズはこちら!

【スマホ対応】SANGOのヘッダーをCSSで固定する方法

SANGOのヘッダーを固定する方法

TAGS:

スマホで閲覧時にSANGOのヘッダーをTOPに固定する方法を紹介します。

ヘッダーを固定するだけであれば、CSSに追記するだけで簡単に固定することができました。

また、追従見出しを設定している方は、そちらのstyleも変更が必要なので、あわせて紹介します。

スマホ用フッター固定メニューって個人的にあまり使わないし、それならヘッダーを固定させた方がいいかも。

このように動作します

ヘッダーを固定した後の動作

スクロールに応じてヘッダーを小さくする方法はこちらの記事を読んでください。

SANGOの固定ヘッダーを小さく【SANGO】固定ヘッダーをスクロールで小さく変化させる方法

SANGOのヘッダーを固定する方法

ヘッダーのサイズをデフォルトのサイズのままにしているのであれば、下記のコードをCSSにコピペしてもらうだけで固定することができます。

CSSに追記する

ヘッダーを固定するために、以下のコードを子テーマのstyle.cssに貼り付けましょう。

SANGOの子テーマについては、公式ページをご覧ください。

参考 SANGOの子テーマsaruwakakun.com
MEMO
すでにヘッダーをカスタマイズされている方は、コピペでなく、こちらの内容を追記してください。
<span>style.css</span>にコピペ
/*--------------------------------------
  スマホヘッダーメニュー固定
--------------------------------------*/
@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;/*高さは必要に応じて調整してください*/
}
}

追従見出しがある場合

追従見出しがある場合はfunctions.phpを合わせて編集が必要です。

僕の場合は、こじかログさんの記事を参考に追従見出しを作成しています。
参考 SANGOで現在の見出しを上部に追従させるサルワカ風カスタマイズこじかログ

下記のコードを<style>~</style>の中に追記します。

注意
分かっているとは思いますが、functions.phpの編集はとても危険な作業です。しっかりバックアップをとってから編集することをおすすめします。バックアップをとるなら「BackWPupのインストールと設定|WordPressの自動バックアップ」がおすすめです。
functions.phpに追記
/*ヘッダーを固定して詰まった分だけコンテンツを下げる*/
/@media only screen and (max-width: 767px) {
  .kjk_fixed_headline {
    top: 62px;/*高さは必要に応じて調整してください*/
  }
}

場所が分からない人はクリック

functions.phpに追記する

キャッシュをクリアする

忘れがちなのが、この作業ですね。

CSSを編集した後は、キャッシュをクリアして今回の編集内容を確認できるようにしましょう。

また、今回のヘッダーの固定は、画面幅が767px以下の時だけなので、PC画面では固定されませんのでご注意ください。

スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。

CSSのバージョン管理【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

最後に

SANGOのヘッダーをCSSで固定する方法を紹介しました。

こんな感じできた?

ヘッダーを固定した結果

実際にヘッダーを固定した方が、スマホで見たときは見やすいと個人的には思います。

お試しあれ。

コメントを残す

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