2021/09/03 (更新日: 2021/09/04)

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

Manablog Copy

Manablog Copyを使うブロガー「マナブさんの記事通りにH2見出しの上にアドセンスの設置やったつもりが、アドセンスがはみ出ている。はみ出さないようにするにはどうすればいいの？」

このような悩みに答えます。

こんにちは、ツッキーです。

Manablogの以下の記事では、GoogleアドセンスをH2見出し上に表示するソースコードが公開されています。

関連記事WordPressで記事中にアドセンスを自動挿入する方法【ツール不要】

ただ、このソースコードを記事通りに貼っても、以下のように画面の横にはみ出してしまうので、困っていました。

同じように困っているブロガー向けに、この記事では、「はみ出さない」ソースコードに書き換えたものを公開します。

それではよろしくお願いします。

※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。

この記事を読んでわかること

画面からはみ出さないようにアドセンス広告を設置する方法

記事の内容

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

アドセンスを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見出しの上部にアドセンス広告が表示されていて、横にはみ出してないですね。

ということで、今回の記事は以上です。

今回の記事がＭanablog Copyを使っているブロガーの参考になれば、嬉しいです。

コメントや質問がある場合はツイッターでメッセージを頂くか、問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。

ブログ