自動広告からユニット広告に切り替えよう ユニット広告の設定方法

前回自動広告を取り除く作業について説明いたしました。

もし広告を1秒でも表示されない時間ができるのが嫌だという方は先にユニット広告のコードを作成してから、自動広告のコードを無効化し、ユニット広告の設置をするのがお勧めです。
自動広告を廃止するやり方についてはこちらから

 




ユニット広告の設定方法

ユニット広告は広告の設置場所を自分で決めれるのでサイトの見栄えが整えられる、また広告の位置ごとに何回表示されクリックされたかを監視したい場合にはとても便利です。

今回は私個人が推奨するユニット広告の設定方法をまとめます。

広告設置場所

固定位置の広告設定

固定位置のユニット広告

シングルページの広告設定でどのページに対しても固定の広告を設置します。

画像左側の『ヘッダー下』と『サイドバーの上』と『記事の下』の3か所に設置します。

私はヘッダー下はPCビューのみに表示で、見栄え優先のためスマホではdisplay:noneで非表示にしています。

cssを特にいじらなければこれらはスマホでも同じ位置に設置され、また広告のサイズはスマホ用のものに変わるので深く考える必要はありません。

 

ユニット広告の作り方

まずグーグルアドセンスの管理画面にログインし左側の項目から『広告』→『ユニット広告』の順で選択します。

ユニット広告を新しく追加できる画面になるので『+新しい広告ユニット』とクリックします。

※わたしは既にユニット広告を作成しているためモザイク部分に制作した広告が表示されていますが何もしていない方は何もない状態になります。

 

ユニット広告を新しく作る

すると3種類の広告の形式が選べるページになります。

広告のタイプは全3種類

マックスは『関連コンテンツ』用の広告もあるため4種類あるようですが私はまだそのコンテンツが使える通達がなかったためこの3つのみです。

 

それでは広告を作っていきましょう。

この3つの中で推奨されているのが『テキスト広告とディスプレイ広告』です。

今回これを使って作成します。

テキスト広告とディスプレイ広告

まず名前の項目は自分が広告を設置した場所が後からでもわかる名前にしまよう。

 

名前は後で変更もできますが一度生成されたコードの中に名前が残るため、それを使用した後に名前を変更した場合は古い名前と新しい名前の二つになってしまいます。

この名前の部分はコメントアウトされているので広告のコードや表示直接は関係がないのですが、管理する場合に1つの名前に絞った方がわかりやすいので、最初に決めたものがずっと使える名前にするのが一番良いです。

名前が途中で変わって古い名前の履歴が残っても気にならない方はそのままでOKです。

 

テキスト広告とディスプレイ広告作成画面

ヘッドの下にひとまず作りたいので『ヘッダー下広告』や『header_bottom_Ad』などで名前を作っていきましょう。

 

広告タイプで推奨されているのはデフォルトのままになっている『テキスト広告とディスプレイ広告』。

他の広告に変えてもちろんOKです。

好みの見た目を選びましょう。

また広告のタイプも設定後変更可能ですが、その場合は一度張ったコードと違ってくるため、再度新しいコードを貼り替え作業が付いてきます。

その他の設定は特にいじる必要はなく『保存してコードを取得』をクリックすれば一つ広告のためのコードが完成されます。

 

完成したコードを貼る

ユニット広告に新しく作られた広告のコードの名前が追加されていますのでそこの『コードを取得』をクリックします。

すると以下の画像のようにポップアップが表示されます。

広告コード

この広告コードをすべてコピーします。

エリア内をワンクリックで全選択になるのでそのままコピーしましょう。

 

つぎにFTPからコードを追加していきます。

header.phpのバックアップを取ってから必ず編集作業に入りましょう。

 

人によってヘッダー部分の終わりの名前が違うのでご自身でお探しください。

私の場合<header></header>のなかにヘッドの情報を記述していたので、</header>の直下にコピーしていたユニット広告のコードをペーストします。

ユニット広告のコード

これで保存し、サーバーにアップしたらヘッダー下の広告設定は完了です。

 

同じ要領で、サイドバーと記事下にも設定しましょう。

 

記事内広告のコードを作る

記事内広告

 

記事内広告のコードは記事を書くたびに毎度記事の中に貼りつける必要があります。

面倒にも感じるかもしれませんが、自分で広告の位置と数を決められたり、またこのページには広告は出したくないときなどは貼る必要がないため、ページごとに広告を表示・非表示できるので、選択肢が大幅に増えます。

 

それではます記事内広告用のコードを作っていきましょう。

記事内広告

記事内はに特化した広告『記事内広告』を使いましょう。

記事内に自然に溶け込んでくれる広告が表示されます。

 

選択したら記事内広告を作成するページになるのでひとまず名前を決めましょう。

『記事内広告』や『manual_inner_Ad』など。

ご自身が一目見て把握できる名前にしましょう。

 

記事内広告を作成

名前を設定したら『グローバルオプション』も『スタイル』も特に設定を加える必要はありません。

 

『スタイル』の項目に関しては広告の文字のスタイルや色などを変えたい場合は自分で変更できます。

 
また変えた際はリアルタイムで左のビューで変更後の見栄えが確認できますので好みに合わせて設定しましょう。

デフォルトのままでOKという人は名前のみを設定してそのまま最下にある『保存してコードを取得』をクリックしましょう。

 

コードを取得する画面に切り替わるので『コード スニペットをコピー』をクリックしてコードをコピーします。

完成した記事内容広告のコード

 

ここまで来たら各自のユニット広告の準備が整いましたので自動広告を非表示もしくは削除する作業に入りましょう。

すでに行われている場合はコードを貼る作業に移ります。

 

自動広告を廃止するやり方についてはこちらから

 

記事内広告を設置しよう

ここからの作業はWordPressの投稿画面になります。

投稿画面から記事を書くときに左上にあるタブが『ビジュアル』になっていると思いますがコチラを『テキスト』にきりかえコードビューに変更させます。

自分が差し込みたい文章の終わりにコピーした広告のコードをそのまま張り付けましょう。

記事内に広告のコードを貼り付け

これで保存して公開すれば、自分が差し込んだ場所に記事内広告が表示されます。

 

※一番最初の切り替えの時は広告の表示に少し時間がかかる場合があります。白い余白があって広告がない場合はしばらく待てば表示されていますので安心してください。

スマホで見たときに広告が画面幅いっぱいに広がるのを防ぐには

豆知識程度なことですが、個人的に広告がスマホで見たときに左右にぴったりくっついて表示されるのが嫌だったので上下のコンテンツの幅にあった幅にするために以下のコードを加えることで解消されました。

 

 

いれる場所は『data-ad-format=”fluid” 』の直下がわかりやすいと思います。

 

 

 

これでスマホで見たときに幅が左右にくっつくことがなくなります。

 

ユニット広告は一度作ると削除ができない

注意すべきことではないのですが一度ミスってもう一度作り直すときに『+新しい広告ユニット』から再度するよりも間違えて作った広告の項目の左側にあるチェックボックスにチェックを入れて『操作』から『編集』を選ぶことでまた編集することが可能です。

 

一度作られた広告のコードは削除ができないため項目にずっと表示されます。

非表示など項目から存在を消すことは可能ですが、見えなくなるだけです。

使わないのが残るのはちょっと気持ち悪いので気になる方はお気を付けください。

 

作成した後の広告を編集する

ただし最初の広告の種類を選ぶ時点からではなく選んだ後の広告の設定の編集になるため広告の種類そのものを変えたい場合は作り直しましょう。