塾なし受験道

塾なしでも偏差値72の公立高校に合格!!市販問題集で高校受験を乗り切った体験ブログ

https化をしたら,スマホの複合メニューバーが変に!?~解決方法~

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

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

 

ん!??

 

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

 

f:id:withoutjuku:20170322080013j:plain

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

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

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

 

f:id:withoutjuku:20190112192436j:plain

 

 

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

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

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

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

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

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

</div><!--toggle-content-->
</div><!--toggle-contents-->

<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><!--btn-area-->
<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様考案の複合メニューバーについて,詳しくは☟

はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life