Googleの自動広告でおまかせで入れるとサイトの見た目が最悪になるので、デザイン的に最低限許される範囲で入れてみた。
当然、広告収入は悪くなるが、良かったとしても対した金額では無いので問題ない。
目次
Google AdSenseの『広告コード』の取得方法
このインフィード広告は、現在使っていない。コードの取得の仕方の例として載せている。
コードは広告ユニットタブのそれぞれのユニットで別々のコードを取得する必要がある。
インフィード広告を入れてみる。「広告ユニットごと」ここから作成できる。
下の方に作成した広告ユニット名が表示されるので編集する場合はここから修正する。
上の画像の「インフィード広告」を選択するとこのようになる。yStandardには一覧表示にこれが表示されるので現在の横幅を測ると360pxだったので下のようにコンテナの幅を360pxで作成して保存した。
チョット意味不明だが、保存する前の状態ということらしい。保存をクリック。
以下のように表示されるのでコードを取得する。
コードは、ユニット毎に別々のコードを取得する必要がある。
右サイドメニューの上広告
このような感じの広告が表示される。
Google広告のコードを入れる – 右サイドメニューの一番上の広告
この設定は、「外観 -> ウイジェット -> サイドバー」で設定している。
設定した後は以下のように表示され、何も無いような感じでスポンサーリンクとだけ表示されている。
コードを編集をクリックするとコードが入っている。
右サイド上に表示される広告の『スポンサーリンク』というタイトルの入れ方
これは、上のコードを入れるとき以下のHTMLを追加して記述しているので『スポンサーリンク』と表示されるようになる。
<div style="text-align:center; font-size:10px; color:#a9a9a9">スポンサーリンク</div>
<!--ここにGoogle広告のスクリプトが入る-->CSSも設定した方がいいようだが、今の所設定していない。
投稿・固定ページの一番下に『Multiplex広告』を入れる
現在、これを使用している。
ページの一番下、コンテンツの横幅一杯に入る広告。以下からコードを取得している。
『Multiplex 広告』をクリック、
下の画面で右上に名前を入れて、保存をクリックすると作成される。他はデフォルトのまま。
作成されたユニットは一覧で表示される。
それぞれのユニットのコードは２番目の＜＞アイコンから取得できる。
取得するコードは広告ユニット毎に、それぞれ取得する必要がある。
取得したコードをウイジェットの『投稿』と『固定』の記事下に入れる
この設定は、「外観 -> ウイジェット -> 記事下エリア（投稿）& 記事下エリア（固定）」と２箇所に入れている。
設定していると、ウイジェット内の記事下エリア（投稿）に以下のように『スポンサーリンク』というタイトルが既に表示されているはずである。
もし、初めて作成する場合は、＋ボタンをクリックして『カスタムHTML』ブロックを入れる。HTMLを編集という青色のボタンが出るのでクリック。取得したコードを以下のところに入れる。
下の更新と右上の更新もクリック。下だけだと保存できない。
保存できたら、以下のようになる。コードを編集する場合は『コードを編集』をクリック。
以下の画像では見えないが、下に『スポンサーリンク』という文字が見えるはずである。
この設定が済むと直ぐには広告は表示されないが、広告のスペースが表示されるので設定が完了したことがわかる。
大体３パターンで入る。
HTMLとScriptコードを入れる（記事下広告表示用）
取得したユニット毎のコードをここに入れる。
上の設定のコードは、以下のところ「外観->ウイジェットの記事下エリア（投稿）」で設定している。
ここに入れているのは以下の「カスタムHTML」ブロック。
設定箇所は、「外観 -> ウイジェット」から「記事下エリア（固定ページ）」に他の「記事下エリア（投稿）」スポンサーと同じスクリプトが入っている。
記事下エリア(投稿)コードは以下のような構造になっている。広告の上の『スポンサーリンク』のタイトル。
<div class="polo-ad-content">
<div class="polo-ad__title">スポンサーリンク</div>
<div class="polo-ad__one-block">
<!--ここにGoogle広告のスクリプトが入-->
</div>
</div>CSS（記事下広告）
このレイアウトは以下のCSSで設定されている。『カスタム CSS & JS』プラグインを見る。
カテゴリー一覧の下：スポンサー用 CSS – 記事下 Multiplex広告（レスポンシブ）カテゴリー一覧
投稿一覧ページの下：スポンサー用 CSS – 記事下 Multiplex広告（レスポンシブ）- 投稿一覧ページ下
記事下エリア（カテゴリー）一覧の場合
これは記事ページでなく、サムネイルが表示されているカテゴリー一覧の下に表示される分である。
CSSはこの上のところと同じで上の「スポンサー用 CSS – 記事下Multiplex広告（レスポンシブ）カテゴリー一覧」になる。
yStandardを使っているとカテゴリーページの下がチョットスペースが空いたりする。
ここに広告を入れると少し賑やかになるのかな？ と言う思いで広告を入れてみた。
無料で使うと、投稿とか固定のページは色々やってみるとなんとかなるのだが、カテゴリー一覧だけは中々難しい。
yStandardのカテゴリーページ一覧の下に表示する広告コードの入れ方
最終的にやったのは「archive.php」に直接記述すること。
yStandardのカテゴリーページはこの「archive.php」で表示されているようだ。
レイアウトを変更
「外観 -> カスタマイズ -> [ys]デザイン -> アーカイブページ」を選択。
ページレイアウトでサイドバーを外した右のレイアウトを選択。
左のサイドバー付きを選択すると広告が、コンテンツとサイドバーを含めた横幅全体に表示されてしまうので広告の位置がおかしくなる、そこでサイドバーを外したレイアウトを選択した。これだと広告の入るレイアウトがうまくいく。
親テーマにあるarchive.phpを複製して子テーマに入れる
そこでyStandardのお親テーマから複製して子テーマに入れて、そのファイルを修正する。
子テーマの archive.php に広告コードを追加して入れる
「Multiplex広告（レスポンシブ）」用のコードが入ることになる。
子テーマに複製した「archive.php」を以下のように追加修正した。
20〜29行目が追加した分になる。ここに広告を表示するためのスペースを作成しGoogle広告を入れた。
広告のコードは自分で取得したコードを入れること。
以下はXXXXXXXXXXXXXXXと入れているので使えないので注意。
投稿ページの下に入れる広告と同じ「Multiplex広告（レスポンシブ）」を入れるのだが、このカテゴリー一覧では横幅が広すぎるので width を70%にCSSで設定している。
広告表示内容は投稿一覧と全く同じだが、そのためわざわざクラス名を変更している。
<?php
/**
* 記事一覧テンプレート
*
* @package ystandard
* @author yosiakatsuki
* @license GPL-2.0+
*/
get_header(); ?>
<div class="container">
<div class="content__wrap">
<?php if (have_posts()): ?>
<?php ys_get_template_part('template-parts/archive/content'); ?>
<?php else: ?>
<?php ys_get_template_part('template-parts/404/content'); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<!-- 広告を入れるスペースの作成 -->
<div class="polo-ad-content-one-column">
<div class="polo-ad__title-one-column">スポンサーリンク</div>
<div class="polo-ad__one-block-one-column">
<!-- 広告を入れるコード -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-XXXXXXXXXXXXXXX" data-ad-slot="4751288245"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 広告を入れるコード end -->
</div>
</div>
<!-- 広告を入れるスペースの作成 end -->
</div>
</div><!-- .container -->
<?php get_footer(); ?>CSSでレイアウトを整える
.polo-ad__title-one-column {
display: flex;
align-items: center;
font-size: 10px;
color: #a9a9a9;
}
/*テキストの前と後を同時に指定*/
.polo-ad__title-one-column::before,
.polo-ad__title-one-column::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#a9a9a9;
}
/*テキストの前を指定*/
.polo-ad__title-one-column:before {
margin-right: 10px; /*テキストとラインの右スペース*/
}
/*テキストの後を指定*/
.polo-ad__title-one-column:after { /*テキストとラインの左スペース*/
margin-left: 10px;
}結果、以下のように『スポンサーリンク』の下に広告が入ってくる。
上の広告は「Multiplex広告（レスポンシブ）」なので全部で８つの広告が表示されることになる。
Google AdSenseの標準で表示される広告のオン/オフ設定
インテント重視のフォーマットを選択。
一番上の広告インデントにはチェックを入れる。
- 広告インテントのリンクをページの既存のテキストに挿入できるようにする
- 広告インテントのアンカーをページに配置できるようにする
- 広告インテント チップをページの段落の末尾に設置することを許可する
その下の３つの項目で以下の設定ができる。
以下の広告、AdSenseで左サイドのメニューから広告 -> サイトで右端の鉛筆アイコンから設定できる。
（A）文章中のテキストをリンクにする
文章中の特定のテキストに対してリンクされた状態になる、頭にマークが付いている。
この項目のチェックを外すと広告インテントが消える。
このように文章中のテキストを強引にリンク作成をしてしまう。
（B）右下に表示される広告
広告インテントのアンカーをページに配置できるようにする
（C）文章の末尾に入る広告
広告インテント チップをページの段落の末尾に設置することを許可する
以下のように文章の末尾に作成した覚えが無いテキストが出現する。クリックするとリンク先に移動する。
これにチェックを入れた場合、以下のような末尾のテキストが表示されるようだ。頭にマークが付いている。チェックを外すと消える。
変更は、最長で1時間ぐらいで反映されるとのこと。
yStandardでの広告コードの入れ方
yStandardでのインフィード広告に取得したコードを入れて見る。
場所は、外観 -> カスタマイズ -> [ys]広告から、
コードを入れるとすぐに下のように空きスペースが表示され、そこに広告が入るということがわかる。しばらくは表示されない。しかし、色々ページを見ているといると、割と早く20分もするとぼちぼち表示され始める。
さらにに「PC広告設定」で記事本文下に入れた（左右に表示される予定）、ここも記事本文下なのでスタイルは同じなので同じコードを入れてみた。
早い！、コードを入れてサイトを表示したらすぐに入っていた。但し、入っていないところもある。完全に入るのはしばらく時間がかかるようだ。