ブログを収益化（マネタイズ）するため、AdSense（アドセンス）の設定をしています。
前回、事務所のホームページで AdSense のレスポンシブ広告をダブルレクタングル化してみました。
モバイル（記事の上） 
パソコン（サイドバーの上）
ついでに、モバイルでは記事の上に、パソコンではサイドバーの上に、最適なサイズのレスポンシブ広告が表示されるようにしてみました。
レスポンシブの広告ユニットの確認
レスポンシブの広告ユニットコードは以前、Google AdSense（グーグル・アドセンス）で、作成してありました。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 事務所－レスポンシブ広告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>この広告ユニットコードを AdSense からコピーしてきました。
レスポンシブの広告ユニットをサイドバーの上に
モバイル（記事の上） 
パソコン（サイドバーの上）
アップサイド（upsideクラスの asideタグ）をメイン（mainクラスの divタグ）の上に用意して、そこに AdSense の広告ユニットコードを入れ、モバイルとパソコンで表示位置を変えることにします。
レスポンシブの広告ユニットコードを、AdSense の「レスポンシブ広告コードを修正する方法」に従って、直していきました。
HTMLファイル
エディタで、AdSense の広告ユニットコードを、HTMLファイルに追加で貼り付けました。
<body>
～
<!-- .wrapper始まり -->
<div class="wrapper clearfix">
<!-- .upside始まり -->
<aside class="upside">
<!-- .sponsor始まり -->
<div class="sponsor">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 事務所－レスポンシブ広告 -->
<ins class="adsbygoogle adslot_top"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- .sponsor終わり -->
</aside>
<!-- .upside終わり -->
<!-- .main始まり -->
<div class="main">
～
</div>
<!-- .main終わり -->
<!-- .sidebar始まり -->
<aside class="sidebar">
～
</aside>
<!-- .sidebar終わり -->
～
</body>作業手順：
- エディタで、広告ユニットを表示させたい HTMLファイルを開く
- ラッパー（wrapperクラスの divタグ）の最初に、上位表示領域（upsideクラスの asideタグ）を作り、その中にレスポンシブの広告ユニットコードを、挿入で貼り付け
- 広告ユニットコードの insタグのクラス（class）に、追加で固有の名前「adslot_top」を指定
- 広告ユニットコードの insタグから「data-ad-format=”auto”」を削除（自動で広告サイズを決められないように）
- エディタで、広告ユニットコードを貼り付けた HTMLファイルを保存
なお、insタグのクラス（class）に追加する固有の名前は、英字で始まる任意の文字列ですが、使用できる文字は英数字とアンダースコア（”_”）のみだと、アドセンスで決められています。
CSSファイル
エディタで、AdSense広告のスタイルを CSSファイルに定義しました。
モバイルファーストでスタイルを定義しています。
先にモバイル用の設定をして、メディアクエリ（@media）の中でパソコン用の変更点の設定をしています。
@media screen and (min-width: 600px) {
.upside {
float: right;
width: 300px;
}
.main {
float: left;
width: 728px;
}
.sidebar {
float: right;
width: 300px;
}
}
.adslot_top {
height: 100px;
}
@media screen and (min-width: 600px) {
.adslot_top {
height: 600px;
}
}※マージンとパディングは、省略してあります。
定義内容：
- モバイル画面では、HTMLに書かれた順に縦に並べるだけなので、設定はなし
- パソコン画面では、上位表示領域（upsideクラス）を右に、メイン（mainクラス）を左に、サイドバー（sidebarクラス）を右に配置。なお、幅（width）は自分のサイトに合わせる
- モバイル画面の上の広告枠（adslot_topクラス）には、広告「320×100 ラージ モバイル バナー」が収まるサイズを指定
- パソコン画面の上の広告枠（adslot_topクラス）には、広告「300×600 ラージ スカイスクレーパー」が収まるサイズを指定
なお、外部CSSファイルの中で、広告コードのサイズを設定することは、正式には AdSense でサポートしていないそうです。
インターネットで公開
最後に、保存した HTMLファイルと CSSファイルをインターネットで公開しました。
モバイル（記事の上） パソコン（サイドバーの上）
しばらくして確認すると、モバイルでは広告「自動サイズ レスポンシブ」が表示され、パソコンでは広告「300×600 ラージ スカイスクレーパー」が表示されていました。
あとがき
これで一通り、事務所のホームページに、AdSense広告を設置できました。
ダブルレクタングルとサイドバーの上で、AdSense広告は 3つだけです。
ページの内容によっては、もっと AdSense広告の数を増やしてもいいそうなので、しばらくしたら広告を増やしてみたい思います。
たくさんの方が、訪れてくださるのをお待ちしております。
コメント