【STINGER3】で、スマホ向けに「320×50 – モバイルバナー」を表示する方法

WordPressテーマの「STINGER3」を利用して、色々とカスタマイズしています。

WordPressテーマのSTINGER3公式サイト

STINGERは、WordPressの初心者の方でも簡単にSEOに強く、アフィリエイトも出来るテンプレートです。

今回は、スマホ向けの画面に「320×50 – モバイルバナー」の広告を表示するカスタマイズを行いましたので、その方法をご紹介したいと思います。

モバイルバナーを追加しよう

パンくずリストの上あたりに「320×50 – モバイルバナー」を表示します。

WordPressの「外観」－「テーマ編集」から、「ヘッダー(header.php)」を選択して編集します。

<div id=”main”>の下あたりに、以下のコードを追加します。（赤文字の部分に、Googleアドセンスのコードを貼り付けます。）

<?php if(is_mobile()) { ?>
<!--mobile_ad-->
<div class="mobile_ad">

  ここの間にGoogleアドセンスのコードを貼り付けます。

</div>
<!--/mobile_ad-->
<?php 
}
?>

そのままだと、右にずれて表示されますので、スタイルシートを使って調整します。

WordPressの「外観」－「CSS編集」から「CSS スタイルシートエディター」を開き、下記のような記載を追加します。

.mobile_ad {
  margin-left: -10px;
  padding-bottom: 5px;
}

margin-leftの値を変更すると、左右の位置を調整できます。