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

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

タグ: , ,

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

最新情報をお届けします

Xiaomiの三脚にもなる自撮り棒を購入 三脚としてもそれなりに使えそう

以前に紹介したXiaomiの自撮り棒をGearBestで購入してみました。 関連:Xiaomiの三脚にもなる自撮り棒がGearBestで販売中 – Dream Seed 自撮り棒自体は割と普通。プラス

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

最近何かとQWERTYデバイスが話題に上がりますが、今回紹介するZero Terminalもなかなかのものです。 とてもコンパクトで心惹かれるものがありますが、製品ではなくDIYで制作された手作りガジ

楽天モバイル、ハイレゾスマホGRANBEATと同時契約で月額基本料3か月無料キャンペーン

楽天モバイルがオンキヨーのハイレゾスマホGRANBEATをSIM契約と同時に購入すると、月額基本料が3か月無料になるというキャンペーンを実施しています。 GRANBEAT同時購入で事務手数料+月額基本

BenQ、コストコ専売でモバイルプロジェクタ「GS1」を発売、明るさ300lm コントラスト比は100,000:1

BenQが、コストコ専売でモバイルプロジェクタ「GS1」を発売します。価格は50,000円前後になるようです。 最近、各社からリリースが相次いでいるモバイルプロジェクタですが、BenQのGS1はコスト

Amazon、プライムビデオの視聴でビデオレンタルや購入で使える200円クーポンをプレゼントするキャンペーンを実施中

Amazonでプライムビデオを観るとビデオレンタルや購入で使える200円のクーポンがもらえるというキャンペーンを実施しています。 プライム・ビデオ視聴でAmazonビデオで使える200円クーポンプレゼ

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

最近何かとQWERTYデバイスが話題に上がりますが、今回紹介するZero Terminalもなかなかのものです。 とてもコンパクトで心惹かれるものがありますが、製品ではなくDIYで制作された手作...

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

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

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

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 ...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

BenQ、コストコ専売でモバイルプロジェクタ「GS1」を発売、明るさ300lm コントラスト比は100,000:1

BenQ、コストコ専売でモバイルプロジェクタ「GS1」を発売、明るさ300lm コントラスト比は100,000:1

BenQが、コストコ専売でモバイルプロジェクタ「GS1」を発売します。価格は50,000円前後になるようです。 最近、各社からリリースが相次いでいるモバイルプロジェクタですが、BenQのGS1は...

MENU

back to top