A2-blog

【アドセンス】インフィード広告のレイアウト崩れを何とか克服！

Google アドセンスのインフィード広告というものを貼ってみました。インフィード広告とはサイトデザインを壊さないように貼り付けられる広告コードのことで記事一覧ページの間にさりげなく広告を表示することが出来ます。止めてなければトップページで実物を確認できると思います。

レイアウト崩れを解消

広告の設置自体はAdsenseで広告コードのレイアウトやデザイン設定して生成されたコードをサイトに貼り付けるだけなんですが、ワードプレスの記事一覧ページ(index.php)の場合はPHPのループ処理で作られているのでちょっと厄介です。

ただ厄介と言っても参考サイトも複数あったので基本的には設置できたんですが、記事間のボーダーラインが抜けたりしてどうしてもレイアウトが崩れてしまうんですよね。下図は「hitfilm…?」でテストした時にキャプチャしたものです。

スキル不足と言えばそれまでなんですがさりげなく表示される広告がレイアウト崩れを起こしてしまって本末転倒な感じだったので一時は断念していたんですが完全に我流なんですがなんとかちゃんと設置できたのでメモしておきます。

<?php get_header(); ?>
<div id="primary" class="content-area col-md-8">
	<main id="main" class="site-main" role="main">
		<?php
			$ads_infeed = array(5,10,15);
			$ads_infeed_count = '1';
		?>
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<?php
			$ads_disp = in_array($ads_infeed_count, $ads_infeed);
			if($ads_disp){
		?>
		<div class="infeed-ads">
                  ～ 広告コードを貼る ～
		</div>
		<p class="clear"></p>
		<?php
		}
		$ads_infeed_count++;
		?>
		<div class="indexBox">
			～ 中略 ～
		</div>
		<?php endwhile; else : ?>
	      <div class="post">
	      <p>該当する記事はありません。</p>
	      </div>
		<?php endif; ?>
	</main>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

青・・ワードプレスでループ処理する独自コード
赤・・インフィード広告を特定の間隔で表示するためのコード

div(indexBox)が記事の見出しを表示するコードなんですが、ポイントは広告コードをdiv(infeed-ads)タグで囲んでdiv(indexBox)のCSSと同じように設定し、さらに広告コードの下に回り込み(clear: both)を禁止するCSSを記述することでレイアウト崩れを解消しました。尚、コードの詳細は参考ページを見て下さい。

参考ページ: 【複数OK】STORK（WordPressテーマ）でインフィード広告を表示する方法

Tweet