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

WordPress

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

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

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

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

表示イメージはこんな感じ

20140216_064120000_iOS_

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

ヘッダー(header.php)を編集する

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の値を変更すると、左右の位置を調整できます。

コメント

タイトルとURLをコピーしました