Love2Labo

日常の些細なことやどうでもいいことをあなたに。たまに Wordpress カスタマイズ。

STINGER

[STINGER5]スマホ用モバイルバナー広告をキレイに設置するテクニック

投稿日:2014/10/27 更新日:

昨日の投稿でスマホ表示時の横揺れ問題について書きました。久しぶりのIT系記事で我ながら悦に入っていたわけです。

[STINGER5]スマホ表示時に横揺れが発生する原因と解決策

すると数時間後、えじさん(@ejinote)がそれ以上の素晴らしい記事を書いてくれました!

何がすごいって、まずタイミング。私が記事を投稿して数時間ですよ!私この記事書くのに3時間かかってます。

それなのになんて書くの早いんだ!と感動!このボリューム、私が書いたら、確実に日付変わってますヘ(゚∀゚ヘ)アヒャ

そして内容!

私は気になったブログをCromeのDeveloper toolsのEmulationを使って一個一個手作業で見てたわけです。

それがなんと!URL入力だけでわかるんですよ!ΣΣ(゚д゚lll)ガガーン!!

いやー、気になったことは記事にすると、答えを教えてくれる人が現れるんだ!と感動して、スマホ見ながらニヤニヤしちゃいました。

嫁さんに「気持ち悪っ」と言われましたけどね(´・ω・`)ショボーン

今日一番書きたかったのはえじさん教えてくれてありがとう!っていう感謝の気持ち。これ大事。

これだけではちょっとボリューム少ないし、私も書いてて物足りないので、残りはスマホ広告の貼り方を書いておきます( ´,_ゝ`)イ ヒ

 

スポンサーリンク

目標:スマホで表示したときにヘッダー最下部にモバイル広告を表示する

完成予定図

stinger5_ad_mobile

今回修正するファイル

  • header.php
  • style.css

Google Adsenseで広告を作成

Google Adsenseのスクリーンショットは設定画面もNGだったと思うのでテキストのみになります。

私はラージモバイルバナー(320*100)でテキスト広告+ディスプレイ広告を選択しました。

コードが表示されるので、コピーしてテキストエディタにでも貼り付けておきましょう。

 

header.phpに広告コードを追加

追加する場所

追加する場所は</header>タグの直前です。<header>ではなく</header>なので注意して下さい。

</header>タグはおそらく最終行にあるはずです。

スマホで閲覧時のみ表示

is_mobile()関数を使用します。

<?php if(is_mobile()): ?>~<?php endif; ?>で囲んだ部分がスマホのみ表示されるようになります。

微調整のための<div>タグを追加

広告コードを直接書くと、wrapperのpaddingで右に10pxずれて表示されます。(CSS的には、ずれているのが正常です)

モバイルバナーは320pxのため、右に10pxずれると右端が330pxとなり、表示領域をはみ出します。

それを調整するために微調整用の<div>タグを用意します。

ID名は何でも自由ですが、IDは同一ページ内で1回しか使用できません。モバイルバナーを複数表示したいならClassにした方がいいかもしれません。

広告コードの貼り付け

広告コードは人によって異なります。必ずご自身のコードを貼り付けてください。

上記コードはサンプルなので、このままコピペしても動きません。

最終的なコード

 

上記の通りに貼っていくとこんな感じになります。

これも広告コードの部分をサンプルにしているので、このままでは動きません。

必ずご自身のコードをコピペしてください。

 

style.cssの編集

ここまでで広告は表示されますが、例の横揺れ問題が発生しているはずです。

stinger5_ad_mobile_01

これが横揺れ問題の原因です。

そこで、先ほど<div>で囲んだ部分をネガティブマージンで左に動かします。

記載場所は特にどこでも問題ありません。

「@media only screen~~」などで囲まなくても、phpの方で端末を判断しているので問題ないはずです。

 

まとめ

これでiPhone5Sでは意図した状態で表示されています。

ただし、iPhone5Sを横持ちすると、広告は左寄せになっています。それも気に食わない!o(`ω´*)oって方は適当にCSSをいじってみたらいいんじゃないかな( ´,_ゝ`)イ ヒ

あと、私iPhone6持ってないんで、6だとどうなるかよくわかりません。また、Android端末もないので確認していません。

IT系ブロガーを名乗っておいてどうなの?って気もしますが、個人のブログだしいいかなーって。

妥協よくない!って方はご自身で検証しちゃってください。結果教えてくれると喜びます(*´艸`)ウフフ

以上、あめたま(@ametama_l2l)でしたヾ(゚ω゚)ノ゛

-STINGER
-,

Copyright© Love2Labo , 2016 AllRights Reserved Powered by AFFINGER4.