レスポンシブルユニットを使って複数のAdsenseを設置(WordPressのTwentyThirteenにて)
(※大事な部分が間違ってたので一部修正)
Adsenseの広告ユニットから「コードを取得」して貼り付けても、そのままじゃ自分の思う広告の大きさになっていなと思うので○○pxの部分を変更する。ここが前述のAdsenseで登録した広告ユニット(バナーなど)の大きさ。
最初に書いたとおり「my_adslot」部分も3種類にする。肝心なのは前述の広告IDが重複しないこと。3種類の広告IDにはそれぞれ異なった「my_adslot」が存在すること。
修正する部分をまとめたのが下図。コードを取得した時点の図を使ったけど、普通は貼り付けてから修正でしょね。
※他の部分のコードは書き換えないこと! これやっちゃったら多分アウト。
「min-width: 500px」と「min-width: 800px」部分は微妙。これは画面幅の切替境界だと思うんだけど、変えていいのやら悪いのやら分からないのでそっとしておくことにしよう。
アチキは以下のようにしてWordPressのテキストウイジェットなどに記述した。コードの前後は省略。
1,メインコンテンツエリア下。AdManプラグインに記述した。
(my_adslot1 にすればよかったが面倒くさいのでやめた)
.my_adslot { width: 200px; height: 200px; }
@media(min-width: 500px) { .my_adslot { width: 300px; height: 250px; } }
@media(min-width: 800px) { .my_adslot { width: 336px; height: 280px; } }
~略~
ins class=”adsbygoogle my_adslot”
~略~
data-ad-slot=”xxxxxxxxx1” ←広告ID-1(例)
~略~
2,副ウイジェットエリア
.my_adslot2 { width: 234px; height: 60px; }
@media(min-width: 500px) { .my_adslot2 { width: 250px; height: 250px; } }
@media(min-width: 800px) { .my_adslot2 { width: 250px; height: 250px; } }
~略~
ins class=”adsbygoogle my_adslot2”
~略~
data-ad-slot=”xxxxxxxxx2” ←広告ID-2(例)
~略~
3,メインウイジェットエリア
.my_adslot3 { width: 234px; height: 60px; }
@media(min-width: 500px) { .my_adslot3 { width: 120px; height: 600px; } }
@media(min-width: 800px) { .my_adslot3 { width: 160px; height: 600px; } }
~略~
ins class=”adsbygoogle my_adslot3”
~略~
data-ad-slot=”xxxxxxxxx3” ←広告ID-3(例)
~略~
広告の大きさも悩む部分。アチキは未だ進行形で、上記から更に理想に近い大きさの配置が無いか試している状態。
パソコンはWordPressのエリア内でデッカイ広告でいいと思う。問題はスマートフォン。どうしても小さくなりがち。
それにAdsenseのポリシーに違反してないかも確かめなくてはならない。スマートフォンではコンテンツを押し下げるような広告の配置は駄目だし、1ビュー(表示している1面)に2つの広告が表示されたらダメ。
最後に、記事下の広告はadmanプラグインを使った。
インストール後、WordPress→ダッシュボード→設定→adManでコードを貼る場所を選択できる。
「記事上」、「記事中」をやってみたが、とりあえず記事下に決めた。
このプラグインを使った理由は、記事中に何かのおまじないをかかなくていいこと。書いてもO.K. (追記:他にもアドセンス関係のプラグインで同様なものがたくさんありますね…)
もし記事中に何かのコードを書かないといけないとなると…過去の記事を修正するのが大変! それに使わなくなった時も修正が出てくる。アチキはなるべく簡単な方法がいい。
以上の内容でパソコンでもタブレットでもスマートフォンでも、それぞれに応じた広告が設置できたと思う。ま、アチキのセンス云々は置いといて、皆さん工夫して最適な表示をみつけてください。
アチキはやっと広告の貼り方を決めた状態。まだまだこれから。頑張るかもしれないがそうでもないかもしれないw
おしまい。