2012月

レスポンシブデザインのWordPressユーザ注目。スマホ閲覧時に記事中のAdsense広告をはみ出させない方法


こんにちは! 寄金です。

もうすぐWEBマガジン『Handmade Future !』を書き始めて1ヶ月になります。60,000PVに届きそうな感じ。滑り出しとしては上々ですね。早期に10万PV / 月は超えたいと思っています。

当ブログの初期段階の評価指標は、

  1. 信用度を上げるため、ソーシャルプルーフの増大(=SNSのフォロワーを増やす)
  2. 活動基盤を整えるため、収益の確保

においています。

ソーシャルプルーフの成果については月末に改めて記事を書きます。今回取り上げたいのは、収益のほうです。

見てのとおり、ヘッダー、サイドバー、記事中にGoogle AdSenseやAmazonアソシエイトを設置しています。今月は1万円に届くかどうか、といったところ。

レスポンシブデザインだとモバイル閲覧時にAdsenseがはみ出る

今回、問題になったのは、Adsenseです。当ブログはレスポンシブデザインなので、スマートフォンやタブレットで閲覧すると、デザインを維持したままサイズがぐにゃぐにゃと変わります。

ところが、Adsense広告はサイズ固定なので、画面の小さなモバイル機器で閲覧すると、はみ出てしまうケースがあります。

iPhoneで閲覧すると、デザインからはみ出してしまっているのがわかる。

 

サーバー側で閲覧機器を判断して、表示する広告を切り替える

解決するには、閲覧する機器によって表示する広告を切り替える必要があります。これはWordPressなら簡単にできます。
[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com

手順としては、まずユーザーエージェントを判定してモバイルを定義するよう関数を指定します。次にテンプレートにPHPで、モバイル機器の場合に読み込むコードと、それ以外の場合に読み込むコードを指定します。

こう書くと難解なようですけど、上記記事のとおりにやれば問題ありません。

僕の場合は、モバイル機器では250×250サイズ、それ以外では336×280サイズを表示するようにしています。

 

ただし記事中ではPHPが使えない

テンプレート内、サイドバーや記事直下に表示させる場合は、これですんなり解決します。

サイドバーのAdSense広告。きっちり枠に収まっている。

が、問題は、記事中の任意の場所にAdsense広告を表示させたい場合です。

通常、WordPressの投稿ページでは、HTMLは使えますが、PHPは使えません。閲覧機器によって読み込ませるコードを指定できないわけです。

 

じゃあWordPressの投稿画面でPHPを使えるようにしよう

そこでプラグインを使って、投稿ページでPHPを使えるようにします。

WordPressのエントリーでPHPを利用する方法[to-R]

これで、テンプレートに組み込んだPHPコードが、記事中でもそのまま使えるようになります。

上記プラグイン『Exec-PHP』はエラーメッセージが出ますが、こちらの方法で解消できます。

WordPressにプラグインExec-PHP 4.9をインストール | あれこれ日記 – 一筆啓上

万事解決!

 

広告位置は最適化の途中ですが、現在はこの方法で、書き出しと本文の間に表示させています。CTRは平均と言われる0.2%台よりはいい数字が出ています。

参考までに。

Share this Story
記事はいかがでしたか?
1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価はありません)
Loading...




寄金佳一 デジタル販売記事
urepia-banner3のコピー writing-bannerのコピー



話題の記事





最新記事はSNSをチェック

TOPページ サイトマップ 更新履歴