TSUCKY BLOG Written by ツッキー(Tsucky)

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

Manablog Copy

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

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

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

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

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

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

Adsense-sticks-out

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

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

※まだ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');
source-code

マナブさんの記事で紹介されていたソースコードに加えて、以下のソースコードを追記しています。

4行目:<div style="padding-right:80px;margin-top:50px;margin-bottom:50px;">
9行目:</div>

【ここにアドセンスコードを貼り付けます】の部分に自分のアドセンスのソースコードを貼り付ければ、完成です。

Googleアドセンス挿入の完成イメージ

Googleアドセンス挿入後のイメージ

H2見出しの上部にアドセンス広告が表示されていて、横にはみ出してないですね。

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

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

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

期間限定①Amazonのコンテンツギフトで文章力レベルアップ【音声は神】

人気記事①資産を爆増させる米国株投資ブログ【始め方・稼ぎ方まで徹底解説】

人気記事②Manablog Copyにテーマ切替を決意できた理由【購入手順付き】