支援者募集中!仕事依頼はこちら

【JIN】スマホヘッダーを固定追従させるカスタマイズ

JINでスマホヘッダーを固定追尾させる JINカスタマイズ

WordPressテーマ「JIN」でスマホヘッダーを固定させる方法を紹介します。

3パターンの中から選べるようにしました。

1.常時固定

ヘッダーの大きさは同じで常に上部固定です。

2.スクロールで小さく

スクロールするとヘッダーが小さくなります。

3.スクロールで非表示

下にスクロールするとヘッダーが隠れ、上にスクロールするとヘッダーが現れます。

コピペでできるようになっていますが常に固定以外はjavascriptとfunction.phpを編集する必要があるため、必ずバックアップを取ってから行ってください。

実際に動かしたものを見てみたいという方は今回依頼をしていただいた熊倉マリさん(@araiguma_mom)のサイトをご覧ください。

参考 クマクライフ|敏感肌の子供を持つワーママのブログ

他にも「この記事を見てカスタマイズした!」という方はご連絡ください!

JINのスマホヘッダーを固定させる手順

共通の手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    設定と調整
    ロゴの大きさや文字の色の設定、調整をします。
  • STEP3
    JavaScriptコピペ
    スクロールで変化を加える人はJavaScriptをコピペします。
  • STEP4
    PHPコピペ
    スクロールで変化を加える人はPHPをコピペします。

STEP1:CSSをコピペ

下記コードをコピペしてください。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** スマホヘッダー固定
************************************/
/*スマホ*/
@media screen and (max-width: 767px){
  #header-box{
    z-index:5;
    overflow:visible;
    min-height:60px; /* ヘッダー初期高さ */
  }
  #header{
    position:fixed;
    top:0;
    width:100%;
    background:#fff; /* ヘッダー背景色 */
    z-index:6;
    height:60px; /* ヘッダー初期高さ */
    transition: .5s;
  }
  .cps-sp-menu-bar{
    margin-top:50px; /* ヘッダーの下余白 */
  }
  .sp-menu-box{
    z-index:5;
  }
  .sp-menu-open,.headsearch{
    position:fixed;
    z-index:7;
    transition: .5s;
  }
  .sp-menu-open{
    top:10px; /* メニューボタン位置 */
  }
  .headsearch .search-box:before{
    top:18px; /* 検索ボタン位置 */
  }
  #site-info span a{
    height:auto;
  }
  #site-info span a img{
    height:40px !important; /* ロゴ高さ */
    width:auto !important;
    margin:10px 0; /* ロゴ余白 */
  }
  .mobile-header-small #header{
    height:40px !important; /* ヘッダー高さ(小さいとき) */
    transition: .5s;
    box-shadow: 0 2px 6px rgba(0,0,0,.15); /* ヘッダー影 */
  }
  .mobile-header-small #site-info span a img{
    height:30px !important; /* ロゴ高さ(小さいとき) */
    width:auto !important;
    margin:5px 0; /* ロゴ余白(小さいとき) */
    transition: .5s;
  }
  .mobile-header-small .sp-menu-open{
    top:0; /* メニューボタン位置(小さいとき) */
    transition: .5s;
  }
  .mobile-header-small .headsearch .search-box:before{
    top:8px; /* 検索ボタン位置(小さいとき) */
    transition: .5s;
  }
  #scroll-content{
    position:static !important;
  }
  #navtoggle:checked + .sp-menu-open .cps-icon-bar{
    background-color:#555 !important; /* 閉じるボタン色 */
  }
}

これだけでスマホで見たときにヘッダー固定になったかと思います。

STEP2:設定やCSSの調整をする

ロゴのサイズや背景色、文字色などを設定していきます。

ロゴのサイズを調整

スマホで見てみてサイズが合っていない人のみ調整する必要があります。

ロゴのサイズに決まりは特にないですが横長推奨です。

ロゴサイズはこの部分を修正します。

#site-info span a img{
    height:40px !important; /* ロゴ高さ */
    width:auto !important;
    margin:10px 0; /* ロゴ余白 */
  }

height:40pxがロゴの縦のサイズになっています。小さくしたければ数値を小さく、大きくしたければ数値を大きくしてください。

margin:10px 0;は上下に10px余白をあけるという意味です。余白を詰めたければ数値を小さく(例えばmargin:5px 0;)してください。

背景色を変更する

ヘッダーの背景色はこの部分を修正します。

#header{
    position:fixed;
    top:0;
    width:100%;
    background:#fff; /* ヘッダー背景色 */
    z-index:6;
    height:60px; /* 初期高さ */
    transition: .5s;
  }

background:#fff;のカラーコードを変更してください。

メニューボタン、検索ボタンの設定

メニューボタン、検索ボタンは外観メニューから設定可能です。

グローバルナビゲーションにチェックを入れれば自動で表示されるようになっています。

JINグローバルナビゲーション

メニューボタン、検索ボタンがいらないという方はチェック入れる必要はありません。

メニューボタン、検索ボタンの色を変えるには外観カスタマイズカラー設定タイトルの文字色を変更すればOK!

