以前紹介した記事「可変スタイルとMedia Queriesの組み合わせは便利だけど難しい」にも書いていましたが、css3 Media Queriesのみでスマートフォン対応にすると不都合があります。
css3 Media Queriesのみでの不都合点
- Google AdSense広告の表示方法とサイズの問題
- スマートフォンサイズになった時に表示させたくないブロック(サイドバーなど)をdisplay: noneで見えなくしてもhtmlコード自体は残っているので不要なコードが残る
- PC用の大きい画像サイズがcssによって小さく見せるだけなのでスマートフォンでは重くなる
このような感じでPCよりも通信速度や CPU のパワーの劣るスマートフォンではcss3 Media Queriesのみだとかなり不都合があります。
しかしWordPress3.4以降使えるようになっている関数wp_is_mobileを使うとPC用とモバイル用(タブレット、スマートフォンなど)に切り替えることが出来るので、先ほどの不都合箇所全てがカバーできるのでかなり便利です。
wp_is_mobileでcss3 Media Queriesのみでの不都合点を解消
- Google AdSense広告をPC用、モバイル用(タブレット、スマートフォンなど)に切り替え可能
- PC用、モバイル用(タブレット、スマートフォンなど)でコードを作成できるのでhtmlの不要なコードはない
- PC用、モバイル用(タブレット、スマートフォンなど)で画像サイズが変更できるのでスマートフォンでも重くならない
それではコードを紹介します。
WordPressでレスポンシブ ウェブ デザインを行うなら必ず覚えておきたいwp_is_mobile
<?php if (wp_is_mobile()) :?> /*スマートフォン用コード*/ <?php else: ?> /*PC用コード*/ <?php endif; ?>
これでPC用とモバイル用(タブレット、スマートフォンなど)に切り替え可能になります。とっても便利です。Google AdSense広告の表示もこのコードを使い切り替えます。
WordPressでGoogle AdSense広告をPC用とモバイル用(タブレット、スマートフォンなど)に簡単切り替え
<?php if (wp_is_mobile()) :?> /*スマートフォン用Google AdSenseコード*/ <?php else: ?> /*PC用Google AdSenseコード*/ <?php endif; ?>
Googleではレスポンシブ ウェブ デザインの推奨していますので、WordPressでサイトを構築されている方は必ず覚えておきたいwp_is_mobileだと思います。
最終更新日: 2013年3月27日
私も狩られかけています。
いきなりクリック率があるサイトだけ200倍近く上がっており
慌ててGoogle AdSenseへ連絡したところです。
何のメリットにもならないこのアドセンス狩り・・・
嫌がらせの中でも低俗中の低俗。妬み僻みでやっているのでしょうから
ほんとに何も取り柄のない低レベルで暇な人間なのでしょうね。
報復してやりたいですが、きっと既に罰が与えられているから
そんなクズ的行為をしているんだと思います。
負の連鎖というやつですね。
運営者様は回復されたとのことで本当によかったですね!
どこのどいつか分かりませんが、そんな人間がいるということは悲しいことです。
もっと有意義なことに時間を使えば、
人に嫌がらせする残念な人生にならないのに。
哀れすぎますね。
長々とすみません。愚痴らせてもらいました。
失礼しました。
ムダにページを分けてあり、見難かったです。この程度なら1ページ表示でいいのでは?