あなたの興味を広げる話題を。

【FC2ブログ】TOPページ記事一覧の中にAdSense広告を挿入する方法

2019年06月21日
Google Adsense (アドセンス)

ウェブサイトのTOPページ記事一覧の中に設置された Google Adsense のイメージ画像

FC2ブロガーのMです。今は、WebサイトブログTOPページカード式と呼ばれるグリッド系デザインを用いるのが主流となりつつあります。

FC2ブログも、要約タイプのテンプレートが数多く発表されていますし、ボクの運営するブログ『ゆうらりHappySmile』も然り。

さらに、Google AdSenseを導入しているブロガーさん達の間で流行っているのが、TOPページの記事一覧の中にカスタマイズしたインフィード広告を挿入すること。

たしかに、3つおきに広告を絡ませたりすれば、閲覧者のクリック率も高くなりますよね。

ところが、WordPressなどとは違い、FC2ブログでそれをやるのはちょっと難しいのです。なぜなら、FC2ブログの場合は、記事を繰り返し表示させる「topentry」という独自変数を使っているからなんです。

FC2ブログのテンプレートも、TOPページにはこのtopentryを使って構築されています。したがって、繰り返し表示される記事一覧の中から一部分を指定してアドセンスなどの広告要素を挿入することは出来ないんです。

だから、TOPページにアドセンス広告を貼る場合は、ブログヘッダー辺りかプラグインに限られてしまいます。とても残念ですよね。

しかし、調べているうちに、FC2ブログの独自変数のタグ 「topentry」で最初に表示される記事の下に広告を挿入する、唯一とも言える方法を発見。実際に試してみたところ、コピペ超簡単に実装することが出来たので、ご紹介しようと思います。

スポンサードリンク

コピペで簡単!FC2ブログのTOPページの記事一覧にAdSense(インフィード)広告を挿入する方法

ボクが参考にさせて頂いた記事はこちら。

>>最初の記事下に広告などのコンテンツを表示する方法 : FC2ブログ - Paroday

導入手順

【注意】必ず事前にテンプレートのバックアップをおこなって下さい。

①自分の使用するテンプレートの編集画面を開き、htmlの所でTOPページの記事一覧表示の箇所(<!--topentry-->~<!--/topentry-->)を探します。

<!--topentry-->の前後に以下のコードをコピペします。

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq1/4-->
<div id="eqfirst">


ここにアドセンス広告などのコードを入れる

</div>
<script type="text/javascript"><!--
function eqSortBefore(e){var f=document.getElementById('eqfirst'),
s=document.getElementById('eqsort'+e);if(f){if(e){f.id='eqlast';}
if(s){f.parentNode.insertBefore(s,f);}}}
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->


<!--topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq2/4-->
<div id="eqsort<%topentry_no>">
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

②続いて、記事繰り返し表示の終了部分にあたる<!--/topentry-->の前後にも以下のコードをコピペ。

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq3/4-->
</div><script type="text/javascript"><!--
eqSortBefore('<%topentry_no>');
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->


<!--/topentry-->

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--eq4/4-->
<script type="text/javascript"><!--
eqSortBefore('z');
--></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

③最後はCSSスタイルシート)を。以下のコードをコピペ。marginのところは、ご自身のブログに合わせて微調整して下さい。

#eqfirst {display: none;}
#eqfirst,#eqlast {
 display: block;
 margin: 15px 8px 20px; /* 余白: 上部 左右 下部 */
}

基本的には、たったこれだけ。簡単でしたね!興味がおありの方はぜひ試してみて下さい。

スポンサードリンク
関連記事
未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5852)
┣  胃がんブログ (247)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5540)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (33)
┗  がん治療のクラウドファンディング (10)
胃がん History (83)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (25)
がん のこと(ガン情報全般) (441)
┣  がんブログ (246)
┗  がんニュース (195)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (132)
┣  Amazonセール (2)
┗  📱kindleセール (129)
おもしろグッズ (9)
今日のエッセイ (73)
ニュース・芸能・話題 (662)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (45)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (113)
┗  その他、簡単レシピなど (39)
ブログ (207)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (172)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (26)
┗  ファッション (1)
iPhone の使い方・アプリなど (27)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (26)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (4)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)