GoogleAdsenseのインフィード広告をStinger8記事一覧に埋め込む

Stinger8というWordPressのテーマにしてから少しずつですが、テーマのカスタマイズを行なっています。

その中でWordPressの記事一覧の中に、GoogleAdsenseの広告を埋め込むことができるということで、その作業を行いました。

結果としてはうまく記事一覧の中に入りこんでくれたと思います。

今回はそのお話をしたいと思います。

スポンサーリンク
スポンサーリンク

インフィード広告とは

インフィード広告とは、Webサイトやアプリ(画面の上から下に読み進めていくデザイン)のコンテンツとコンテンツの間に表示される体裁の広告のことです。FacebookやTwitterなどのSNSや、キュレーションメディア、ニュースアプリなどでよく利用されています。最近では、テキストやバナーだけでなく、動画などのリッチコンテンツが配信できるメディアも珍しくありません。

インフィード広告は、単に「コンテンツとコンテンツの間に表示される体裁の広告」という広告手法を表す用語であり、これ自体は“ネイティブ広告”というわけではありません。ただし、インフィード広告の特性上、“ネイティブアドの体裁をとる”ことが多いので、インフィード広告=ネイティブアドと呼ばれることも多いのです。

インフィード広告と似た名称の広告で、「インリード広告」や「インスクロール広告」という広告もあります。

ネイティブアドという言葉が一緒に出ていて少々ややこしいことになっていますが、ネイティブアドというのは概念の話、インフィード広告というのはコンテンツとコンテンツの間に挟み込まれた広告のことだと考えた良いようです。

なんならば、ネイティブアドという言葉は忘れてしまってもいいのかもしれません。

要するに、コンテンツの中にうまーく混ざり込んだ広告のことだと思ったら間違えではないと思います。

インフィード広告の取得方法

それではインフォード広告の取得方法を説明したいと思います。

Googleのインフォード広告はGoogleAdsenseから取得することができます。まずはGoogleAdsenseにログインします。

google_adsense_infeed_ad_001

広告の設定をクリックします。

赤く囲まれている+新しい広告ユニットを選択します。

google_adsense_infeed_ad_002

三つの広告から選んでもらいますが、インフィード広告を今回は選択します。ちなみに他の項目についての説明は以下です。

広告名称 意味
テキスト広告とディスプレイ広告 広告のタイトルとテキストによる説明文、URLなどが記載されています。
記事内広告 ブログやwebサイトのコンテンツと同じ幅でレイアウトされた画像とテキストで構成された広告
google_adsense_infeed_ad_003

自動で広告スタイルを作成するを選択します。

自分のサイトのURLを入力すると、それに合わせてインフィード広告が作成されます。

僕のサイトは、レスポンシブルデザインですのでDesktopを選択しておけばモバイルの設定もされますので問題ありません。

google_adsense_infeed_ad_004

ページをスキャンボタンをクリックすると、約1分くらいでサイトをスキャンしてインフィード広告が作成されます。

google_adsense_infeed_ad_005

自分のサイトに設置された時にどういった見え方がされるのかを自分のサイトを用いて表示してくれますので、インフィード広告がサイトにどんな影響を与えているのかについてわかりやすくなっています。問題がなければ右端にある、次へボタンをクリックしてください。

google_adsense_infeed_ad_006

左の画面で、実際のサイトにインフィード広告が設置された時にどういった見え方がされるのかが表示されます。ちなみに、右上の青い線をドラッグしたまま移動させることによって記事の幅を変更させることができます。

またインフィード広告のフォントの種類やサイズ、サムネイル画像の大きさなども右の画面から変更することができますので、少々の誤差を修正することもできます。問題なければインフィード広告のソースコードを取得し、サイトに設置をすることになります。

では、画像に記載されている、1.〜3.の項目について説明します。

番号 名称 詳細
1. 広告ユニット名 この広告の名称を決めます。複数のサイトを運営している場合は、サイト名などを入れておいてもいいと思います。
2. グローバルオプション フォントやテキストを折り返すかどうか、背景色、枠線の有無とサイズ色、サムネイルのサイズ、広告見出しの長さ、広告クリックボタンの種類など
3. 保存してコードを取得 サイトに貼り付ける用のコードが手に入ります。

インフィード広告のコードをWordPressのStinger8に入れる。

インフィード広告を挿入するのは、stinger8のitiran.phpというファイル。

もちろん子テーマを作ってから、itiran.phpは触るようにしましょう。あとはファイルのバックアップをお忘れなきよう。

ファイルですが、修正前のファイルと修正後のファイルの中身をご覧いただきます。

まずは修正前です。

次は修正後です。

修正前のファイルの7行目と34行目以降を修正しています。当たり前ですが、修正後のファイルの34行目がインフォード広告を埋め込むためのコードです。

以後は修正後のファイルの話をします。

36行目から、44行目まではGoogleAdsenseのインフィード広告のコードです。

34行目で、記事一覧の3つ目と8つ目にインフィード広告を設置するように設定しています。

それ以外は、通常の記事一覧の内容を表示させるので8行目から33行目で記載をしています。

7行目も修正をしています。いくつ目にインフィード広告、通常の記事ということを明確にするために、数字を定義するような文を記載しました。

インフィード広告の設置方法については、色々なサイトで詳細されてます。僕も色々と調べましたが、一番簡単に設定が出るのはこの方法だと思います。

ちなみに、僕が参考にしたwebサイトはこちらです。このサイトは、phpの構文の説明もしてくれているので、とても参考になるサイトです。

STINGER8の記事一覧にAdsenseのインフィード広告を馴染ませる方法 - ニケッチャニッキ
今日はSTINGER8のトップページやカテゴリーページなどの記事一覧に、GoogleAdsenseのインフィード広告を馴染ませる方法の紹介です。 cssやPHPが多少わかるよって人はSTINGER8でなくても応用できます。 上記の画像のような感じで表示されます。 インフィード広告を馴染ませる方法 cssの設定 STIN...

インフィード広告に枠線を入れるなど

インフィード広告を入れることはできるようになりました。

ただ、常にインフィード広告が表示されるわけではないようです。時々ディスプレイ広告が表示されています。まあそれは仕方ないのですが。

で、インフィード広告を設置すると、記事一覧に馴染んで表示されるのですが、インフィード広告の下に下線が入っていないために、ちょっと馴染めません。

ですので、下線を入れるようにします。

実は、インフィードを広告を設置する際にクラスを定義していました。クラス名はinfeedです。

このinfeedクラスは、Style.cssファイルで管理をしています。

infeedクラスの中に、border-bottom-styleプロパティというものを作り、点線である、dottedを定義しました。

その結果、うまく下線が表示され、記事一覧の中にうまく埋め込めるようになりました。実際の記事一覧を画像にしたのでご覧ください。

infeedad007

最後に

以上で、インフィード広告の作り方と、Stinger8への広告の埋め込み方について記載をしました。

あと続きを見るボタンを作るということについては、先に書いた記事に方法を記載していますので、そちらをご覧いただければと思います。そんなに難しい方法でありませんん。

https://daimaclog.com/2018/01/wp-stinger8-customize-button.html

他にもStinger8のカスタマイズは行なっています。まだまだ書きたいことはたくさんあるので、都度公開してきたいと思います。

コメント

タイトルとURLをコピーしました