UsマイページMyPage/Login買い物カゴCart新着お知らせSTORK19テーマをアップデートしました。オープンケージAdSense-インフィード広告を記事一覧の間に表示する方法ツイート24シェアはてブ12LINEPocket34AdSenseにてインフィード広告が解禁されました。いくつかお問い合わせをいただきましたので、弊社テーマ(アルバトロス、ハミングバード、ストーク)にてインフィード広告を記事一覧の間に表示させたい場合のカスタマイズ方法をご紹介させていただきます。今回はサンプルとして、記事一覧の4番目に広告を表示させる方法です。今回の記事は、弊社テーマ(アルバトロス、ハミングバード、ストーク)をご利用中の方向けのカスタマイズ記事です。その他のテーマの場合はちょっと手順などが違う場合がありますので、その点はあらかじめご了承ください。インフィード広告用のコードを作成するまずはインフィード広告用のコードを作成しましょう。ここは通常のAdSense広告を取得する方法とほとんどかわりません。新しい広告ユニットを作成まずはAdSenseのページより「新しい広告ユニット」を作成します。次に広告の種類を選びます。今回は「インフィード広告」を選択しましょう。次に広告のデザインを選ぶ続いて広告のデザインを選びます。上部のタイトルテキストのみの4種類がありますが、ここはお好みで。今回のサンプルはストークテーマの、シンプルレイアウトの中に設置するので、そのデザインに近い「横の画像」タイプを選びました。広告ユニットのデザイン調整をするインフィード広告では、細かな広告のデザイン調整ができます。デザイン調整に入る前に、広告ユニットに名前をつけておきましょう。後からどこに使っている広告かがわかりやすいような名前をつけておくのが良いかと思います。最初にわかりやすい名前をつけておく背景色を変える広告の背景色をかえてみたり。背景色をかえてみるフォントサイズを変える見出しのフォントサイズを変更してみたり。今回のサンプルでは背景色と見出しのフォントサイズのみ変更してみました。デザイン調整は他にも様々なことができるようなので、このあたりは色々と試してみてください。広告コードを取得するここまででいよいよコードが完成しました。保存してコードを取得というボタンを押すと、今作成した広告用のコードが表示されます。これで一旦広告コードの作成が終わりました。このコードは後々使うのですが、今はまだ使わないので画面を表示したままにしておくか、テキストファイルなどに広告コードを保存しておきましょう。この後、このコードを設置するためにテーマ内のPHPファイルのカスタマイズに入ります。テーマファイルのカスタマイズさて、次は取得したインフィード広告のコードをサイトに表示していきます。広告を表示するにはテーマファイルのカスタマイズが必要です。今回の例では記事一覧の「シンプルレイアウト」のものにインフィード広告を設置するので、テーマファイル内のparts_archive_simple.phpを編集していきます。※他のレイアウト(カード、マガジン)の編集方法は記事の下の方をご覧ください。ちなみにレイアウトによって編集するファイルが違っていて、シンプル型...parts_archive_simple.phpビッグ型...parts_archive_big.phpカード型...parts_archive_card.phpマガジン型...parts_archive_magazine.phpとなっています。ご自身が使っているレイアウトに合わせて、編集するファイルを探してください。スマホでの広告表示について(2018/03/05追記)カード型...parts_archive_card.phpマガジン型...parts_archive_magazine.php上記2種類のレイアウトにてインフィード広告を設置する場合、スマートフォンでは横幅が狭すぎて対応する広告がなく、広告が表示されず空白となる可能性があります。parts_archive_simple.phpの編集FTPソフトなどを使ってファイルをダウンロードしてきます。FTPソフトについては下記記事なども参考にしてください。テーマの編集】)などからも編集は可能ですが、編集しづらかったりバックアップが取りづらいなどの制約がありますので、出来る限りFTPソフトを使った編集に慣れておくことをおすすめします。ダウンロードしたファイルをエディタ(CotEditorや秀丸)などで開き、編集します。通常、parts_archive_simple.phpを開くと下記のような状態となっています。?>上記コードよりも上の部分に、このコードを記載します。'1';?>こちらは記事一覧の何番目に表示するかを操作しますので、4という数値を変更することで表示位置を変更可能です。?>以下のコードを記載します。--><?php}$ads_infeed_count++;?>追加する位置を間違っていなければ、下記画像のような状態になっていると思います。?>というコードの前後に設置していることを覚えておいてください。-->の箇所に、最初にAdSenseの管理画面でつくったインフィード広告のコードを設置します。▼画像でみるとこんな感じです。広告コードも追加した様子(スクリーンショット)はい。ここまでで広告の設置は完了です。後はうまくできているかどうか確認。広告表示の確認ここまでできたら実際の表示を確認します。うまく設置できていたら下の画像のように空白ができていると思います。これは広告が表示される予定の場所で、最初設置したときには30分ほど表示されないタイミングがあるので、気長にまってみましょう。ある程度時間がたったらブラウザを再読込などすれば確認できると思います。▼こんな感じで!スマートフォンでもいい感じに表示されていますね。ひとつ注意点として背景色や見出しの大きさを編集して設置したこのインフィード広告。インフィード対応した広告がない場合は、通常のレクタングルなどの広告が表示されることもあるようです。補足:他のレイアウトの場合のカスタマイズ例カード型レイアウトの場合ハミングバード、ストークの場合カード型レイアウトが選べますがそちらのレイアウトに設置する場合は下記のようなコードになりますね。rel="boo..........〜〜以下略〜〜カード型レイアウトのインフィード広告例memoうーん。カード型レイアウトの場合は、広告の高さがうまくあわないので、ちょっとなじませるのは難しいかもしれませんね。マガジン型レイアウトの場合ストーク固有のレイアウトである、マガジン型のレイアウトの場合は以下のようなコードになります。参考になりましたら幸いです。子テーマ広告この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート24シェアはてブ12LINEPocket34feedly21NEWバージョン!究極のモバイルファーストWPテーマ「STORK19」ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。テーマ詳細をみるいさぎよく、シンプル。WPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。テーマ詳細をみる【初心者向け】メインメニュー(カスタムメニュー)の作成方法WordPressで記事ページを分割したい場合の操作方法(nextpageタグ)RECOMMENDこちらの記事も人気です。JSの丸いリストアイコンを非表示にするテーマ編集2017.1.15ハミングバードでコンテンツ背景を白色に変更するCSSカスタマイズテーマ編集2018.3.22スワローテーマにてheaderをグラデーションにして雰囲気を変えるカスタ...テーマ編集2016.2.22投稿ページにてアイキャッチにキャプションを表示する方法テーマ編集2016.1.15アルバトロスのグローバルメニューの日本語を大きくする方法テーマ編集2016.7.28WPストークのトップページをワンカラムにするカスタマイズテーマ編集2017.10.27AdSenseの「記事内広告」を設置する方法ABOUTこの記事をかいた人オープンケージブロガー・アフィリエイター向けのWordPressテーマを制作しています。POSTこのライターの最新記事STORK19のお知らせ2020.2.12STORK19テーマをアップデートしました。(Version1.2.0)アルバトロスのお知らせ2020.1.29アルバトロステーマをアップデートしました。(Version1.2.9)ハミングバードのお知らせ2020.1.29ハミングバードテーマをアップデートしました。(Version1.2.11)旧ストークのお知らせ2020.1.28ストークテーマをアップデートしました。最新記事STORK19テーマをアップデートしました。UsマイページMyPage/Login買い物カゴCart最新テーマ「STORK19」NEWバージョン!ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。