アドセンス広告を利用している方におすすめなのが、パソコンなら横並びで2つ、スマホならレスポンシブの広告でひとつだけ表示する方法です。
パソコンの場合は横幅が十分にあるので、二つ並べても大きく表示することができます。それに広告を2つ設置したほうが、一つだけ表示されているときに比べクリック率が高いです。
しかし、横並びのソースコードがそのままスマホに反映された場合は、広告が縦にふたつ表示されます。なのでコンテンツが目立ちにくく、ユーザーにとって使いにくいです。
（注）以前は上の説明のとおりの表示だったのですが、2018年8月にはこの記事で紹介している設定にすると、スマホの場合でも広告が横に2つ並んで表示されるようになりました。
今回は、賢威テンプレートにパソコンでは横並びで二つ、スマホならレスポンシブの広告をひとつだけ表示させる方法を紹介します。どちらも2つ表示されます。
このページの目次
アドセンスの広告を横並びで表示するときに注意すること
パソコンに表示させるなら、レスポンシブの広告を2つ、テキストとイメージの両方が表示されるように設定すると効果的だよ。広告の中には、テキストしかないものやイメージだけのものがあるんだ。テキストだけとかイメージだけに限定した場合、最適な広告が表示されない可能性があるからね。
そうか!
どちらも選んだ方が、広告表示のチャンスが増えるのね！他にも気を付けなくてはならないことってあるの？
広告を2つ並べて表示するなら、右と左に別々の広告ユニットを設置したほうがいいよね。これなら、異なる2つの広告が表示される可能性が高くなるからクリック率も上がると思う。あとはひとつの記事にいくつかの広告を設置する場合は、広告コードをいくつか用意する。そうすれば、同じ広告表示を防ぐことになるはずだよ。
ブログの訪問者には、いろいろ見てもらったほうが、いいってことね！
その通り！ユーザーにとって最適化された広告が表示されるけど、実際にどんな広告に興味があるのか推測できないこともあるだろうし、選択肢は多い方がいいんじゃないかな！
レスポンシブの広告を横に2つ表示しよう
スマホの場合は、縦に2つ並んでしまうけど、まずはパソコンで横に2つ表示されるように設定してみよう。ところで広告ユニットの準備は出来てる？これからってことなら、下の記事で紹介しているよ。ただアドセンスは、使いやすいように進化しているから、今はもっと簡単に作ることができるんだ。
⇒googleアドセンス広告の貼り方｜広告ユニットを作成する方法
広告ユニットの用意が出来たら、賢威テンプレートの管理画面の「共通コンテンツ」から「新規追加」をクリックしよう。
そこに下のコードを貼り付ける。Windowsなら「Ctrl」と「C」でコピー、「Ctrl」と「V」でペースト、Macなら「command」と「C」でコピー、「command」と「C」でペーストできるよ。コピペの方が、間違いを防げるし簡単だよね。
|
1 2 3 4 5 6 7 8 9 |
<p class="ad-box-label">[スポンサードリンク]</p> <div class="ad-box-wrap"> <div class="ad-box-left"> 左に表示する広告コードを記述 </div> <div class="ad-box-right"> 右に表示する広告コードを記述 </div> </div> |
次にデザインの調整をしよう。管理画面の「外観」から「テーマの編集」をクリックする。
画面の右側にある「base.css」のファイルをクリックする。
ファイルの一番下に、次のコードを追加していこう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.ad-box-label { margin-top: 30px; text-align: center; } .ad-box-wrap { display: inline-block; width: 100%; margin-top: 20px; margin-bottom: 50px; text-align: center; letter-spacing: -.5em; } .ad-box-sp { margin-bottom: 30px; text-align: center; } .ad-box-left{ display: inline-block; width: 50%; min-width: 320px; margin-bottom: 10px; letter-spacing: 0; } .ad-box-right{ display: inline-block; width: 50%; min-width: 320px; margin-bottom: 10px; letter-spacing: 0; } .ad-box-wrap:after { content:""; display:block; clear:both; } @media only screen and (max-width : 736px){ .ad-box-left, .ad-box-right{ width: auto; min-width: 0; } } |
コードをコピペしたらファイルの更新をクリックして保存！
ちなみに賢威テンプレートを使っているなら子テーマを使った方がいいよ。テーマが変更された場合は、カスタマイズした部分は消えてしまうんだ。親テーマは、再度カスタマイズしなくちゃいけない。でも、子テーマに書き込んだソースコードは、親テーマが変更されても受け継がれる。だから便利さ！
子テーマの作り方は下の記事で確認できるよ。
⇒ワードプレス初心者向け賢威子テーマの作り方（エックスサーバー編）
ここまで設定したら、うまく表示されているかパソコン画面で確認してみよう。広告コードが反映されるまで、しばらく時間がかかることもあるけれど、間違っていなければ表示されるはずなんだ。
うん！うまくいったみたいね。
パソコンとモバイルで表示を変えていこう
ここまでの設定でスマホなら、縦に2つの広告が表示されていると思う。スマホは画面が小さいから、広告が続くとコンテンツの印象はうすくなるよね。だから、パソコンとスマホの広告は別々のほうが見やすいんじゃないかな。
ただ、アドセンス広告は指定されている方法を除いて広告ユニットを非表示にできない。これって禁止されているんだよね。だから「display:none」とか使えない…
ふうん知らなかった！だったらどうすればいいの？
一つはアドセンスの指定どおりの方法を利用すること。もう一つは、WordPress側でパソコンかモバイルかを判断するように表示を切り替える設定をすること。
どちらの方法でも対処できるよ！もし、アドセンスが指定している広告の非表示設定を使うならadsenseヘルプの「広告ユニットを隠す」を見て欲しい。これとは別にWordPress側で切り替える場合は「function.php」に下のコードを追加していこう。
function.phpにショートコードを設定する
管理画面の「外観」から「テーマの編集」をクリックする。そこに、function.phpのファイルがあるから、下のコードをコピペする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//PCのときだけ表示 function showpc( $atts, $content = null ) { if(wp_is_mobile()) { return ''; } else { return '' . $content . ''; } } add_shortcode('showpc', 'showpc'); //モバイルのときだけ表示 function showsp( $atts, $content = null ) { if(wp_is_mobile()) { return '' . $content . ''; } else { return ''; } } add_shortcode('showsp', 'showsp'); |
上のコードを使えば、パソコンの時は広告が2つ表示されるし、モバイルなら一つだけしか表示されない。これでパソコンとスマホの広告表示をまったく別々にすることができるよ。
なるほどね！
おっと、ここで一つ注意！このソースコードは広告の表示だけで利用したほうがいいよ！もしコンテンツにこのコードを適用したら、パソコンとスマホでは記事の内容を変えることが出来るよね。でもこの場合、Googleから悪い評価を受けることもあるんだ。
えー知らなかった～。うん、気を付けるわ！
「function.php」に上のコードを追加したら、共通コンテンツの広告コードを変更しよう。パソコンで横並びに2つ、広告コードが表示されるショートコードを作ったよね。そのコードに下のコードを追加してみて。これでパソコンとスマホの広告を切り替えて表示できるよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p class="ad-box-label">[スポンサードリンク]</p> [showsp] <div class="ad-box-sp"> 広告コードを記述（モバイル用） </div> [/showsp] [showpc] <div class="ad-box-wrap"> <div class="ad-box-left"> 左に表示する広告コードを記述（PC用） </div> <div class="ad-box-right"> 左に表示する広告コードを記述（PC用） </div> </div> [/showpc] |
ここまで完了したら、パソコンとスマホで広告表示を確認しよう！
賢威でデバイス別に表示具合を確認する
アドセンス広告は表示されないけれど、賢威ならデバイス別に画面表示の確認ができるんだ。まずは管理画面の「外観」から「メニュー」をクリックする。
「ライブプレビューで管理」をクリック
画面の下の方にパソコンとタブレット、それからスマホのアイコンがあるからクリックする。
パソコンの表示はこれ！
タブレットはこう！
スマホならこれ！
賢威って、便利ね。
画面表示を確認するための便利なツール
うんそうだね。
これでも十分使えるけれど、もっと詳しくたとえばブラウザやデバイスを指定して表示具合を確認するなら、Screenflyとmattkersley.comを使っていこう。Screenflyやmattkersley.comなら機種別で表示がわかるし、browserling.comならブラウザ別で表示具合が確認できるよ。
デスクトップ、タブレット、モバイルから表示したい機種をクリック
mattkersley.comならこんな感じ！
ブラウザによってデザインが崩れていることもあるよね。ブライザ別の確認ならbrowserling.comがおすすめかな。それぞれのブラウザでの表示環境がわかるし、使いやすいと思う。
了解！これなら確認が簡単ね。