読者です 読者をやめる 読者になる 読者になる

無料のはてなブログでスマホ版の表示でメニューバーを追加する - はてなブログカスタマイズ

f:id:nasust:20170117225815j:plain

こんにちはnasustです。
相変わらず無料版のはてなブログを利用しています。

無料版でもメニューバーを追加するカスタマイズしました。

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

こちらのカスタマイズと

無料版のはてなブログでスマホの表示をカスタマイズする方法 - nasust blog

このカスタマイズの合わせ技です。

詳細設定の"ヘッダ要素に追加"

詳細設定の"ヘッダ要素に追加"にあるテキストエリアは、スマホ表示でも適用されます。

JavaScriptスマホであるか判別して、JavaScriptでhtmlを書き出しています。

JavaScriptで頑張れば、無料版でも同じようにカスタマイズできます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.5/mobile-detect.min.js"></script>


<script>
var md = new MobileDetect(window.navigator.userAgent);
if( md.phone() ){
   $(function(){
       html = "<div id='menu'>"
       html += "<div class='toggle-contents'>"
       html += "<div class='toggle-content'>"
       html += "<div class='hatena-module hatena-module-entries-access-ranking'"
       html += "     data-count='5'"
       html += "     data-display_entry_category='0'"
       html += "     data-display_entry_image='1'"
       html += "     data-display_entry_image_size_width='50'"
       html += "     data-display_entry_image_size_height='50'"
       html += "     data-display_entry_body_length='0'"
       html += "     data-display_entry_date='0'"
       html += "     data-display_bookmark_count='0'"
       html += "     data-source='access'"
       html += ">"
       html += "  <div class='hatena-module-body'>"
       html += "  </div>"
       html += "</div>"
       html += "</div>"
       
       html += "<div class='toggle-content'>"
       html += "<ul class='category-list'>"
       html += "<li><a href='http://nasust.hatenablog.com/archive/category/%E9%9B%91%E8%A8%98'>雑記</a></li>"
       html += "<li><a href='http://nasust.hatenablog.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA'>はてなブログカスタマイズ</a></li>"
       html += "<li><a href='http://nasust.hatenablog.com/archive/category/Go%E8%A8%80%E8%AA%9E%20%2F%20golang'>Go言語 / golang</a></li>"
       html += "<li><a href='http://nasust.hatenablog.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E6%9D%91%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81'>はてなブログ村のまとめ</a></li>"
       html += "</ul>"
       html += "</div><!--toggle-content-->"
       html += "</div><!--toggle-contents-->"
       
       html += "<div class='btn-area'>"
       html += "<a class='home-btn' href='http://nasust.hatenablog.com'><i class='blogicon-home lg'></i><br>HOME</a>"
       html += "<span class='toggle-btn'><i class='blogicon-good lg'></i><br>人気記事</span>"
       html += "<span class='toggle-btn'><i class='blogicon-list lg'></i><br>カテゴリ</span>"
       html += "<span class='back-btn'><i class='blogicon-chevron-up lg'></i><br>Top</span>"
       html += "</div><!--btn-area-->"
       html += "<div style='clear: both;'></div>"
       html += "</div>"
       
       $("body").prepend(html);
       
       (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>
広告を非表示にする