【Manablog Copy】アドセンスをH2見出し上に「はみ出さない」ように設置する方法

Manablog Copyを使うブロガー「マナブさんの記事通りにH2見出しの上にアドセンスの設置やったつもりが、アドセンスがはみ出ている。はみ出さないようにするにはどうすればいいの?」
このような悩みに答えます。
こんにちは、ツッキーです。
Manablogの以下の記事では、GoogleアドセンスをH2見出し上に表示するソースコードが公開されています。
関連記事WordPressで記事中にアドセンスを自動挿入する方法【ツール不要】
ただ、このソースコードを記事通りに貼っても、以下のように画面の横にはみ出してしまうので、困っていました。

同じように困っているブロガー向けに、この記事では、「はみ出さない」ソースコードに書き換えたものを公開します。
それではよろしくお願いします。
※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。
Manablogcopy(マナブログコピー)にテーマ切替を決意できた理由【購入手順付き】
僕はこれまで使っていた無料テーマCocoonからマナブログコピー(Manablog Copy)へのテーマの移行を決意しました。その記事ではこれまで有料テーマの購入を躊躇していたツッキーがマナブログコピーの購入を決意できた理由を記します。有料テーマにしようか迷っている・検討している方の参考になれば最高だなぁ
この記事を読んでわかること
- 画面からはみ出さないようにアドセンス広告を設置する方法
記事の内容
アドセンスをH2見出し上に「はみ出さない」ように設置する方法
アドセンスを設置する手順は次の通りです。
外観→テーマエディタ→functions.php
- ソースコードをコピペ
- 一部自分のアドセンスのソースコードを置き換える
H2タグ上にGoogleアドセンスを表示するには、functions.php
を編集します。
functions.php
に行くには、外観→テーマエディタ→functions.php
の順で操作すればいきましょう。
そのfunctions.php
に移動後に、一番下に以下のソースコードを貼り付けます。
// 本文中にアドセンス表示
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<div style="padding-right:80px;margin-top:50px;margin-bottom:50px;">
<p style="margin-bottom: 10px">スポンサーリンク</p>
【ここにアドセンスコードを貼り付けます】
</div>
<div style="clear:both"></div>
EOF;
$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {
if ( $h2s[0] ) {
// 1つ目のh2見出しの上にアドセンス挿入
if ( $h2s[0][0] ) {
$the_content = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
}
}
}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

マナブさんの記事で紹介されていたソースコードに加えて、以下のソースコードを追記しています。
4行目:<div style="padding-right:80px;margin-top:50px;margin-bottom:50px;">
9行目:</div>
【ここにアドセンスコードを貼り付けます】の部分に自分のアドセンスのソースコードを貼り付ければ、完成です。
Googleアドセンス挿入の完成イメージ

H2見出しの上部にアドセンス広告が表示されていて、横にはみ出してないですね。
ということで、今回の記事は以上です。
今回の記事がManablog Copyを使っているブロガーの参考になれば、嬉しいです。
コメントや質問がある場合はツイッターでメッセージを頂くか、問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。