アドセンス広告を利用している方におすすめなのが、パソコンなら横並びで2つ、スマホならレスポンシブの広告でひとつだけ表示する方法です。
パソコンの場合は横幅が十分にあるので、二つ並べても大きく表示することができます。それに広告を2つ設置したほうが、一つだけ表示されているときに比べクリック率が高いです。
しかし、横並びのソースコードがそのままスマホに反映された場合は、広告が縦にふたつ表示されます。なのでコンテンツが目立ちにくく、ユーザーにとって使いにくいです。
(注)以前は上の説明のとおりの表示だったのですが、2018年8月にはこの記事で紹介している設定にすると、スマホの場合でも広告が横に2つ並んで表示されるようになりました。
今回は、賢威テンプレートにパソコンでは横並びで二つ、スマホならレスポンシブの広告をひとつだけ表示させる方法を紹介します。どちらも2つ表示されます。
このページの目次
アドセンスの広告を横並びで表示するときに注意すること
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
パソコンに表示させるなら、レスポンシブの広告を2つ、テキストとイメージの両方が表示されるように設定すると効果的だよ。広告の中には、テキストしかないものやイメージだけのものがあるんだ。テキストだけとかイメージだけに限定した場合、最適な広告が表示されない可能性があるからね。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/14ce4a0e24532b2ad754cb24ad60436a.png)
そうか!
どちらも選んだ方が、広告表示のチャンスが増えるのね!他にも気を付けなくてはならないことってあるの?
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/2a340f0d1d780970f7aac725b0d53327.png)
広告を2つ並べて表示するなら、右と左に別々の広告ユニットを設置したほうがいいよね。これなら、異なる2つの広告が表示される可能性が高くなるからクリック率も上がると思う。あとはひとつの記事にいくつかの広告を設置する場合は、広告コードをいくつか用意する。そうすれば、同じ広告表示を防ぐことになるはずだよ。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/fe04dc47e4794d5262bbf50143921ea6.png)
ブログの訪問者には、いろいろ見てもらったほうが、いいってことね!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/b51eaa24e992c28bba56293ba61aa0c1.png)
その通り!ユーザーにとって最適化された広告が表示されるけど、実際にどんな広告に興味があるのか推測できないこともあるだろうし、選択肢は多い方がいいんじゃないかな!
レスポンシブの広告を横に2つ表示しよう
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/a6cff8a290a0362d6fce9c9950977f6e.png)
スマホの場合は、縦に2つ並んでしまうけど、まずはパソコンで横に2つ表示されるように設定してみよう。ところで広告ユニットの準備は出来てる?これからってことなら、下の記事で紹介しているよ。ただアドセンスは、使いやすいように進化しているから、今はもっと簡単に作ることができるんだ。
⇒googleアドセンス広告の貼り方|広告ユニットを作成する方法
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
広告ユニットの用意が出来たら、賢威テンプレートの管理画面の「共通コンテンツ」から「新規追加」をクリックしよう。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
そこに下のコードを貼り付ける。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> |
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/0bada978ceeb736b122bfe5b62f66ae3.png)
次にデザインの調整をしよう。管理画面の「外観」から「テーマの編集」をクリックする。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
画面の右側にある「base.css」のファイルをクリックする。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/0bada978ceeb736b122bfe5b62f66ae3.png)
ファイルの一番下に、次のコードを追加していこう!
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; } } |
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
コードをコピペしたらファイルの更新をクリックして保存!
![ファイルを更新](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img,w_342,h_162/https://www.buzzclub.site/wp-content/uploads/2018/06/624c9794ebdca51c7b17cdacc676c25b-1.png)
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
ちなみに賢威テンプレートを使っているなら子テーマを使った方がいいよ。テーマが変更された場合は、カスタマイズした部分は消えてしまうんだ。親テーマは、再度カスタマイズしなくちゃいけない。でも、子テーマに書き込んだソースコードは、親テーマが変更されても受け継がれる。だから便利さ!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
子テーマの作り方は下の記事で確認できるよ。
⇒ワードプレス初心者向け賢威子テーマの作り方(エックスサーバー編)
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/a6cff8a290a0362d6fce9c9950977f6e.png)
ここまで設定したら、うまく表示されているかパソコン画面で確認してみよう。広告コードが反映されるまで、しばらく時間がかかることもあるけれど、間違っていなければ表示されるはずなんだ。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/f09f19774b046773bd4ba2ab75c0f602.png)
うん!うまくいったみたいね。
パソコンとモバイルで表示を変えていこう
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
ここまでの設定でスマホなら、縦に2つの広告が表示されていると思う。スマホは画面が小さいから、広告が続くとコンテンツの印象はうすくなるよね。だから、パソコンとスマホの広告は別々のほうが見やすいんじゃないかな。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/9194617671851bbd499a93efe4dfcc59.png)
ただ、アドセンス広告は指定されている方法を除いて広告ユニットを非表示にできない。これって禁止されているんだよね。だから「display:none」とか使えない…
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/451e9f0f51db403f71fcbe9f59db5f91.png)
ふうん知らなかった!だったらどうすればいいの?
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/d6bf9c9bd3555f36fff8fd9f6bf1b3c1.png)
一つはアドセンスの指定どおりの方法を利用すること。もう一つは、WordPress側でパソコンかモバイルかを判断するように表示を切り替える設定をすること。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/0bada978ceeb736b122bfe5b62f66ae3.png)
どちらの方法でも対処できるよ!もし、アドセンスが指定している広告の非表示設定を使うならadsenseヘルプの「広告ユニットを隠す」を見て欲しい。これとは別にWordPress側で切り替える場合は「function.php」に下のコードを追加していこう。
function.phpにショートコードを設定する
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/2a340f0d1d780970f7aac725b0d53327.png)
管理画面の「外観」から「テーマの編集」をクリックする。そこに、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'); |
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/0bada978ceeb736b122bfe5b62f66ae3.png)
上のコードを使えば、パソコンの時は広告が2つ表示されるし、モバイルなら一つだけしか表示されない。これでパソコンとスマホの広告表示をまったく別々にすることができるよ。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/b69b149ab51642e78c662f6754ffd0b4.png)
なるほどね!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
おっと、ここで一つ注意!このソースコードは広告の表示だけで利用したほうがいいよ!もしコンテンツにこのコードを適用したら、パソコンとスマホでは記事の内容を変えることが出来るよね。でもこの場合、Googleから悪い評価を受けることもあるんだ。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/451e9f0f51db403f71fcbe9f59db5f91.png)
えー知らなかった~。うん、気を付けるわ!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
「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] |
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/d6bf9c9bd3555f36fff8fd9f6bf1b3c1.png)
ここまで完了したら、パソコンとスマホで広告表示を確認しよう!
賢威でデバイス別に表示具合を確認する
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
アドセンス広告は表示されないけれど、賢威ならデバイス別に画面表示の確認ができるんだ。まずは管理画面の「外観」から「メニュー」をクリックする。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
「ライブプレビューで管理」をクリック
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/65a58e32e67184a5721a49f0cb8d11bf.png)
画面の下の方にパソコンとタブレット、それからスマホのアイコンがあるからクリックする。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
パソコンの表示はこれ!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/d6bf9c9bd3555f36fff8fd9f6bf1b3c1.png)
タブレットはこう!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
スマホならこれ!
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/bf353e96efc4a9aba20b041fd9deea8c.png)
賢威って、便利ね。
画面表示を確認するための便利なツール
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
うんそうだね。
これでも十分使えるけれど、もっと詳しくたとえばブラウザやデバイスを指定して表示具合を確認するなら、Screenflyとmattkersley.comを使っていこう。Screenflyやmattkersley.comなら機種別で表示がわかるし、browserling.comならブラウザ別で表示具合が確認できるよ。
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/65a58e32e67184a5721a49f0cb8d11bf.png)
デスクトップ、タブレット、モバイルから表示したい機種をクリック
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/f703ba1d2f080073f85680ca9469e317.png)
mattkersley.comならこんな感じ!
![ケント](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/47a521f685a67093b5070529b1ed1dd2.png)
ブラウザによってデザインが崩れていることもあるよね。ブライザ別の確認ならbrowserling.comがおすすめかな。それぞれのブラウザでの表示環境がわかるし、使いやすいと思う。
![カプリ](https://sp-ao.shortpixel.ai/client/q_glossy,ret_img/https://www.buzzclub.site/wp-content/uploads/2018/06/5d3bcbc1e8bbf7d9fc87cd1c1316007a.png)
了解!これなら確認が簡単ね。