[STINGER8]記事内の広告クリック率を上げるためのデザイン変更方法

演劇感想文リンクのサイトのページのデザインを見直しています。アクセス数の伸びがイマイチで、1pvあたりのAdsenseが稼いでくれる金額が少ないことから、抜本的にデザインを変えてみることにしました。
STINGER8は、カスタマイズし易いということで、気楽に始めたのですが、思った以上に手間がかかったので一旦記事にして残します。

きっかけは新感線の髑髏城の七人

実は、８月はこのブログ（https://blog.kansolink.com/)が、普段の倍くらいのアクセスが集まりました。以下の二つの記事（主に上の記事）が稼いでくれました。（特に、月のキャストが発表された日のアクセスがすごかった）

結果として、演劇感想文リンクの補完的な位置づけとして始めたこのブログですが、初めて演劇感想文リンクのアクセス数を超えました。 そんなこともあり、色々とアクセス数等だけでなく色々気づくことがありました。特に、気になったのはAdsenseの収益率でした。

1pv=0.１円は、少ない？

かつて読んでいたイケダハヤトさんの本を改めて読んでみると僕のサイトのAdsenseの効率はイマイチの模様。

イケダハヤトさんの本によれば、PVと収入の関係は以下の通りです。

１万PV	〜1,000円
5万PV	3000円〜10,000円
10万PV	10,000円〜50,000円
20万PV	50,000円〜100,000円
30万PV	100,000円〜150,000円
40万PV	150,000円〜200,000円
50万PV	200,000円〜250,000円

イケダハヤトさんの書籍の上記の数字は、あくまでもAdsenseだけでなく、アフィリエイト等他の収入手段も含めての数字とのことですが、それでも1PV=0.3円〜0.5円の価値があるというのがイケダハヤトさんの標準。

僕のブログの場合は、アクセス数は上記の数字に比べると本当に微々たるものですが、1PV=0.1円程度がやっと（それを少し下回ります）

今回、blogの方のアクセス数が伸びた事もそうですが、その伸び率以上にAdsenseの収益率が伸びました。blogと較べて、演劇感想文リンクの方が同じアクセス数に対してAdsenseのクリック率が低いという事にようやく気づきました。

今までは、アクセス数が伸びるように色々手を加えてきたのですが、これを機会に少し演劇感想文リンクの画面デザインを動かして見ようと考えました。

記事下のadsenseと記事内のadsenseの入れ替え

このページのデザインと、演劇感想文リンクのページデザインの違いは、演劇感想文リンクの方は、記事中にレクタングル（四角）のアドセンスが表示されていないことです。

元々のSTINGER8の設計に従うと、記事下にPCだと二つ、スマホだと一つのレクタングルが表示される仕様になっています。

ただ、広告ユニット別のクリック率を見ると、この記事下の広告の効果はあまり高くありません。そこで、この記事下の広告をそのまま、記事中に持っていこうと考えました。（短絡的ですが）

現在のページイメージは以下のとおりです。（尚、STINGER８のそもそもの設定では、シェアボタンの類は、記事下にしかなかったのですがこれも、記事のタイトル下すぐに表示されるようにしています。）

その上で、本来下にあったadsenseをその直下におきました。同じものが記事下にあるとそれはそれでうざいと思うので、下はテキストのみの軽いadsenseに変更しました。

修正したStinger8のテーマファイル

なんとか実現をしたものの、あちらこちらにインパクトが発生しました。結果として結構、テーマの中のかなり色々なテンプレートをいじりました。

投稿記事内の広告表示(function.phpの修正)

もともと、記事の題名（演劇感想文リンクの場合、公演題名だったり、劇団名だったり、人の名前だったりしますが）の直下に広告を表示する為に、以下のようなショートコードを挿入していました。

この［ad_under_title]にあたるショートコードの中身を以下のように変えました。

/**記事内のadsense**/
function show_ad_under_title(){
	get_template_part( 'st-ad-on' ); //広告
	return '<div class="clearfix"></div>';
}
add_shortcode('ad_under_title','show_ad_under_title');

