レスポンシブデザインを採用してみました

2012.12.17 (更新日:2016.03.02)

responsive

このブログ、11月からモバイル向けのページをWPtouchで作成していまいたが、サイト全体をレスポンシブデザインに対応させて解像度(ブラウザの幅)によって表示が変わるようにしてみました。モバイル向けもWPtouchを使わず1つのテンプレートで表示しています。

解像度による切り替え

切り替えは大きく3つ。まず横幅880px以上のPCで向けデザイン。横幅は880pxで固定。これは今までどおり。

responsive768

横幅768px〜879pxではメイン記事の部分が少し狭くなります。横幅は768pxで固定。

responsive480

横幅480px〜767pxではサイドバーをなくし、表示も簡易的なものにしました。横幅は480pxで固定。

responsive320

479px以下では横幅を100%指定にしています。

表示確認はViewport-Resizerというサービスを使うと便利です。

モバイル向けに広告を差し替える

PCのブラウザの横幅を変えて表示させた場合と、モバイル機器から見た場合ではUAを判定して表示内容を若干変えています。具体的にはAdsenseの表示。例えば幅320pxのiPhoneで見た場合、横幅336pxの広告ははみ出てしまいます。これを治すには動的に表示される広告を変更する必要があるのですが、Adsenseのポリシーではいかなる理由であろうと広告コードの改変は禁止されています。。このため、横幅がせまくなったらそれにあわせて広告サイズの変更を……ということができません。「display:none」を使って表示される広告を切り替えるという方法も考えられるのでが、これがポリシー違反になるのかならないのか、Google自体からも明確な判断がでていません。Javascriptで画面幅を取得してそれをAjaxでPHPに渡して……とやればなんとかなるのかもしれませんが、面倒なのでUAを判別してモバイルからのアクセスなら広告を小さくするということをしています。

モバイルの判別はWordpress純正のWP_is_mobileという関数があるのですが、iPadもモバイル判定されたりするのでみはら.comを参考に下記のコードをfunctions.phpに追加しました。

function is_mobile(){
    $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry', // blackberry
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate', // Other iPhone browser
    'Googlebot-Mobile',
    'test'
    );
    $pattern = '/'.implode('|', $useragents).'/i';

    if( preg_match($pattern, $_SERVER['HTTP_USER_AGENT']) ){
        return true;
    } else {
        if (preg_match("/Android/i", $_SERVER['HTTP_USER_AGENT'])) {
            if(preg_match("/Mobile/i", $_SERVER['HTTP_USER_AGENT'])) {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
}

もとのコードではAndroidタブレットもモバイルと判断されてしまうので、それを除外する処理を追加しています(AndroidのUAで”mobile”と入っていないものはタブレットを判断しています)。

使うときは


if(is_mobile()){

/* モバイル向けコード */

} else {

/* 非モバイル向けコード */

}

という感じです。

これからコードの整理と軽量化を……

まだ手を入れたいところが幾つかあるのですが、とりあえず大きな問題無いと思います。ただ、CSSがぐちゃぐちゃになってしまったのでこれから整理しないと……。あとは全体的な軽量化ですね。なんか前より重くなってしまった……。

タグ: , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Qualcomm、スタンドアロンVR開発キットをSnapdragon 835にアップデート

QuaicommがSnapdragon 835になったスタンドアロンVRの開発キットを発表しました。 昨年9月にはSnapdragon 820版の開発キットを発表していたので、そのバージョンアップです

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、LG W

どこでもドアが実在したらこんな感じ? ドラえもんVRを体験してきた

東京スカイツリーのお膝元、ソラマチで開催されている、ドラえもんVR「どこでもドア」を体験してきました。 関連:ドラえもんVR「どこでもドア」のPV公開 どこでもドア体験は2月20日から – Dream

HUAWEI nova liteはHUAWEI P8 lite(2017)でhonor 8 liteでもある

先日HUAWEI Japanが発表したHUAWEI nova lite、他国にはないラインナップで日本市場向けの新規モデルかと思ったのですが、欧州で2月から販売開始されたHAUWEI P8 lite(

Androidとモニターを繋ぐとPCライクなマルチウィンドウが使える、RemixOS for Mobile発表

これまで、タブレットやPC向けのRemixOSをリリースしていたjideが、スマートフォン向けのRemixOS for Mobileを発表しました。 その前にRemixOSとは何ぞやという話ですが、こ

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

HUAWEI nova liteはHUAWEI P8 lite(2017)でhonor 8 liteでもある

HUAWEI nova liteはHUAWEI P8 lite(2017)でhonor 8 liteでもある

先日HUAWEI Japanが発表したHUAWEI nova lite、他国にはないラインナップで日本市場向けの新規モデルかと思ったのですが、欧州で2月から販売開始されたHAUWEI P8 lit...

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、L...

Androidとモニターを繋ぐとPCライクなマルチウィンドウが使える、RemixOS for Mobile発表

Androidとモニターを繋ぐとPCライクなマルチウィンドウが使える、RemixOS for Mobile発表

これまで、タブレットやPC向けのRemixOSをリリースしていたjideが、スマートフォン向けのRemixOS for Mobileを発表しました。 その前にRemixOSとは何ぞやという話です...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

MENU

back to top