Loading...

やっとブログをレスポンシブに対応しました

f:id:nasust:20180228162402j:plain

こんにちはnasustです。

ブログ開設して2年、やっと自分のブログをレスポンシブに対応させました。

2年もレスポンシブ対応していなかったのは、PC表示のデザインを集中していたことです。スマートフォンの表示は後でいいや、という感じで、ずるずると対応を伸ばしてきました。

それと、はてなデフォルトの表示のままで良いかなという気持ちもありましたね。

あと、レスポンシブに対応していないブログを現状から対応するのに苦労しそうという理由で、手を出しにくいというもあります。

しかし、アクセスログ見るとアクセス数の半分はスマートフォンです。

せっかく訪問してくれるのに、ブログのデザインがデフォルトのままでは、しょぼい印象を持たれるかもしれない。PCとスマートフォンでは落差が激しすぎる。これは良くない。

なので、PC表示のカスタマイズは一段落ついたので、一気奮闘してレスポンシブに対応しました。

どうやって対応したか

固定レイアウトをレスポンシブに対応するには、苦労しそうです。UI自体もPCを前提としたものが多いです。

そこでスマートフォン用、タブレット用のUIに切り替える為に、JavaScriptで専用のCSSを読み込むようにしました。

下記のJavaScriptを利用すると、閲覧者の機器がスマートフォンタブレットか判別することができます。

GitHub - hgoebl/mobile-detect.js: Device detection (phone, tablet, desktop, mobile grade, os, versions)

そして、以下のようにしてモバイル用のCSSを読み込むようにしています。

<script src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.1/mobile-detect.min.js"></script>
var md = new MobileDetect(window.navigator.userAgent);
if (md.mobile()) { // モバイルの時だけ実行する
    $("body").addClass("mobile");
    if (md.phone()) $("body").addClass("phone");
    if (md.tablet()) $("body").addClass("tablet");
        
    document.write('<link type="text/css" rel="stylesheet" href="/hatena_mobile.css">');
}

ちょっとしたテクニックで、 if (md.phone()) $("body").addClass("phone");if (md.tablet()) $("body").addClass("tablet");で、bodyタグにスマートフォンの場合はphoneクラス、タブレットの場合はtabletクラスを追加しています。

これは、CSSセレクタで、

.phone .entry-content{
    /* スマートフォン用のスタイル */
}
.tablet .entry-content{
    /* タブレット用のスタイル */
}

の様に書くことで、端末に合わせたスタイルを書くことが出来ます。

また、ブログで利用しているJavaScriptも端末を判別させて動作するようにしました。

このように、ブラウザの幅だけでなく閲覧者の環境に合わせてCSSを使用することによって、最適化することができます。また環境別に問題を切り分けることも出来るので、カスタマイズも楽になりました。 

スクリーンショット

f:id:nasust:20180228184131p:plain

こんな感じになりました。下のフッターメニューは下にスクロールすると消えます。上にスクロールすると表示します。アプリっぽいメニューにしました。

厳密にはレスポンシブでは無い

レスポンシブの定義というのは、ブラウザの幅に合わせて表示することなので、このように端末に最適化するような対応はアダプティブに近いです。

私自身の好みとして、作業量が増えますが端末毎に最適化するほうが好みです。その方がUIが優れていると思いますので。

まだ、モバイル対応したてなので最適化の余地は、まだまだあります。将来的にはネイティブアプリのようなUIにしたいです。