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

はじめのアイコン画像はじめ

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

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

こんにちは!ツヨシ(@24shi_web)です。

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

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

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

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

ちなみ、私はWordPressテーマ「SANGO」を使っており、他のテーマでは検証していないのでその点だけご注意を。

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

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

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

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

\一度使うと他のテーマには戻れません!/

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

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

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

この記事の内容

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

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

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

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

固定/追従ヘッダーのカスタマイズ手順
  1. 「header-fix.js」ファイルを作成
  2. 「header-fix.js」をSANGO子テーマにアップロード
  3. 子テーマのfunctions.phpにコードを追加
  4. CSSにコードを追加

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

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

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

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

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

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

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

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運営においては必須ツールなので、知らない方はインストールしておきましょう。

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

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!

1-5.固定/追従するスマホヘッダーの出来上がり!

以上で、上記のようにスマホで見た時にヘッダーが固定/追従されるようになっています。

そして、下スクロールしたらヘッダーが消えるのでスマホでの閲覧の邪魔にならず、上にスクロールするとヘッダーが表示されます。

個人的には最も使い勝手の良い仕様だと感じているのでおすすめです。

是非、参考までに。

2.「目次から見出し」へ飛んだ時の多少のズレを微調整

ツヨシのアイコン画像ツヨシ

あれ?スマホの「目次から見出し」へ飛んだ時多少ズレてる…。

私はスマホのヘッダーを固定/追従のカスタマイズをして、「目次から見出し」へ飛んだ時に多少ズレている事が判明しました。

恐らく、同じ現象に悩んでいる方のために解決方法をお話しておきます。

※前提条件として、WPテーマ「SANGO」、見出しプラグイン「Easy Table of Contents」を使っている場合の解決方法です。

2-1.「スクロールを滑らかにする」にチェック

解決方法はめちゃ簡単です。

まず「Easy Table of Contents」の設定を開き、「スクロールを滑らかにする」の項目にチェックを入れます。

2-2.「スムーズスクロールのオフセット」にて微調整

続いて「スムーズスクロールのオフセット」の項目にて微調整を行っていきます。

ちなみに、この設定は「PC閲覧時とスマホ閲覧時」の違いです。

ここはお好みで微調整してみてください。

ちなみに、私の実際の設定値は以下の通りです。

私のオフセット設定値
  • スムーズスクロールのオフセット:25px
  • モバイルのスムーズスクロールのオフセット:-10px

是非、参考までに。

まとめ

今回は、SANGOのスマホのヘッダーを固定/追従するカスタマイズ方法について解説してきました。

このヘッダー固定/追従は、下スクロールしている時(記事を読んでいる時)に消えるため、閲覧を邪魔しないので個人的にはとても気に入っています。

WordPressのスマホのヘッダーを固定したいけど、ずっと固定されているのは邪魔!と考えている方にはとてもおすすめなデザインかと思いますので、是非参考にしてみてください。

以上です。

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。

当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。

しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。

また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。

月7桁をを達成したサイト設計方法です!

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。

  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 案件を選ぶ際の7つのポイントが学べます。
  • 購入されやすい商品の特徴。
  • 案件選びで重要な見るべきポイント。
  • 案件を取り組む際に確認すべき事項。

\アフィリ案件を選ぶ秘訣が学べます!/

この記事が気に入ったら
フォローしてね!

この記事の内容
閉じる