responsive

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

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がぐちゃぐちゃになってしまったのでこれから整理しないと……。あとは全体的な軽量化ですね。なんか前より重くなってしまった……。

タグ: , ,

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

最新情報をお届けします

sim360

世界105か国以上でテキストメッセージサービスが使える海外ローミングSIM、「Sim360」レビュー

indiegogoで出資していた、世界105か国以上でテキストメッセージが使い放題になるという「sim360」が届きました。 関連:世界105か国でテキストメッセージが使い放題、着信無料の「Sim 3

nuro mobile

nuroモバイル、データ通信料から5ヵ月間700円を割り引くキャンペーンを開始 2GBプランなら実質無料

So-netモバイルLTEあらためnuroモバイルが、新規契約者に対して毎月700円を5か月間割り引くというキャンペーンを開始しました。 関連:So-net モバイル LTEあらため、「nuroモバイ

Nokia

Nokia、HMD Globalと提携し2017年にスマートフォンをリリースすると発表 日本でも出る?

NokiaがHMD Globalとライセンス提携し、2017年にスマートフォンをリリース予定であることを発表しました。 この内容、以前から言われていたことですが、プレスリリースの形で公式に発表されたの

lenovo-smartphone-phab-2-pro-family-colors-10

Google Tangoに対応した世界初のファブレットLenovo Phab2 Proが国内販売開始

Google Tangoに対応する世界初のファブレット、Lenovo Phab2 Proの国内販売がLenovoの公式ショッピングサイトで開始されています。 Tangoに対応したPhab2 Pro そ

yogabook

レノボ公式サイトでYOGA BOOKの販売が再開 Android、Windowsとも全モデル在庫あり

品薄で永らく購入不可の状態が続いていたYOGABOOKですが、公式ショッピングサイトで販売が再開されました。 関連:板タブにもなるフラットなキーボードが特徴のLenovo YOGA BOOK(Andr

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

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

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

Amazonプライムの初回年会費が今なら1,000円オフ 12月4日まで

Amazonプライムの初回年会費が今なら1,000円オフ 12月4日まで

Amazonがプライム会員の初回年会費が1,000円オフの2,900円となるキャンペーンを行っています。 プライム年会費が今だけ2,900円 Amazonプライムで見れるオリジナル作品「ドキュ...

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

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

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

レノボ公式サイトでYOGA BOOKの販売が再開 Android、Windowsとも全モデル在庫あり

レノボ公式サイトでYOGA BOOKの販売が再開 Android、Windowsとも全モデル在庫あり

品薄で永らく購入不可の状態が続いていたYOGABOOKですが、公式ショッピングサイトで販売が再開されました。 関連:板タブにもなるフラットなキーボードが特徴のLenovo YOGA BOOK(A...

MENU

back to top