STINGER3でアドセンスのPC版表示を横並びのレクタングルにする設定

公開日: : 最終更新日:2014/05/07 MEMO, WEB&SEO, WEB関連, WORDPRESS , , , , , ,

※注意:2014年4月現在、当ブログのアドセンス配置は必ずしもこの記事の内容と一致していませんが、同様にカスタマイズしたい方に参考になるかもしれないので、資料として当時の内容のまま残しておきます。

STINGER3(スティンガー)はデフォルト状態で、PC版のGoogleアドセンス広告を「サイドバー(1)」「本文下(1)」「関連記事下(1)」の3箇所に自動的に挿入してくれる仕様になっています。

ads_layout_001

今回は、これを「サイドバー(1)」「本文記事下(2)横並び(ダブルレクタングル)」に変更してみましたので、その際の作業メモをここに備忘録として記述しておきます(※STINGERのバージョンは ver20131023 になります)。

また、後述するようにスマホ版では「ヘッダ下(1)」「本文記事下(1)」「関連記事(1)」で作成しています。

ads_layout_002

はじめに(作業を始める前に)

作業を始める前に「GoogleAdSenseの規約・ポリシーの再確認」「最終完成形態の確認」を行っておきましょう。

アドセンスの規約を把握する

Google(グーグル)ではアドセンスの貼り付けに関して決まり(ポリシー、規約)を設けており、特にスマホでの表示はやや特殊なので注意が必要です。

注意すべき大きなポイントとしては以下のとおり(※これが全てではありません)。

  • 貼り付けられるアドセンス広告は、1ページに3つまで(※モバイルコンテンツ向け広告は1ページに1枚のみ)
  • スマホ版では、スクロールしなければ見えない位置にコンテンツを押しやるレイアウトはダメ(画面が広告で占領されてはいけない)
  • スマホ版では、ファーストビュー(サイト上部)部分に 300×250などの大きな広告ユニットを置いてはいけない。

最終完成形態を確認

上記のアドセンスのポリシー・規約とのからみを考えながら、以下のようにアドセンスを貼り付けることにしました。

PC版
・サイドバー上に200X200サイズ1枚
・記事下に300X300サイズを並べて2枚(ダブルレクタングル)

スマホ版
・ヘッダ下に320×50サイズ1枚
・本文記事下に300×200サイズ1枚
・関連記事下に300×200サイズ1枚

この記事ではPCでの表示時に、本文記事下に入る広告を横並び(ダブルレクタングル)にする方法を解説していますが、単純にこれをスマホで表示してしまうと、広告が縦に2個並んで画面を占領する形で表示されてしまい規約違反になってしまいます(※下は違反の例)。

ads_w_2

なので、スマホ版では、表示を切り替えて本文記事下のアドセンスを1個にして、関連記事下にもう1個を入れ込むことにしました。
また、STINGREデフォルトでは、スマホ版表示時は広告が2個しか挿入されないため、スマホ版ヘッダ下には小さなモバイル用バナー(320×50)を入れ込こむことにしました。

事前の準備

以下で具体的なアドセンスの貼り付け作業を紹介しておきますが、実際にアドセンスを貼り付ける前にやっておきたい事前作業があります。

アドセンスコードを取得する

まずは、貼り付けるアドセンス広告のタグを取得しましょう(GoogleAdSense公式サイトへ)。

わたくしは以下のように取得しました。

PC表示用
・サイドバー上用:200X200サイズ
・本文記事下(右)用:300X250サイズ(※1)
・本文記事下(左)用:300X250サイズ(※1)

スマホ版
・スマホヘッダ用:320×50サイズ
・本文記事下用:300×250サイズ(※1)
・関連記事下用:300×250サイズ(※1)

※1・・・300×250サイズは、同一のタグでも構いませんが、ユニット毎の成果を把握するために私は一応別々にタグを取得しました

サイトのレイアウト幅を調整する

STINGERデフォルト(初期状態)の、サイトの幅だとダブルレクタングル(横並び)表示にできないので、本文のカラムと、サイドバーのカラムの幅を変更する必要があります(本文記事部分の幅を広げて、サイドバー幅を狭くする)。

以下のページを参考にして、幅を変更してみてください。
記事内では本文記事部分を636px、サイドバー部分を250pxで設定しておりこの記事もそれに準じています。

実際にアドセンスを貼り付けてみる

それでは各貼り付け位置ごとに、注意点と貼り付け用タグを書いていきます。

サイドバー上広告(PC用)の設置

先述のようにPC用サイドバーはCSS調整後の幅に合うように200×200サイズのものを用意しました。
PC用サイドバーへのアドセンスの貼り付けに関しては、STINGERデフォルトのアドセンス貼り付けを利用しています。

「ウィジェット>Googleアドセンス用」に「テキスト」を入れ込み、取得したコードを貼り付けています。

ads_w_1

本文記事下の広告設置(スマホ用、PC用)

上述のように、本文記事下はPC用とスマホ用で表示を変えます。
PC用は300X250サイズを並べて2個(ダブルレクタングル)設置、スマホ用は300X250サイズを1個設置します。

