WPtouchでスマートフォン表示させたWordPressブログのGoogle Adsenseのサイズを最適化してみた

      2015/09/19

Pocket

スマホとPCを使う人 2

先日、当ブログにもGoogle Adsenseを導入しましたが、スマートフォン表示させると画面からはみ出してしまうという現象が起こります。当ブログで「single.php」や「functions.php」に直接書き込んだのは、プラグインなどを使うとこのような現象が生じるためです。しかし直接コードを書き込むことでスマートフォン表示ではアドセンスが表示されなくなりますから、スマートフォンでの表示には別の場所にコードを書き込む必要があります。

当ブログでは3箇所にアドセンスを表示させていますから、それぞれの設置方法についてご紹介します。

タイトル下にはWPtouchのプラグイン設定画面から表示可能

WordPressのダッシュボード画面から「設定⇒WPtouch」へと進みます。

スクリーンショット 2013 09 27 19 18 23

「Advertisign,Stats&Custom Code」の項目にアドセンスの「サイト運営者ID」を入力します。「pub-」の箇所も含めて全部コピーして貼り付けます。これでスマートフォンサイトではタイトル下に表示されるはずです。

PCサイトと同様に「moreタグ」の箇所に配置する

前回の記事と同様に「@kankichiさんの記事」を参考にして「functions.php」に直接書き込む方法をとりました。

入力すべき箇所が分かりにくかったので、契約しているレンタルサーバーの中にある「function.php」(public_html/wp-content/plugins/wptouch/themes/defaultの中にあります)の最後に直接追記する形で入力しました。

使用するアドセンスコードは250×250のサイズのものを使用するのが一番スッキリ入るかなーと思います。

記事の最後に表示する

これも契約しているレンタルサーバーの中にある「single.php」(public_html/wp-content/plugins/wptouch/themes/defaultの中にあります)に直接書き込みます。

30行くらい下がると

<!– Categories and Tags post footer –>

という箇所がありますから、この直前にアドセンスコードを書き込みます。

これで、記事の直下に表示させることが可能です。ここでもやはり使用するアドセンスコードは250×250のサイズがスッキり見えると思います。

スマートフォンでの表示は特に気を遣うべきです

スマートフォンの急激な普及により、ほとんどのブログでモバイルからの訪問が増えていると思います。当ブログではpvの約80%がスマートフォンからの閲覧となっております。もし50,000pvあるブログであれば、約40,000pvはモバイルからの閲覧ということになります。これは無視できない問題ですね。

多くのブロガーはPCからブログを書くほうが、画像の編集や執筆スピードの観点から好まれる傾向にあると思います。ともすると、モバイル端末からどのように見えているのかということをあまり気にしていないブロガーさんもいるのではないかと思います。

ですが、今は逆にモバイルからの見え方を重点的にカスタマイズする方がユーザビリティに優れているブログであると言えるのではないでしょうか。アイキャッチ画像などで挿入している画像はスマートフォンのサイズに応じて自動的に縮小されるのですが、アドセンスについては挿入したタグで設定されているサイズのまま表示されるので、PCサイトでは最適なのですがスマートフォンページでははみ出してしまいます。

「少々画面からはみ出していたっていいんじゃない?」なんて後回しにしないで、是非取り組んでみてくださいね。

 - ブログ運営

  • このエントリーをはてなブックマークに追加
  • Pocket
  • Clip to Evernote
  •    
  • follow us in feedly

  関連記事

歳月庵の管理人である私がもっと読んでほしいと思っている記事とその共通点は? #手前味噌良記事3選

「ブログ書いてて思うのが、気合い入れて書いたものほどあまり読まれないということ。 …

実際にブログのバックアップをとってみると、エラーばっかりでうまくいかなかったので苦労しました。

ブログのバックアップの大切さをひしひしと感じているAtsushi(@atsush …

ブログを心の負担にしないために私が考えていること

今までは周期的にブログから遠ざかりたいなーと感じる時期がありました。そういう時っ …

iPhoneでするぷろを使ってモブログしています。その雑感など

ただいま、旅行中につきiPhoneだけで、するぷろというアプリを使ってモブログし …

ブログを続けるために手に入れたノウハウが通用しなかったのでこう対処してみた

当ブログでは「ブログ運営論」的な記事をたくさん書いています。書き続けるために必要 …

アマチュアブロガーの悶絶:#02 ブログを書く時間がないと思っているあなたへの提言

ブログは毎日更新するのがいいということはいろんなところで言われています。最近でも …

ブログに書こうと思ったことはその時に書かないと後悔すると感じた話

  タイトルが全てを物語っています。 最近は記事に書こうと思ってもなか …

【アンサー・エントリー】 ”2012年の総まとめ” 私を迷走から助けてくれたたった1つの言葉とは

正直、今年の後半は迷走していたためか記事の内容も意味不明なものが多かったように思 …

WordPressのAndroidアプリからブログを更新しようとしたら、いきなり接続エラーが出たので改善してみた!!

ブログを書くことにもだいぶ慣れてきました、Atsushi(@atsushi_k0 …

「人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術」は、そろそろブログを次のステップへ押し上げてみようと思っている人に最適の1冊でした

当ブログが誕生してからすでに3年が経過しています。相変わらず鳴かず飛ばずのブログ …