WordPressマナブログコピーでアドセンス設置・位置ずれ解決法

この記事の内容

こんにちは、ALuBaです。

この記事では、wordpressテーマの「マナブログコピー」でアドセンスの自動設置方法と広告がズレる問題の解決法を解説します。

まずは、完成図を紹介します。

このように全ての記事の下に広告を自動で設置できるようにします。
もちろん、レスポンシブ対応されているので、スマホ表示でも問題ありません。

ただ、普通にアドセンスのコードをコピペするだけだと、レイアウトが崩れます。
これの解決法も合わせて紹介します。

※ここから先の手順では、画面表示に必要なコードを直接編集するため、必ずバックアップを取ってください。

アドセンスの設置手順

1. 広告の埋め込みコードを取得

まずは、アドセンスのページから設置する広告を選択します。
広告の種類は、記事内広告を選択します。(ディスプレイ広告でも大丈夫です。)

記事内広告だと文字色や背景色が選択できるので、自身のページデザインに合わせやすいです。
細かい設定は、後から変更できるので、とりあえず広告ユニット名だけ入力して進みます。

埋め込むコードが表示されるので、全てコピーします。

取得したコードを埋め込む

wordpressの「外観 > テーマエディター」にある「個別投稿(single.php)」を開きます。

図の位置に、以下のコードを貼り付けます。コピーしたものをそのまま貼り付けても表示されますが、スポンサーリンク表記がないとダメなので、つけます。

これで、全ての記事の一番下に広告が自動表示されるようになりました。
ただ、これだけでは、広告の表示位置が、少し右にズレているはずです。

次にこれを修正します。

広告がズレる問題の解決法

style.cssを修正

ズレの原因は、テーマに用意されているstyle.cssが適応されているからです。
広告表示のタグに、<iframe>が使われていますが、これにmarginが設定されているため、このスタイルが適応されないように修正します。

「外観 > テーマエディター」にある「css > style.css」を開きます。

.single iframeで検索すると、2箇所ヒットするはずです。このスタイルが広告に適応されてしまっているため、適応されないようにします。

以下のコードを、画像の箇所に追加してください。
.single ins iframe{margin: 0;}@media only screen and (max-width: 479px){.single ins iframe{margin: 0;}}

これで、保存すれば、位置ずれは直ります。

※style.cssは本来修正することを想定していないので、自己責任でお願いします。
また、修正する場合もあとでどこを修正したかわからなくなるので、修正箇所をメモしておくことをオススメします。

ブラウザで再読み込みしてもズレが直っていない時は大体キャッシュのせいなので、キャッシュを削除して再読み込みしてください。
Macのchromeなら「shift + command + r」で再読み込みすれば大丈夫です。

キャッシュを消しても位置ズレが直らない場合は、cssの,.single iframe(,も消す) 2箇所を削除してください。
.single ins iframe~は追加しなくて大丈夫です。

まとめ

記事下に自動で広告が挿入されるようになりましたか？
手順通りやってもダメな時は、Twitter(@1lifengine)で質問していただければ、答えます。

普段は、IT関係や海外通販サイトで買えるサプリの紹介の記事を書いてます。
よければ、他の記事も見てみてください。