広告ユニットを上手に管理したい
Contents
Google AdSenseの広告ユニットとプレースメント － どのページのどこに、どの広告ユニットを表示しているか － をセットにして管理する。
コンテンツに合わせ、広告ユニットをページごとにデザインするように配置してやれば、より個性的な記事ができるだろうなと思うのですが、
- ページを構成する php ファイル同士の関係についての知識や
- そのファイルのバックアップや変更をはじめとする管理の技術、そして
- QuickStart導入を推奨するアナウンスにどう対応すればいいか などなど
まだまだ足りないことだらけの私は、画一的なプレースメントというデメリット? よりも広告プレースメントのポリシーにしっかり適合した運用を優先に目指そうと思い、まずプラグインGoogle AdSense by BestWebSoft（BWS）を選んで学習です。
MEMO:
プレースメント ＝ placement 配置・配置すること
Google AdSense by BestWebSoft（無料版）
プレースメントはBefore Content & After Content
広告ユニットの配置を管理できるのは
- Home page（ホームページ）
- Pages（固定ページ）
- Posts/Custom posts（投稿/カスタム投稿）
- Categories/Tags（カテゴリー/タグ）
- Search results（検索結果）
- Widget（ウィジェット）
広告ユニットはページあたり3つまで表示が許されていますから、6 x 3 = 18 のユニットの表示を管理できる計算です。
ただ、表示管理できるユニット数は18ですが、無料バージョンで選択できるプレースメントの数は Before Content（記事の前）とAfter Content（記事の後）の2つですから、レイアウトのバリエーションという意味ではちょっと物足りない感じもありますね。
Google AdSense by BestWebSoft のコントロールパネルはGoogle AdSenseのアカウントで作成した広告ユニットのリストをそのまま見せてくれます。
ですから、広告コードをコピーしたり保存し直したりという手間がいりません。その使い勝手は公式プラグインだった Google AdSense と同じですね。
- どのページに表示するかを選んで、
- 表示させたいコードを選んで
- ページのどこに表示するかを決めるのです。
原理が分かると、プラグインのインターフェイスと使い方を理解するのもむずかしいことではないように思うのですが、実際に広告ユニットの表示で必要になる広告ラベル － 「広告」あるいは「スポンサードリンク」 － の文字をどう表示するかが、私たち初級者にはちょっと敷居が高くなります。
広告ラベル 「スポンサードリンク」は [Custom Code] で表示
BWSにはCustom Code（カスタムコード）の設定用タブに CSS と php の2つの設定オプションが用意されていますが、そのうちCSS で広告ラベル － 「広告」あるいは「スポンサードリンク」 － の文字を表示するように設定してみます。
MEMO:
CSS ＝ Cascading Style Sheet（カスケイディング スタイル シート）
さまざまなスタイルごとの設定（その集まり） というほどの意味ですね。
このテクニックはこのプラグインに限ったものではありません。「スポンサードリンク」 を表示するための基本と捉えてくださいね^^
「CSSで設定する」ということは、その設定をHTMLの何というタグ（マークアップ）に対応させればいいのかを確認しなくてはいけません。
無料バージョンのBWSはBefore ContentとAfter Contentの2つのプレースメントを生成すると書きましたが、その2つがどんなHTMLになっているかを確認して、CSSで表示を設定しようというわけです。
広告コードを設定し、ラベルがない状態でプレビューで見てみると、
少し見にくいかも知れませんが、Google AdSenseのアカウントが生成してくれたコードの前に
class=”ads ads_before”
の設定が読み取れます。
この”ads ads_before”に対して、広告ラベル － 「広告」あるいは「スポンサードリンク」 － の文字を設定してやるのです。
がここで問題が。
class名にスペースが使われている
class=”ads ads_before” の前に「スポンサードリンク」を設定すればよいのですが、
.ads ads_after:before {
content: “スポンサードリンク”;
}
ではだめです。半角スペースはパラメーターを分けることを意味する特殊な意味になってしまうため、class=”ads ads_before” そのものを指定するには、
.ads.ads_after:before {
content: “スポンサードリンク”;
}
という表記でなくてはいけません。ピリオドひとつの違いですが、”ads”と”ads_before”を持っているものに… という意味です。
「スポンサードリンク」を広告の上に表示するには
class=”ads ads_before”の前に「スポンサードリンク」を、という設定になりましたが、このままでは「スポンサードリンク」の文字が文字通り広告の「前」に来ます。
私のページで使っているような 300×250や336×280というサイズの広告と組み合わせるとすぐに分かりますが、「スポンサードリンク」と広告が左右に並んで表示されます。
そこで、
「スポンサードリンク」（改行して）
広告
というレイアウトにするには
.ads.ads_after:before {
content: “スポンサードリンク¥A“;
white-space: pre ;
}
という、少しおまじない的な表記が必要です。
これで、この記事の下の広告の表示ができあがっています。