個別記事の中に広告を

投稿日：2014年9月18日更新日：2014年9月19日

たまにはこのサイトの作業をネタを書きます。このサイトはWordPressで稼動してますが、テーマはHuemanを使っています。STINGER3でも良いんですが、いまのところHuemanです。ユーザー数が少ないのでたまに同テーマの方から問い合わせが来たりします。
今日の記事はGoogle Adsenseに関してですが、当サイトは3カラムで左や右カラムにGoogle Adsenseを表示させる場合はウィジェットより箱を作りソースを貼り付けて箱を表示したいところへドラックでいけるのですが、本日の作業は個別記事の下部にGoogle Adsenseの広告を表示させたいと思います。
今回の広告のタイプはレスポンシブ広告ユニットと言う閲覧する人の画面のサイズに合わせて大きさを変えて表示させると言うのをはります。
主にiPhoneで320pxの広告をパソコンでそれ以上の横幅を表示させたいと思います。この可変する大きさはサイトのデザイン全体のイメージを損なわず綺麗に配置できたら素晴らしいのですが、そのためには少しソースをいじる必要があります。今日はそのあたりを忘れないように自分への忘却録もかねて。
まずGoogle Adsenseよりレスポンシブ広告を選びスマートサイズ（推奨）を。
次に個別記事のsingle.phpを開けます。
/www/○○/wp-content/themes/huemanの中にあります。○○はWordPressをインストールしたディレクトリ名
ここに先ほどのソースをはりますが、CSSをいじる為に何でもいいのでclass名を決めて挿入します。
[html autolinks="true"]
<div class="△△△">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4535533030942492[1]"
data-ad-slot="3613342161[2]"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
[/html]
[1][2]ご自身のアカウントの数字に変更してください。
この状態ではiPhoneで見るとこのテーマHuemanの空間（padding）がありますので、それを埋めます。
[html autolinks="true"]
@media screen and (min-width: 321px) {
.△△△ {
position: initial;
width: initial;
}
}

.△△△ {
position: relative;
left: -15px;
width: 320px;
margin: 0 0 20px 0;
text-align: center;
}
[/html]
これでiPhoneで綺麗に表示されます。
レスポンシブ広告はスマートサイズ（推奨）だとパソコンで見るとテキスト広告が多いです。アドバンス（コード変更が必要）を選んで468pxで表示させるとディスプレイ広告がでます。
text-align: center;
で468pxでも中央揃えになってますので空白も気になりません。
※全部の環境でクロスブラウザテストをしたわけではありません。表示が崩れる等あれば是非教えてくださいませ。
あっこの記事FTPできるユーザーでないといじれません。業者さんに作ってもらってWordPressを管理画面からでないとのぞけない権限しかもらってないユーザーの方はできませんのであしからず。