コラム

stinger7の記事下アドセンスをダブルレクタングルにカスタマイズしてみた!

2016年3月12日

記事内に広告を含みます

stinger7

たまにはブログのカスタマイズについて語ってみようかなという突発的な記事です。

現在、僕が使っているwordpressのテーマはstinger7。僕はブログを始めた時から、ずっとテーマはstingerを使い続けてきました。そのstingerはどんどん進化し、最新版は7。7からは横幅がさらに広がり、カスタマイズすればPCから見た際に記事下の広告をダブルレクタングルにすることが可能になりました。

そんなわけで、少しは需要があるかなと思い、メモ代わりに残しておきます。

stinger7の記事下広告をダブルレクタングルにしたよ!

編集するファイルは下記の3つ。

  • single.php
  • sidebar.php
  • style.css

※必ず事前にバックアップを取っておいてください。

※変更は必ず子テーマでやるようにしてください。

single.phpのカスタマイズ

まずは、single.phpの以下の部分を探します。

<aside>
<div style="padding:20px 0px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<div class="smanone" style="padding-top:10px;">
<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:10px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php } ?>
</div>

この部分を下記に置き換え。

<aside>
<div style="padding:20px 0px;">
<div class="adsingle">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<div class="smanone" style="padding-top:10px; text-align:center;">
<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div>
<?php } else { //PCの場合 ?>
<div class="smanone" style="text-align:center; float:right;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php } ?>
</div>
<div class="clear"></div> 

PC用の表記ではアドセンスが並んだ時に段差が出来ないように余白(padding-top)の表記を削除しました。また、スマホ表示でアドセンスを中央寄せに変更しました。

sidebar.php

sidebar.phpで以下の部分を探します。

<div class="ad">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : //アドセンス ?>
<?php endif; ?>
</div> 

こちらを下記に。

 <div class="adside">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : //アドセンス ?>
<?php endif; ?>
</div>

sidebar.phpはクラス名を変更しただけです。

style.cssに追記

子テーマのstyle.cssに以下のコードを追記して、見た目を整えます。

/* アドセンスをダブルレクタングルに */

.adside {
text-align: center;
padding-bottom: 10px;
margin: 0px;
}

.adsingle {
float: left;
text-align: center;
padding-bottom: 10px;
margin: 0px;
}

@media only screen and (max-width: 780px) {
.adsingle {
float: none;
text-align: center;
padding-bottom: 10px;
margin: 0px;
}

これで綺麗に横に並んでくれます。

まとめ

成功すれば、僕のブログのようにアドセンスがダブルレクタングルに並ぶと思います。stinger7でダブルレクタングルにしたいって人がもしかしたら多いかなと思って、今回記事にしてみました。良かったら参考にしてください。

関連記事

  • この記事を書いた人

ささのは

風景やポートレートを撮っています。
詳しいプロフィールはこちら。

-コラム
-,