【SANGO】WordPressのスマホのヘッダーを固定/追従するカスタマイズ。下スクロールで消える仕様

2020 9/04

2020年3月20日 2020年9月4日

URLをコピーしました！

はじめ

スマホ閲覧時にヘッダーを固定・追従するようにカスタマイズしたいんだけど、やり方がわからない。

本記事は上記のような悩みを持つ方に向けて記事を書いています。

こんにちは！ツヨシ（@24shi_web）です。

私は2017年よりブログを始めて、ブログ・WordPress歴は3年です。

また、現在は専業ブロガーとして活動しており、ブログ収益のみで生計を立てております。

さて、あなたは「WordPressブログのスマホのヘッダーを固定したい！」とは思いつつも、やり方がわからずに困っていましたか？

そこで今回は、実際に当ブログでWordpressブログのスマホヘッダーを固定/追従するようにカスタマイズしたのでそのやり方をご紹介します。

ちなみ、私は過去WordPressテーマ「SANGO」を使用していた時のカスタマイズであり、他のテーマでは検証していないのでその点だけご注意を。

また、この記事を書くにあたって以下の記事を参考にさせていただきました。

WordPress のヘッダーを固定してスクロール時に消す方法

お洒落なサイトが誰でも作れる！

ブログを書くのが楽になるテーマ「SWELL」

誰でも簡単にオシャレなブログが作れます！
WordPressの使いやすさがアップします！
キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
アフィリンクの一元管理機能が標準装備されてます！

＼一度使うと他のテーマには戻れません！／

SWELL公式HPを見る

口コミ評判を見る

※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！

この記事を書いてる人

溝口剛
Tsuyoshi Mizoguchi

1986年生まれ 33歳札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

1.【SANGO】スマホのヘッダーを固定/追従するカスタマイズ。スクロール・閲覧の邪魔にならない仕様

↑この記事のカスタマイズ方法での完成図はこんな感じです。

このカスタマイズのメリットは、ヘッダーが下スクロールしている時は消えるのでスマホの閲覧の邪魔にならないという点ですね。

さて、早速ですがスマホのヘッダーを固定/追従するカスタマイズ方法は以下の通りです。

固定/追従ヘッダーのカスタマイズ手順

「header-fix.js」ファイルを作成
「header-fix.js」をSANGO子テーマにアップロード
子テーマのfunctions.phpにコードを追加
CSSにコードを追加

具体的に一つずつ解説していきます。

functions.phpをいじるカスタマイズのため、自己責任でお願いします。初心者の方は特にバックアップを取っておく事をおすすめします。

1-1.「header-fix.js」ファイルを作成

まずは「header-fix.js」というJSファイルを作成していきます。

JSファイル作成に当たっては、Sublime Text3というツールを使うのがおすすめです。

WordPress運営するにあたって、コードをいじる機会も多いかと思うのでこの際ダウンロードしておきましょう。

インストールから日本語化まで以下のサイトが参考になりますのでどうぞ。

Sublime Text のインストールから日本語化まで

1-1-1.「header-fix.js」のコード内容

以下のコードをSublime Text3にコピペします。

$(function() {
  var $win = $(window),
      $header = $('header'),
      headerHeight = $header.outerHeight(),
      startPos = 0;

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > startPos && value > headerHeight ) {
      $header.css('top', '-' + headerHeight + 'px');
    } else {
      $header.css('top', '0');
    }
    startPos = value;
  });
});

そして、Sublime Text3で「名前を付けて保存」を選択し、ファイル名を「header-fix.js」にすればOKです。

1-2.「header-fix.js」をSANGO子テーマにアップロード

作成したJSファイル「header-fix.js」をSANGOの子テーマ（sango-theme-child）に追加していきます。

ここでは、FileZillaという無料ソフトを使っていきます。

FileZillaもWordpress運営においては必須ツールなので、知らない方はインストールしておきましょう。

以下のサルワカさんの記事がとてもわかりやすいのでどうぞ。

【FileZillaの使い方】WordPressでFTPソフトを使おう

1-2-1.FileZillaでSANGO子テーマのファイルを開く

↓以下のフォルダを開いていけば、SANGOの子テーマフォルダがあります。

「ドメイン名 → wp-content → themes → sango-theme-child」

※ちなみに、SANGOの子テーマを使っていない方はこちらからダウンロードし、WPテーマとして有効化してください。

1-2-2.「header-fix.js」をドラッグ&ドロップすればアップロード完了

そして、「header-fix.js」ファイルをFileZillaの子テーマフォルダ内にドラッグ&ドロップしてあげればアップロードは完了です。

1-3.子テーマのfunctions.phpにコードを追加

次にWordPress管理画面上からfunctions.phpに以下のコードを追加していきます。

追記する箇所は「外観→テーマエディター→functions.php」です。

//ヘッダー上部固定 スクロール対応
wp_enqueue_script( 'sng-js', 
get_stylesheet_directory_uri() . '/header-fix.js', 
array(), '', true );

上記のコードをコピペすればOK！

1-4.CSSにコードを記述

次にスタイルシート（style.css）にコードを追記していきます。

追記する箇所は「外観→テーマエディター→style.css」です。

/***スマホヘッダー固定 スクロール対応***/
@media only screen and (max-width: 767px) {/*スマホのみ*/
  .header {
    position: fixed;/*ヘッダー固定*/
    top: 0;
    left: 0;
    width:100%;
    transition: .3s;
  }
/*ヘッダーの高さだけコンテンツを下げる*/
#container{
padding-top:62px;/*ヘッダーの高さにあわせて調整*/
}

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

上記のコードをコピペすればOK！