広告のコードを取得し、記事内に貼り付けるところまでは書きました。
・有効な貼り付け方はどこにどうするのがいいのか
・実際に貼り付ける方法は？
というのを今回やっていきます。
初心者向けの内容になっています。
広告の設置に関しては、可能な限り「HTML？CSS？なんのこっちゃ？」という人にも分
かるようにするつもりです。
このページの方法は
KaKuKaKuさん、あかりさんの方法を合わせて参考にさせていただいています。
ありがとうございます。
効果的な広告の配置方法
広告はどこに配置すれば読者の方の目に留まりやすいのか？
その事に関しては偉大な先人達が公開してくれていますので、情報を集めてみた結果、
・サイドバーの一番上
・記事内
・記事終わり
・記事の頭（諸説あり）
以上が配置場所として有効なようです。
サイズは小さいものより大きなものがいいとのこと。
サイドバーと記事の頭に関しては非常に目に留まりやすい、ただ記事の上にあると不快に
感じてしまう人もいるので一概には言えない、という具合です。
確かに記事を読もうとして一番上が広告から始まったら自分ならクリックしたりはしない
かな…と感じます。
見た方が不快に感じてしまうなら広告の効果も薄れてしまいますよね。
そんな中、記事の中に２つ広告を並べるのがいいという話を聞きました。
レスポンシブ広告を２つ並べるダブルレクタングルという手法です。
確かに不快感は薄くサラッと目に入るし、見た目にもバランスがいいですよね。
そんな訳でさっそく実際に設置してみました。
|
|
|
ダブルレクタングル広告の作り方と貼り付け方
実際に貼り付けると上の見出し上部のような感じに出来上がります。
（ちゃんと出てますかね？２つ出るのはPCのみです）
１.まずはアドセンスから広告コードを２つ作りコピーする
広告サイズは二つともレスポンシブです。
コードを作成したら、とりあえずメモ帳あたりにコピペしておくのを推奨します。
広告コードの取得方法は以下の記事を参考にしてください。
２.コードを改変する
注・レスポンシブ広告は、公式でこの改変方法が許されている唯一の広告です。
レスポンシブは、時に広告のサイズが変わってしまいます。
サイズが変わっては２つ並ばなくなりますので、それを無くすためサイズを固定します。
２つとも変更します。
・「style='display:block'」の部分を
「style='display:block;width: 300px;height: 250px;'」に改変
・「data-ad-format="auto"」を削除
・「async」が「async='async'」にちゃんと変更されているかも注意してください
変更前サンプルコード
変更後サンプルコード
広告コードを２つとも上のように変更します。
一行目のスクリプトは１つあればいいので２つ目以降は軽量化のため削除します。
（しなくても大丈夫です）
片方をスマホで非表示にするためにコードを改変
※モバイル端末でのアドセンス規約では、
・１画面に２個以上の広告
・ページを開いた時の画面にある広告
以上の広告設置を禁じていますので、これを避けるためです。
この章には関係ありませんが
・モバイル端末の画面いっぱいに広告を表示するというのも規約で禁止です。念のため。
よって、どちらか片方のユニットのコードだけを変えます。
・「ins class='adsbygoogle'」を「ins class='adsbygoogle adslot_1'」に改変
・「style='display:block;width: 300px;height: 250px;'」を
「style='width: 300px;height: 250px;'」に改変（最初に改変した部分）
以上までで、２つのユニットのコードは以下のようになっているはずです。
一応「なぜ改変するのか」を分かりやすくしたつもりです。
３.テーブルタグに組み込む
完成したコードを、以下のテーブルタグに挿入してください。
テーブルタグをまずコピペし、【左の広告】【右の広告】というところにそれぞれ広告コ
ードをコピペします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table width="100%"><tr><td colspan="2"> <center><b>スポンサーリンク</b></center> </td> </tr><tr><td align="left" valign="top">【左の広告】 </td><td align="right" valign="top">【右の広告】 </td> </tr></table> |
完成サンプルはこちらです。
「スポンサーリンク」のところは「広告」でも可です。
４.HTMLを編集する
まずはスマホ表示対応にします。
「テーマ」→「HTMLの編集」を選択し、「Ctrl+Fキー」で検索窓を開きます。
「]]></b:skin>」と検索しそれより上に
1 2 | .adslot_1 { display:inline-block; }@media (max-width: 768px) { .adslot_1 { display: none; } } |
をコピペしてください。
最後にいよいよ広告の貼り付けです。
※ここからVaster2テンプレートでの話です。
同じHTMLの検索窓から「アドセンス」と検索すると貼り付けるための分かりやすい場所
が出てきます。
ここで「この真下にアドセンスを挿入 記事中」というところの下に、先程テーブルタグ
に組み込んだコードをコピペし「テーマの保存」をして完成です！
５.注釈
コードを入れて確認してみると、現状では
「記事中のところに入れたはずなのに記事の下に広告が出る…」
とおそらくなるのではないかと思います。
そうなりましたら、それぞれの記事のHTML編集で
<!--more-->
を任意の場所に入れて下さい。moreタグと呼ばれるものです。
よく使うことになるので覚えておきましょう。
タグを入れる具体的な場所は記事の真ん中の段落前あたりがいいでしょう。
これで記事内にダブルレクタングルが完成していると思います。
PC、スマホ両方で問題が無いか確認しましょう。
出来上がってすぐ確認すると片方の広告が空白になっていて不安になるかもしれません
が、そんな時は少し時間をおいて再度確認してみて下さい。
最後までお読みくださった方、無事に出来たでしょうか。
長々とお付き合いくださり、どうもありがとうございました。
初心者の方は特に大変だったと思います。
お疲れ様でした。