「外観>テーマ編集」より「単一記事の投稿(single.php)」を開き、本文記事下部分(SNSボタンのタグの上)に、元のタグと差し替える形で、新規のアドセンス挿入タグを書き込みます。

stinger_ads001

新規タグは以下のとおり(※★で囲まれた部分を削除して、自分のコードを入れ込んでください)

PC用CSS(style.css)に追記

このままでは、まだPC用表示時に広告が横並びにならず、縦ならびになってしまいます。
なのでPC用CSS(style.css)に以下を追記します。

デフォルトでは、「単一記事の投稿(single.php)」内に、「本文記事下」「関連記事下」の2箇所、アドセンス用のタグが書き込まれています。

このうち「本文下」の方は上で既に新規タグと差し替え済みですので、もう1つの「関連記事下」部分のタグも削除しましょう(※後述する「関連記事下の広告タグ(スマホ用)」と差し替えるとよいでしょう)。

「外観>テーマ編集」より「単一記事の投稿(single.php)」内から以下の部分を削除します。

関連記事下の広告タグ(スマホ用)の設置

つづいて、スマホ用に関連記事下にコードを差し込む方法。
「外観>テーマ編集」より「単一記事の投稿(single.php)」を開き、関連記事下の部分に、
以下のタグを書き込みます。

スマホ用CSS(smart.css)に追記

上記の広告調整用にCSSも作成しておきましょう(適宜調整してください)。
以下をsmart.cssへ追記します。

ヘッダ部分への広告コード設置(スマホ用)

※2014年4月現在、当サイトにはここで挿入している広告は入っていませんのであしからず

スマホ版は、ヘッダ下に小さなサイズ(320×50)のものをいれることにしました。
「外観>テーマ編集」より「単一記事の投稿(single.php)」を開き、パンくずリスト上の部分にタグを入れ込みます。挿入箇所は<?php get_header(); ?>と<div class=”kuzu”>の間です。以下の画像を参考にしてください(※バージョンによって違うかも)。

ads_stg3_001

挿入するタグは、スマホの場合のみ表示するようにPHPで設定をする必要があるため、アドセンスから取得したタグを単純に入れ込むだけではダメです。
以下のタグを入れ込みます(★で囲まれた部分にアドセンスから取得したタグを入れ込む)。

スマホ用CSS(smart.css)に追記

上記の広告調整用にCSSも作成しておきましょう。
以下をsmart.cssへ追記します。※以下の状態では何も変化はありません。適宜調整してください。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

Googleタグマネージャを利用してリンクのクリック情報を計測する方法

Googleタグマネージャとアナリティクスを併用すると、ページ内の任意のリンクがクリックされた際の各

タグマネージャで作成したクリックイベントの挙動を確認する方法

前回、Googleタグマネージャにて クリックイベントのタグを作成しました(Googleタグマネージ

ゆうパックの宛名印字サービスを利用したらものすごく便利だった

7~8個程度ではありますが、毎月決まった取引先に小包を郵送する機会があります。 基本的に「ゆう

うちは何回まで受けられる? 特定不妊治療費助成制度について調べてみた

昨年から不妊治療を開始し、半年ほど人工授精を行ってきましたがなかなか良い結果にいたらず、このたび次の

ThunderBird 返信メールが簡体字中国語(GBK)になる場合の対処方法

メールソフトThunderBird(サンダーバード)を使用しています。 本日、届いたメールに返

WordPress 記事本文のHTMLタグ・文字列を置換する方法

タイトルどおり WordPressで記事本文内に記述したHTML(CSS)タグを検索・置換する方法で

ヤンキーを語るならファンシーも語れ! -ナンシー関と根本敬が見つめた日本-

速水健朗さんの"「ヤンキー論」に必ずつきまとうナンシーの影を追っ払え!"という日

Windows7でHDD(ハードディスク)の残量を視覚的に分かりやすく確認する方法

「コンピュータ」のエクスプローラ画面では、接続されている各種ドライブを確認することができます。

ヤマト運輸から身に覚えのない転居転送サービスの確認書が届いた

ヤマト運輸から「転居転送サービス」のはがきが届きました。 これは「転居したから荷物を新住所に転送し

男性必見! 不妊治療クリニック 採精室の中はどうなっているのか?

不妊治療のクリニックに通うようになってしばらく経ちます。その過程で何度か「採精」…つまり精子の採取を

Comment

  1. まゆ より:

    はじめまして、記事を参考に設定したのですがスマホのヘッダ表示だけ表示されません。

    単一記事の投稿(single.php)」のパンくずの上とは具体的にどの場所でしょうか?

    それと、スマホ用CSS(smart.css)に追記の中身が互い違いになてるようです。

    お忙しいところ大変恐縮ですがご教授いただけると幸いです。

    • 管理人 より:

      コメントありがとうございます。
      本文のほうにも追記しましたが、挿入箇所(=パンくずの上)は<?php get_header(); ?>と<div class=”kuzu”>の間になります。本文内の画像を参考にしてみてください(※ただしバージョンによって違うかも)。
      それからCSSの間違いの指摘ありがとうございました。修正いたしました。

Message

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

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