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

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

タグ: , ,

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

最新情報をお届けします

microUSB-USB-Aの両端がリバーシブル仕様になったABOATのUSBケーブル3本セットがお買い得

上下の区別がないUSB Type-Cケーブルはとても便利ですが、まだまだmicroUSBな端末も多いです。 そんな人にも便利そうな、両端のmicroUSB、Type Aとも両面挿しが可能なケーブル3本

心拍モニタを搭載し、スマートフォンの通知にも対応したWhitings Steel HRが1月20日に日本で発売

海外では昨年9月に発表されていたWithingsのアクティビティトラッカ、Withings Steel HRが1月20日に日本で発売になります。 関連:Nokia傘下のWithings、心拍モニタを搭

コストコのディナーロールで揚げパンを作ってみた

コストコには1袋36個入りで460円という、私のようにお金はないけどカロリーを確保したいという人には大変ありがたい食材も売っているのですが、賞味期限が2日~3日しかなくさすがに期限内に全部食べ切るのは

LINEモバイル、1月18日から端末保証オプションをスタート 2月17日までは既存ユーザも申し込みOK

LINEモバイルが1月18日(水)から端末保証オプションを開始すると発表しました。 この手の端末保証オプションは通常、新規契約の時にしか申し込めませんが、2月17日まで既存ユーザも追加で申し込みが可能

小型PC「GPD WIN」のゲームパッドをPS4のリモートプレイで使う方法

キーボードとゲームパッドが付いた小型PC「GPD WIN」。 小さくてもWindows PCなので、PlayStation 4のリモートプレイをインストールして、PS4のゲームをプレイすることが可能で

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

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

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

Microsoft、Surface Pro 4を価格改定 最大78,000円の値下げ

Microsoft、Surface Pro 4を価格改定 最大78,000円の値下げ

日本Microsoftが本日(1月16日)からSurface Pro 4の価格を値下げすることを発表しました。 Surface Pro 4が最大78,000円の値下げ Surface Pro ...

小型PC「GPD WIN」のゲームパッドをPS4のリモートプレイで使う方法

小型PC「GPD WIN」のゲームパッドをPS4のリモートプレイで使う方法

キーボードとゲームパッドが付いた小型PC「GPD WIN」。 小さくてもWindows PCなので、PlayStation 4のリモートプレイをインストールして、PS4のゲームをプレイすることが可...

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

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

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

Android 7.0の標準機能、画面分割モードの使いかた

Android 7.0の標準機能、画面分割モードの使いかた

honor 8へのアップデートが開始されたAndroid 7.0 Nougatはデフォルトで画面分割モード(2画面モード)に対応しています。 画面分割モードはその名の通り画面を2分割して別々のアプ...

MENU

back to top