WordPressテーマの「STINGER3」を利用して、色々とカスタマイズしています。
今回は、スマホ向けの画面に「320×50 – モバイル バナー」の広告を表示するカスタマイズを行いましたので、その方法をご紹介したいと思います。
モバイルバナーを追加しよう
表示イメージはこんな感じ
パンくずリストの上あたりに「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の値を変更すると、左右の位置を調整できます。
コメント