無料版のはてなブログでスマホの表示をカスタマイズする方法
こんにちはnasustです。
僕のはてなブログは気合を入れている割には、まだ無料版のはてなブログなんですよね。
もう少しアクセス数が増えたらProに移行しようかと思っています。
それで無料版の困ったところは、スマホの表示がカスタマイズできないことです。
無料版でも行うには、レスポンシブ対応のテーマを使用しなければなりません。
しかし、レスポンシブのテーマでカスタマイズするとPCとスマホ両方に適用される為、
スマホの方が使いにくくなる可能性があります。
ですので、PC用とスマホとカスタマイズを分けたほうが良いですが、無料版では出来ません。
しかし、JavaScriptを利用すれば可能です。
僕は以下のJavaScriptをブログの詳細設定のヘッダに保存して、スマホ用のCSSを適用しています。
<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() ){ document.write('<link rel="stylesheet" type="text/css" href="http://XXXXXXX/XXXXXXX.css">'); } </script>
mobile-detect.js
mobile-detect.js | Device detection (phone, tablet, desktop, mobile grade, os, versions)
このJavaScriptのライブラリを利用するとブラウザの様々な情報から、 PCかスマホか判別する事ができます。
僕の場合は、md.phone()
でスマホで閲覧するとスマホのメーカー名が取得できます。
その時はモバイル用のCSSを読み込みむようにしています。
これを利用することで簡単では無いですが、スマホ表示をカスタマイズできます。
JavaScriptでゴリゴリすればPro版と同じ程度はカスタマイズできる筈です。