この中の「get_template_part( ‘st-ad-on’ ); //広告」という行は、元々下記single.phpの中で、記事下になるように記載されていたコードをそのままコピーしました。
CSSで2個並べるために、レクタングルに対しては、floatを設定したため、clearfixをその後返すようにしています。

single.php(投稿記事）テンプレートの修正

記事下のレクタングルを削除。リンク広告のみの広告に入れ替え

本文下に広告が入っていたのを入れ替えました。

					<div class="mainbox">
							<div class="entry-content">
								<?php the_content(); //本文 ?>
							</div>
						<?php get_template_part( 'st-ad-on' ); //広告 ?>

これを以下のように修正（本文後の広告欄を削除）

							<div class="entry-content">
								<?php the_content(); //本文 ?>
							</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- kansolink_under_title --><ins class="adsbygoogle" style="display:block" data-ad-client="XXX" data-ad-slot="XXX" data-ad-format="link"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';

本文後の広告欄を削除して、adsenseのコードをそのまま書き込みました。（広告コード等はXXXに変えてます）

ところが、これだけではsingle.phpの修正は終わりませんでした。記事下に表示される関連記事の中に、記事中にいれたadsenseが表示されてしまい、かなり画面が崩れてしまいました。

他にも方法があったかもしれませんが、演劇感想文リンクにおいては、この関連記事表示のロジックがイマイチページの目的とフィットしていないこともあり、思い切って、関連記事の表示を「なし」にすることにしました。

以下が、削除の為、コメントアウトした行です。

						<!--関連記事-->
						<?php //get_template_part( 'kanren' ); ?>

search.phpの作り直し

検索結果の表示についても、やはりadsenseが表示されてしまいイマイチでした。上記の個別記事の修正までは想定していたのですが、この検索結果のPHPまで修正することまで想定していませんでした。

検索結果をページタイトルとリンクの表示に変更

参考にしたサイトは、以下のサイトです。

これを元にしつつ、元々のsearch.phpを元にして、最終的に以下のようなsearch.phpを作りました。

<?php get_header(); ?>

<div id="content" class="clearfix">
    <div id="contentInner">
        <div class="st-main">
            <article>

<h2><?php the_search_query(); ?>の検索結果 : <?php echo $wp_query->found_posts; ?>件</h2>
<!-- 投稿情報 loop -->
<?php if(have_posts()) : ?>
    <?php while(have_posts()):the_post() ?> 
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <div class="post"> 
            <?php if (has_post_thumbnail()) : ?>
                <p class="postThumbnail"><?php //the_post_thumbnail(); ?></p>
            <?php endif; ?>
            <!--<p><?php //the_content('詳細はこちら'); ?></p>-->
			<p>
				<?php $sum_value = get_post_meta( get_the_ID(), 'summary', true );
				// カスタムフィールドが値を持つかチェック
				if ( ! empty( $sum_value ) ) {
  					echo $sum_value;
				} ?> 			
			</p>
        </div><!-- /post -->
    <?php endwhile; ?>
<?php else: ?>
    <div class="post">
        <p>申し訳ございません。<br />該当する記事がございません。</p>
    </div>
<?php endif; ?>

					<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>

            </article>
        </div>
    </div>
    <!-- /#contentInner -->
    <?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

the_title(),the_parmalink()を利用することで、簡単にリンクを作成することができました。

メタキーワードで表示

タイトルだけだとあまりにもそっけないので、公演の情報を表示することにしました。記事の内容（contents)を表示しようとすると、adsense部分も表示してしまうので、カスタムフィールドを呼び出すことにしました。

			<p>
				<?php $sum_value = get_post_meta( get_the_ID(), 'summary', true );
				// カスタムフィールドが値を持つかチェック
				if ( ! empty( $sum_value ) ) {
  					echo $sum_value;
				} ?> 			
			</p>

この結果、収益がどうなったのか？　1週間ほど様子を見て報告したいと思います。（なんか、予想と違う結果になりそうな感じです。いまのところ）