n2apps.jp

≪モバイル・ネット全般の話題から、ライフハック的な記事まで≫ 気が向いたときに、思うままに書いています。

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

      2014/07/10

モバイルバナー

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

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

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

SPONSORED LINK

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

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

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

 - WordPress , , , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

stinger3
WordPressテーマ「STINGER3」を導入してみた(いろいろテスト)

WordPressのテーマ「STINGER3」を導入してみました。 ということで …

n2apps.jp RSS
WordPressのRSS Feedに「アイキャッチ画像」を追加 & moreタグまでを表示する方法

WordPressのRSS feedは「全文を表示」と「抜粋のみを表示」から設定 …

stinger5
WordPressテーマを「STINGER3」から「STINGER5」に変更しました(カスタマイズ内容まとめ)

当サイト「n2apps.jp」のWordPressテーマを「STINGER5」に …

moreタグ
【WordPress】 moreタグの「続きを読む」が「(さらに…)」と表示される原因と対策

WordPressで運営している別のサイトで、記事の途中に moreタグ(&lt …

アイキャッチ画像を表示
【STINGER3】で、記事本文の上にアイキャッチ画像を表示する方法

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