無料のはてなブログでスマホ版の表示でメニューバーを追加する - はてなブログカスタマイズ
こんにちはnasustです。
相変わらず無料版のはてなブログを利用しています。
無料版でもメニューバーを追加するカスタマイズしました。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life
こちらのカスタマイズと
無料版のはてなブログでスマホの表示をカスタマイズする方法 - nasust life 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>
関連記事
