ここ最近STINGER7を使用しております
まえまではSTINGER3を使用していたのですが(そもそも更新されてるかもの知らなかった)、機能が大幅向上しており使い勝手がいいのでSTINGER7にしています
さて、冒頭で話していた通りSTINGER3を使ってモバイルバナー広告を使用していたのですが、STINGER7ではコードなど一部違ったり、条件分岐の記載の仕方が違っていたのでSTINGER7でのヘッダー付近にモバイルバナー広告の貼り方のやり方を紹介したいと思う
ヘッダー下にモバイルバナー広告を設置
モバイルバナー広告はあまりクリックされないんですが、しっくり来るのでわしは採用しています
スマホで記事閲覧していてもPC閲覧みたくサイドバーがなく下のほうにあるのでユーザーはあまり見ないと思います(わしがそうです)
なのでモバイルバナー広告がしっくり来ると感じております
※話はGoogle AdSenseで進めていきます
STINGER7の親テーマには直接コードを打たないで、STINGER7の子テーマにコードを打ちます
それに伴い、親テーマから子テーマにファイルである｢header.php｣をコピーします
スマホ用広告なので、スマホ閲覧時のみモバイルバナー広告を表示させるように条件分岐させます
※バックアップ推奨
条件分岐をさせるということなので以下のショートコードをコピーする
<?php if(st_is_mobile()) { ?>
ここにAdSenseコードを貼り付ける
<?php } else { ?>
<?php } ?>
ほかのテーマではわかりませんが
一般で使われているコードは
・｢<?php if(is_mobile()) { ?>｣
STINGER7では
・｢<?php if(st_is_mobile()) { ?>｣
※STINGER6でもこのコード
違いは｢st_｣が付いてるか付いていないかです
header.phpにモバイルバナーのコードを貼り付ける
テーマ編集からSTINGER7の子テーマのheader.phpに行きコードを貼り付けていきます
一番したに</header>があるのでその直前に先ほどコピーしたショートコードを使います
<?php if(st_is_mobile()) { ?>
<div class="hoge">
ここにAdSenseコード
</div>
<?php } else { ?>
<?php } ?>
こんな感じ
モバイルバナーは２種類あって
- モバイルバナー
- ラージモバイルバナー
の2種類あります
iPhone5S以下だと広告がはみでるのでCSSで幅修正する
画面が大きい｢iPhone6～6Splus｣だとモバイルバナーは、はみ出ませんが「iPhone5S」だと画面が小さくはみ出ちゃいます
そこで「CSS」で調整してあげます
.hoge {
position: relative;
left: -10px;
width: 320px;
}
まとめ
モバイルバナーはクリック率こそ少ないが記事閲覧時に最初に目が入るのでいいかと思います
