アキアドセンスのインフィード広告を、ストークの記事一覧に複数設置してみたツイートシェアはてブ2LINEPocket10こんにちは、アキです。アドセンスの広告ユニットをふと覗いてみたら新たに「インフィード広告」と「記事内広告」の2つの広告ユニットが追加されていました。このブログ(ストーク)でもさっそく「インフィード広告」を設置してみたのでその記録です。まとめ:素人でもできたインフィード広告とは「インフィード広告」はTwitterやFacebook等のSNSではよく見かけるタイプの広告です。投稿と投稿の間に表示されるため、広告がタイムラインに自然に入り込んでいるのが特徴。「インフィード広告」は他の投稿と同じような見た目に表示されるので、記事一覧の中に馴染みます。景観を損ねずに違和感なく広告を設置できるようになります。一部の人にだけベータ版として開放されていた2つの広告ユニットがついに解禁されたというわけです。今回は「インフィード広告」をこのブログ(ストーク)に設置していきたいと思います。「インフィード広告」のコード取得ブログテーマ「ストーク」での設置方法は公式のOPENCAGEさんの記事で解説されています。設置する広告は1つという方や、心配な方はそちらを参考にしてください。AdSense-インフィード広告を記事一覧の間に表示する方法丨OPENCAGE僕の場合は記事一覧に2つ(複数)の「インフィード広告」を設置したかったので少し違う方法になります。AdSenseにて新しい広告ユニットが追加されているのを確認してみてください。「インフィード広告」を選択すると次にフィードのデザインを選べます。自分のブログの記事一覧のレイアウトに合うデザインを選択しましょう。僕のブログではシンプルレイアウトで表示しているため「横の画像」を選択します。上部のタイトルテキストのみこの4種類から選べるので、サンプル表示やプレビュー画面でよく確認して自分のブログに合うデザインを決めましょう。カード型のレイアウトの場合は「上部の画像」を使用すると良さそうですね。好みのフィードのデザインを選択して設定を進めます。実際にどのように表示されるかプレビューで確認しながら設定ができます。サイズごとの表示デザインが確認できるので便利です。右メニューから編集できます。基本的にはデフォルトで良いと思いますが少し編集を加えました。6つの項目1『グローバルオプション』・・・フォント、背景、枠線などの設定ができます。広告を区別したい場合は、背景に色を付けてみるといいですね。デフォルトのままにしました。2『イメージ』・・・画像部分を左揃え右揃えと変更したり、画像サイズの調整ができるので自分のブログのレイアウトに合わせましょう。ストークのシンプルレイアウトの場合、画像サイズを「42%」くらいにしたら他の投稿のサムネイルとピッタリでした。3『見出し』・・・短いタイトルと長いタイトルの選択、フォントサイズの調整ができます。短いタイトルにフォントサイズを「16」にしました。(本文)部分のフォントサイズの調整ができます。説明自体の表示をオフにすることもできますが、デフォルトのままにしました。5『URL』・・・広告元のURL表記部分の調整ができます。デフォルトのままにしました。6『ボタン』・・・サイトへリンクするボタンのカラーが変更できますが、デフォルトのままにしました。調整が終わったら「保存してコードを取得」をクリック。広告コードが取得できるようになるので、コピーしましょう。次はこのコードをブログのテーマファイルに追加していきます。「ストーク」のテーマファイルの編集テーマファイルの編集は必ずバックアップをとった上で子テーマで行うことをおすすめします。FTPソフトを使用してファイルをダウンロードして、編集後に子テーマへアップロードする流れです。僕はFTPソフトは「Cyberduck」を使用します。手順はソフトに関係なく同じ流れになるのでご了承を。テーマファイルの種類ストークの記事一覧レイアウトは4種類あります。編集するテーマファイルも4種類あるので、自分のブログのレイアウトのテーマファイルを編集する必要があるので、間違えないように注意してください。「wp-content」→「themes」→「jstork」と進み、以下の4種類のテーマファイルを探します。目的のレイアウトを親テーマからダウンロードします。僕はシンプルレイアウトなので「parts_archive_simple.php」をダウンロードしてFTPソフトで編集していきます。編集の前に必ずバックアップをとっておいてください。parts_archive_simple.phpを開きます。?>を以下のコードに変更します。?>これで、記事一覧の中に2つの広告を設置できます。?>この2つの部分が広告を設置したい場所になります。「6番目」に設置したいので「6」と入力。僕の場合、記事一覧では記事が15件表示されます。5番目の次と10番目の次に広告を設置するために「6」「11」にしました。『記事5・広告・記事5・広告・記事5』となります。–>」の部分に先ほど取得してコピーしておいた広告コードを貼り付けます。設置場所ごとに広告コードを使い分けるために2種類のコードを使えます。-->の部分を追加していってください。追加後はこうなりました。編集後のテーマファイル以上でインフィード広告を2つ設置する編集は終わりです。ファイルを保存します。編集したテーマファイルをアップロード編集をして保存した「parts_archive_simple.php」を今度は子テーマへとアップロードします。親テーマへのアップロードだと、ストークのバージョンアップで消えてしまいます。アップロードが済んだら作業は完了です。広告コードを取得したばかりだと、設置が完了しても広告が表示されるまで少し時間がかかります。指定した場所が空欄になっていれば、設置は上手くできていることになります。待ったらインフィード広告が表示されました。画像サイズが投稿のサムネイルと幅がピッタリです。記事一覧に自然に紛れ込んでいます。注意点としては必ずしも「インフィード広告」が表示されるというわけではなく、横長バナーやレクタングルが表示されることもあります。いうか、そっちの方が多い気もする。