【ブログ】google AdSense広告の貼り方。WordPress Huemanでinfeedはどう設定するか。
無事google AdSenseの審査に通って、広告を貼れるようになったのですが、
アドセンスを貼れるようになった＝自動で広告が表示される
という訳ではありません。
そこから先がまた結構大変。どこに広告を出すか、どのような広告を表示させるかを考えて設定していかないといけません。
特にinfeedがソースをいじらないといけないのでややこしかったです。
まだまだ広告の貼り方模索中の私ですが、他の方のブログを参考に
超初心者がどういう手順で広告を貼っていったか、
上手くいかなかったところをどのように対処したかなどをまとめていきます。
私が使っているのはwordpressのHueman（無料版）というテーマです。
途中PHPファイルやCSSファイルをいじりますが、非エンジニアの私でも出来たので大丈夫です。
＜スポンサードリンク＞
広告ユニット？自動広告？
まずgoogleアドセンスにログインします。「広告の設定」をクリックして、いきなり迷いました。
・自動広告
・広告ユニット
どうやら広告の貼り方は2種類あるようです。
どちらを使うのがいいのでしょうか？
自動広告
自動広告は割と最近できた新しい仕組みのようです。
自動広告とは、言葉通り自動で良い感じの場所に良い感じのサイズの広告を出してくれるというもので、
面倒な設定は1箇所だけ。ヘッダーの中に、特定のコードを仕込めば完了。
あとはアドセンスのAIが自動でブログの形を判断して、表示できるところに表示できる形の広告を表示してくれます。
つまりこちらが明示的にここ！と指定していないところにも、広告が表示されるようになります。
そしてAIなので、常に学習をして貼る位置や広告サイズ、広告内容を最適化していってくれるのです。
簡単そうなので、初心者にはこれだろう！
と思いとりあえず自動広告を試してみました。
やり方は簡単で、自動広告を「有効」にしてヘッダーにコードを追加するするだけです。
結果・・
たしかにヘッダーにコードを追加しただけで、自分のブログに広告が表示されるようになりました！
ちょっと感動です。
でも、何だか出方が変。
ここにこんなところにバナー広告出て欲しくない・・レイアウトが崩れて見える・・
自動広告にして実際に出たのがこちら
これは表示された広告の一部ですが、タイトルの上とサイドバーにでかでかとバナー広告が出ていました。
スマホ版も同様に、タイトルの上に出たりと、広告が目障りな感じになっていました。
なんだか広告が変に目立っていて、いまいちでした。最初なのでこの後最適化されていい位置に出るようになるのかもしれませんが、
一旦自動広告はなしにしよう、と思いました。
広告ユニット
次に試したのは従来の広告の貼り方、広告ユニットです。
アドセンスの画面で、どういう広告を出すかの色やサイズを指定しておいてユニット化。
そのユニットのコードを、ブログの表示させたいところに貼り付ける、というもの。
メリットは、自分の出したいところに出したいサイズの広告が出せること
デメリットは、各記事毎に自分で広告の設定をいれないといけないこと
※自動で毎回広告コードを追加できるプラグインがあるかもしれません
です。
とりあえず
①横長ビック
②レクタングル
③リンクユニット
④レスポンシブ
⑤infeed
の5種類の広告ユニットを作成しました。
ユニット登録の手順は説明がなくてもわかると思いますので割愛します。
広告を貼ってみる
最新の記事の中に、各広告ユニットのコードを挿入。
イメージとしてはこのように、
最初の方に横長バナーまたはレスポンシブ
文章の途中（見出しが2～3続いたくらい）でレクタングル
文章の終わりにレクタングル
適宜リンクユニット
がいいと見たので、それに合うように記事内に設定をしていきます。
貼ってすぐ表示される広告もあれば、しばらく待たないと表示されない広告もありました。
結果・・
貼る位置は様子を見ながら調整していきますが、とりあえず自分の出したい位置に広告を表示できるようになりました。
なので私は広告ユニットを使うことに決めました。
＜スポンサードリンク＞
記事内の広告の貼り方
広告ユニットの場合は自分で広告を表示させたい位置にコードを挿入する必要があります。
恐らく補助的に使えるプラグインもあると思いますが、今のところ使っていません。使わなくても簡単に出来ます。
テンプレートに各広告ユニットのコードを入れておいて、表示したいところでテンプレートから読み出し、とすれば特に面倒でもなさそうです。
挿入コードはこのような感じで、広告の上にスポンサードリンクと表示するようにさせました。
| 記事 記事 <p><script async src=”//ｘｘｘｘｘ.js”></script><br /> <!– ディスプレイ_レクタングル –><span style=”font-size: 8pt;”>＜スポンサードリンク＞</span><br /> <ins class=”ｘｘｘ” style=”ｘｘｘｘｘｘ;” data-ad-client=”ｘｘｘｘｘｘｘｘ”></ins><br /> <script> (adsbygoogle = ｘｘｘｘ || []).push({}); </script></p> 記事 記事 |
背景が黄色に・・
一度貼ってプレビューで確認したら、広告は表示されているものの背景が何故か黄色になっていました。
こんな感じに。
アドセンス側の問題か、私が使用しているテーマHuemanの問題か・・
調べたところアドセンスの仕様らしく、指定したサイズの広告より小さい広告が表示される際に背景が黄色くなってしまうようでした。
これだと変に目立つのでこの黄色背景を消したい。
ということでCSS（スタイルシート）をちょっといじりました。
——————————————————————————-
CSSについてはこちらもどうぞ⇒【ブログ】見出しに色をつけて目立たせる方法/word pressのcss編集
——————————————————————————-
CSSの編集
Huemanの場合
外観＞テーマの編集＞付随するCSSエディター
で、CSSを表示させたら下記を追加します。
| ins.adsbygoogle{ background:transparent!important; } |
これで完了です。サイドプレビューで広告を見ると、背景の黄色はなくなっていました。
これで記事内の広告の設定は完了です。
ウィジットの広告の貼り方
記事内の広告は記事内に都度広告コードを挿入すればいいのですが、サイドバーやフッターに広告表示させるにはどうすればいいのでしょうか。
ウィジットに広告コードを追加すればＯＫでした。
テーマによって多少異なるかもしれませんが、表示させたいウィジットの「カスタムHTML」に広告コードを入れれば完了です。
記事内とは違って一度設定したらあまりいじらないところだと思うので、
プレビューで表示させながら、どのサイズの広告が最も適切かを考えて設定しました。
ウィジットに追加するコードも基本的には記事内のコードと同じにして、「スポンサードリンク」を表示させています。
＜スポンサードリンク＞
infeed広告の貼り方
最後にinfeed広告の貼り方ですが、そもそもinfeed広告って何？という感じだと思います。
私は仕事で少しだけマーケティングに関係したこともあるので言葉の意味は知っていましたが、あまり一般的ではない言葉だと思います。
infeedとは簡単に言うと、そのブログやサイトの1記事のような形で表示される広告のことです。
ネイティブアドとも言われます。
記事内の明らかに広告とわかるものとは違い、読み手からすると一見そのブログの記事かと思うような表示になっているのでクリックされやすいと言われている広告です。
このinfeed広告、是非取り入れたいと思ったのですが、記事一覧が表示される部分はウィジットではないので
ソースコードを直接いじらなくてはいけなく、またHuemanテーマでの説明がされているサイトが見つからなかったので
自力でやるしかありませんでした・・
CSSだけでなく遂にPHPファイルもいじる時が来ました。
Huemanテーマでinfeedのコードを追加する場所
ずばりこちらです。
外観＞テーマの編集＞テーマファイル＞ parts＞post-list-articles.php
post_list_articles.phpの中身を編集してinfeed広告の設定をします。
上の画像だとわかりにくいかもしれませんが、2か所の赤線のコードの下に、infeed用のコードを追加します。
①下記のコードを探します
| <?php else: ?> <div id=”grid-wrapper” class=”<?php echo implode( ‘ ‘, apply_filters(‘hu_classic_grid_wrapper_classes’, array( ‘post-list group’) ) ) ?>”> |
この行を見つけたら、そのすぐ下にこちらを追加します。
| <!–infeed追加–> <?php $ads_infeed = ‘5’; //何番目に広告を表示するか $ads_infeed_count = ‘1’; ?> <!–infeed追加–> |
$ads_infeedで指定している数値は何番目に広告を表示するかの指定です。
何番目に表示するかは好きな位置でいいのですが、Huemanの場合
と記事が並ぶので、奇数の数値でないと他の記事と表示がかぶってしまします。
なので $ads_infeed = ‘5’; とすると、5番目※の記事と6番目の記事の間に広告が表示されるようになります。
※1つ目の記事を0としてカウントする為
奇数以外を指定するとＰＣでの表示だけでなく、モバイル表示でも記事と広告が重なってしまうので必ず奇数にしましょう。
②2つ目の下記コードを探します
| while ( have_posts() ): the_post(); if ( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns ) { echo ‘<div class=”post-row”>’; } ?> |
この行を見つけたら、すぐ下に下記コードを追加します。
ｘｘｘｘで隠していますが、張り付けるコードはアドセンスで発行したコードそのままです。
<!–infeed追加–> <?php |
この2か所を貼り付けたら、ファイルの更新をします。
「正常に登録されました」といったメッセージが表示されたら更新完了です。
infeed表示確認
コードを追加出来たら表示の確認をします。必ずＰＣとモバイル、両方確認しましょう。
こんな感じで表示されました。
あれ？なんか思ってたのと出方が違う・・？
他の記事と同じサイズで並ぶように出るのかと思ってたのですが、
5番目の行にでかでかと広告が出るようになってしまいました。
でも、まあこれでいいか・・
ということでとりあえずinfeed広告が表示されるようになりました。
モバイル表示は記事一覧が1列に並ぶので良い感じに表示されていました。
広告を貼った後は・・
ダラダラと書いてしまいましたが、ひとます記事内とウィジットとinfeedの広告を貼ることは出来ました。
広告が表示されていることも確認できています。
Huemanテーマは綺麗だし見やすいので好きですが、日本語での説明をしているサイトが殆ど見つからないので
きっと同じように悩む方もいるだろうと、自分の忘備録を兼ねて書きました。
どなたかのご参考になれば幸いです。
ここからは引き続き記事を書き続けることはやるとして、
いかに多くの人に見てもらえるか、また効果的な広告の配置はどこなのかを模索して
よりよいブログになるように頑張っていきたいと思います。
＜スポンサードリンク＞
1件の返信
[…] 【ブログ】開設から1か月！現状と目標。ブログで気を付けていることも。 […]