JINメニューボタンと検索ボタンの色を変える

ちなみにメニューを閉じるときの×ボタンの色はCSSで

#navtoggle:checked + .sp-menu-open .cps-icon-bar{
    background-color:#555 !important; /* 閉じるボタン色 */
  }

background-color:#555のカラーコードを変更すればOKです。

常時固定の人はここまで!

STEP3:JavaScriptをコピペ!

スクロール時に変化を加えたい人はJavaScriptをコピペします。

ですがJINの子テーマにはもともとJavaScriptがないので作ります。

ファイルを下記ボタンからダウンロードして解凍してください。

こちらをクリック

original.jsというファイルが入ってると思うのでそれを子テーマに入れます。

FTPソフトなどを使って入れてください。入れる場所は「ドメイン/public_html/wp_content/themes/jin-child」です。

外観テーマエディタを見たときににoriginal.jsが入っていればOKです。

JINでjavascript

これだけではまだJavaScriptは動きません。

スクロール時に小さくしたい人

外観テーマエディタからoriginal.jsを開いてください。

スクロール時に小さくしたい人は17行目から36行目を削除してください。

if (window.matchMedia( "(max-width: 767px)" ).matches) {

// スクロールで小さく ここから
function init() {
    var px_change   = 100;
    window.addEventListener('scroll', function(e){
        if ( $(window).scrollTop() > px_change ) {
      $("#wrapper").addClass("mobile-header-small");
        } else if ( $("#wrapper").hasClass("mobile-header-small") ) {
            $("#wrapper").removeClass("mobile-header-small");
       }
    });
}
window.onload = init();
// スクロールで小さく ここまで

// スクロールで非表示 ここから
var menuHeight = $("#header").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if (currentPos > startPos) {
    if($(window).scrollTop() >= 200) {
      $("#header,.sp-menu-open,.headsearch").css("top", "-" + menuHeight + "px");
    }
  } else {
  $("#header").css({
    	"top": 0 + "px",
    "box-shadow":"0 2px 6px rgba(0,0,0,.15)"
  });
    $(".headsearch").css("top", + 0 + "px");
  $(".sp-menu-open").css("top", "10px");
  }
  startPos = currentPos;
});
// スクロールで非表示 ここまで

}

スクロール時に非表示にしたい人

スクロール時に非表示にしたい人は3行目から15行目を削除してください。

if (window.matchMedia( "(max-width: 767px)" ).matches) {

// スクロールで小さく ここから
function init() {
    var px_change   = 100;
    window.addEventListener('scroll', function(e){
        if ( $(window).scrollTop() > px_change ) {
      $("#wrapper").addClass("mobile-header-small");
        } else if ( $("#wrapper").hasClass("mobile-header-small") ) {
            $("#wrapper").removeClass("mobile-header-small");
       }
    });
}
window.onload = init();
// スクロールで小さく ここまで

// スクロールで非表示 ここから
var menuHeight = $("#header").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if (currentPos > startPos) {
    if($(window).scrollTop() >= 200) {
      $("#header,.sp-menu-open,.headsearch").css("top", "-" + menuHeight + "px");
    }
  } else {
  $("#header").css({
    	"top": 0 + "px",
    "box-shadow":"0 2px 6px rgba(0,0,0,.15)"
  });
    $(".headsearch").css("top", + 0 + "px");
  $(".sp-menu-open").css("top", "10px");
  }
  startPos = currentPos;
});
// スクロールで非表示 ここまで

}

STEP4:PHPをコピペ!

外観テーマエディタfunction.phpを開き、下記コードをコピペしてください。

大事なことなのでもう一度!function.phpはコピペミスしただけでもサイトが開かなくなるので必ず編集前のファイルを残しておいてください。もし開かなくなってしまったらすぐにFTPソフトで編集前ファイルをアップロードしてください。
//js読み込み
function theme_enqueue_scripts(){
  wp_enqueue_script('original', get_stylesheet_directory_uri().'/original.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

これで先ほどのJavaScriptが読み込まれます。

スクロール時小さくする人は再度調整

スクロール時小さくする人は小さくなった時のサイズ調整が必要です。

ロゴサイズはこの部分を修正します。

.mobile-header-small #site-info span a img{
  height:30px !important; /* ロゴ高さ(小さいとき) */
  width:auto !important;
  margin:5px 0; /* ロゴ余白(小さいとき) */
  transition: .5s;
}

先ほどと同じくスマホを見てサイズを調整してください。

以上で終了です!おつかれさまでした!

JINのカスタマイズ他にもやってます

JIN限定のカスタマイズを他にもアップしてるのでよかったらご覧ください。

あわせて どこよりも簡単にJINのトップページをサイト型にカスタマイズ!

どこよりも簡単にJINのトップページをサイト型にカスタマイズ!
WordPress「JIN」のトップページをサイト型にカスタマイズする方法!記事がズラーっと並べてあるものを自由自在にオリジナルのトップページが作れるようになります。ブログカードを利用するので操作も簡単に!JINで新着記事を取得するショートコードも作りました。

コメント

ページトップへ