https化をしたら，スマホの複合メニューバーが変に！？～解決方法～ - 塾なし受験道～お金をかけずに高校受験！～

セキュリティのためにhttps化なるものをした方がよい，とのこと。
https化自体はスムーズにできた・・・と思ったのですが，

スマホから自分のブログを見ていたら，

ん！？？

スマホに導入していた，複合メニューバーが変・・・。

f:id:withoutjuku:20170322080013j:plain

「複合メニューバー」とは何かを説明しなければなりません。

スマホでブログを回遊しやすいようにと取り付けたツールでして，

Yukihy　Life　様のコードを使わせていただき，大変重宝しておりました。

f:id:withoutjuku:20190112192436j:plain

ところが，https化をして少したったある日，久しぶりにスマホで自分のブログを開いて見たところ，この複合メニューバーが何かおかしい。

HOMEボタンのみ正常に動いていましたが，ほかの三つのボタン（「人気記事」「カテゴリー」「Top」）は機能していませんでした。

実は，時をほぼ同じくして，ブログに手を加えていたため，その変更のどれかが複合メニューに影響を与えたのかもしれない，と思いました。

そこで，その日加えた変更を片っ端から元に戻して様子を見ましたが，やっぱり問題は解消されません。

やっぱり，https化に伴う何らかのエラーに違いないと思い，コードを見直すことにしました。長いので途中から。

https化に関係のありそうな箇所は二か所。
最初は，ホームボタンの

</div>
</div>

<div class="btn-area">
<a class="home-btn" href="https://www.withoutjuku.com/"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリー</span>
<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>
</div>
<div style="clear: both;"></div>
</div>

これは変えてあったため，ホームボタンは問題なく作動していました。

ひょっとして，ほかにもhttpをhttpsに変えなければいけないコードがあるのでは！？と思い，調べてみました。

すると，下の方に・・・

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var contentArea = $(".toggle-content");
    $(".toggle-btn").click(function(){
        var index = $(this).index()-1;
        var clickedArea = $(contentArea).eq(index);
        if($(clickedArea).css('display') !='none'){
            $(contentArea).slideUp();
        }else{
            $(contentArea).slideUp();
            $(clickedArea).slideDown();
        };
    });
    $(".back-btn").click(function(){
        $("html,body").animate({scrollTop:0},"fast");
    });
});
</script>

ありました！！

超ド素人のわたしには，これがエラーに関係あるのかないのか分かりませんでしたが，ともかくこの"http"を"https"に変えてみました。

すると・・・

解決！！！

無事，複合メニューバーが機能するようになりました。

いくら調べても解決方法が見つからず困りましたので，どなたかのお役に立てたらと思い，書いてみました。

Yukihy Life様考案の複合メニューバーについて，詳しくは☟