読者です 読者をやめる 読者になる 読者になる

ドローイング空間

3D-CADを中心に、雑多なことをかいています。

AdSenseの広告枠に見出しをつける

Web

広告

AdSenseヘルプの「広告の配置に関するポリシー」で、広告の見出しについては、 付ける場合は、『「広告」または「スポンサーリンク」をつけるとありますが、 特に付ける必要があるとは書かれていません。あってもなくてもいいように思っていました。 「広告見出しはつけたほうがいい」との記載をよく見かけるようになったので、 私のサイトの広告枠にも広告見出しをつけることにしました。

Adsenseの広告枠の貼り方

AdSenseで取得した広告コードを取得すると次のようなコードが得られます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!—広告枠 レスポンシブ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-045541707750338"
data-ad-slot="6851195197"
data-ad-format="auto"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

私は、今回調べて、初めて知ったのですが、一番上のスクリプトタグは、初めに一回読み込まれれば良いので、1ページに1つだけ存在すれば十分とのことです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

私は、このまま貼り付けていたので、そのまま、広告タグごとにつけていました。

今回、ここも修正して、headタグの一番後ろか、bodyタグの前方、他のスクリプトタグの後ろに配置します。

広告の見出しをつける

後は、本来の目的の、広告の見出しを付けます。つけていればいいと思いますので、pタグで囲った、「広告」の文字を広告枠の前に配置します。

<p>広告</p>
<!—この直後に広告タグを配置する -->

この操作は、htmlエディタに、テンプレートの更新機能がついていなければ、エディタのgrep機能で検索置換するかスクリプト言語で必要があります。

htmlエディタに、テンプレートの更新機能が利用できれば、比較的簡単ですが、検索置換で行うと、 意図しないところも置換されてその修正が大変になったりするので、あまりやりたくありません。

そこで、cssの機能で、「広告」という単語を配置することも考えてみます。

CSSの content プロパティ

CSSの content プロパティを使用するとそれぞれのページを修正せずに対応できます。 cssファイル内に、次のコードを埋め込みます。

/* AdSenseの広告タイトル */
.adsbygoogle:before {
	 content: "広告";
	}

何故か下線が付きますが、思惑通り広告タイトルが表示されます。

f:id:kukekko:20160218200101p:plain

cssで対応したほうが断然楽です。