アドセンスのインフィード広告を、ストークの記事一覧に複数設置してみた

こんにちは、アキです。

アドセンスの広告ユニットをふと覗いてみたら新たに「インフィード広告」と「記事内広告」の２つの広告ユニットが追加されていました。

このブログ（ストーク）でもさっそく「インフィード広告」を設置してみたのでその記録です。

インフィード広告とは

「インフィード広告」はTwitterやFacebook等のSNSではよく見かけるタイプの広告です。投稿と投稿の間に表示されるため、広告がタイムラインに自然に入り込んでいるのが特徴。

「インフィード広告」は他の投稿と同じような見た目に表示されるので、記事一覧の中に馴染みます。景観を損ねずに違和感なく広告を設置できるようになります。

もともと一部の人にだけベータ版として開放されていた２つの広告ユニットがついに解禁されたというわけです。

今回は「インフィード広告」をこのブログ（ストーク）に設置していきたいと思います。

ブログ初心者にこそ！『STORK（ストーク）』がおすすめな３つの理由

2017.02.17

「インフィード広告」のコード取得

ブログテーマ「ストーク」での設置方法は公式のOPENCAGEさんの記事で解説されています。設置する広告は１つという方や、心配な方はそちらを参考にしてください。

チェックAdSense-インフィード広告を記事一覧の間に表示する方法丨OPENCAGE

僕の場合は記事一覧に２つ（複数）の「インフィード広告」を設置したかったので少し違う方法になります。

① 使用するデザインの選択

まずはGoogle AdSenseにて新しい広告ユニットが追加されているのを確認してみてください。

追加された２つの広告ユニット

シンプルレイアウトの場合

「インフィード広告」を選択すると次にフィードのデザインを選べます。自分のブログの記事一覧のレイアウトに合うデザインを選択しましょう。

僕のブログではシンプルレイアウトで表示しているため「横の画像」を選択します。

• 上部の画像
• 横の画像
• 上部のタイトル
• テキストのみ

この４種類から選べるので、サンプル表示やプレビュー画面でよく確認して自分のブログに合うデザインを決めましょう。カード型のレイアウトの場合は「上部の画像」を使用すると良さそうですね。

② 広告コードの設定

好みのフィードのデザインを選択して設定を進めます。

設定画面

実際にどのように表示されるかプレビューで確認しながら設定ができます。サイズごとの表示デザインが確認できるので便利です。

右メニューから編集できます。基本的にはデフォルトで良いと思いますが少し編集を加えました。

６つの項目

①『グローバルオプション』・・・フォント、背景、枠線などの設定ができます。はっきりと広告を区別したい場合は、背景に色を付けてみるといいですね。デフォルトのままにしました。

②『イメージ』・・・画像部分を左揃え右揃えと変更したり、画像サイズの調整ができるので自分のブログのレイアウトに合わせましょう。ストークのシンプルレイアウトの場合、画像サイズを「42%」くらいにしたら他の投稿のサムネイルとピッタリでした。

③『見出し』・・・短いタイトルと長いタイトルの選択、フォントサイズの調整ができます。短いタイトルにフォントサイズを「16」にしました。

④『説明』・・・説明（本文）部分のフォントサイズの調整ができます。説明自体の表示をオフにすることもできますが、デフォルトのままにしました。

⑤『URL』・・・広告元のURL表記部分の調整ができます。デフォルトのままにしました。

⑥『ボタン』・・・サイトへリンクするボタンのカラーが変更できますが、デフォルトのままにしました。

調整が終わったら「保存してコードを取得」をクリック。広告コードが取得できるようになるので、コピーしましょう。

次はこのコードをブログのテーマファイルに追加していきます。

「ストーク」のテーマファイルの編集

テーマファイルの編集は必ずバックアップをとった上で子テーマで行うことをおすすめします。FTPソフトを使用してファイルをダウンロードして、編集後に子テーマへアップロードする流れです。

僕はFTPソフトは「Cyberduck」を使用します。手順はソフトに関係なく同じ流れになるのでご了承を。

Cyberduckでストークの子テーマにheader.phpを追加する方法

2017.02.21

① テーマファイルの種類

ストークの記事一覧レイアウトは４種類あります。編集するテーマファイルも４種類あるので、自分のブログのレイアウトのテーマファイルを編集する必要があるので、間違えないように注意してください。

「wp-content」→「themes」→「jstork」と進み、以下の４種類のテーマファイルを探します。目的のレイアウトを親テーマからダウンロードします。

② テーマファイルの編集

僕はシンプルレイアウトなので「parts_archive_simple.php」をダウンロードしてFTPソフトで編集していきます。編集の前に必ずバックアップをとっておいてください。

parts_archive_simple.phpを開きます。

ファイルを開いた様子

その中の上の方にある

を以下のコードに変更します。

これで、記事一覧の中に２つの広告を設置できます。

この２つの部分が広告を設置したい場所になります。「６番目」に設置したいので「6」と入力。

僕の場合、記事一覧では記事が１５件表示されます。５番目の次と１０番目の次に広告を設置するために「6」「11」にしました。『記事５・広告・記事５・広告・記事５』となります。

次に「<!– 広告コード１ –>」の部分に先ほど取得してコピーしておいた広告コードを貼り付けます。

設置場所ごとに広告コードを使い分けるために２種類のコードを使えます。もし広告を３つと増やしたい場合は、

の部分を追加していってください。

追加後はこうなりました。

編集後のテーマファイル

以上でインフィード広告を２つ設置する編集は終わりです。ファイルを保存します。

③ 編集したテーマファイルをアップロード

編集をして保存した「parts_archive_simple.php」を今度は子テーマへとアップロードします。親テーマへのアップロードだと、ストークのバージョンアップで消えてしまいます。

アップロードが済んだら作業は完了です。

広告の設置直後の様子

広告コードを取得したばかりだと、設置が完了しても広告が表示されるまで少し時間がかかります。

指定した場所が空欄になっていれば、設置は上手くできていることになります。

インフィード広告の表示

少し待ったらインフィード広告が表示されました。画像サイズが投稿のサムネイルと幅がピッタリです。記事一覧に自然に紛れ込んでいます。

注意点としては必ずしも「インフィード広告」が表示されるというわけではなく、横長バナーやレクタングルが表示されることもあります。というか、そっちの方が多い気もする。

横長のバナーも表示される

「インフィード広告」が表示されないと “広告感” がハンパないです。自然ではない。

スマホ表示でも確認してみました。

「インフィード広告」だけではなくレクタングルも表示されます。レクタングルが表示されるとやはり “広告感” がハンパないです。

「インフィード広告」も他の投稿記事とはサイズが違ってしまいました。

広告コード取得時の設定で「説明オフ」にすれば丁度いいサイズになりそうです。PC用とスマホ用でコードを貼り分けられる人は、スマホ用のコードは「説明オフ」にするといいですね。

とりあえず、ちゃんと端末のディスプレイサイズに合う広告が表示されました。しばらくはこの状態でいようと思います。

まとめ：素人でもできた

僕のブログでは以上の方法で設置しています。色んな記事を参考に辿り着きました。

どこかおかしい点があったらご指摘ください。

ちなみに僕はアドセンスでまだ「関連コンテンツ」が開放されていません。頑張らないと。