Loading...

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

f:id:nasust:20161222193035j:plain

こんにちは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版と同じ程度はカスタマイズできる筈です。