FC2ブログにGoogleアドセンス広告を設置する方法

今回はFC2ブログにアドセンス広告を設置する方法を解説していきます。アドセンス以外の忍者admax等も要領は同じです。

FC2ブログの場合はPC版とスマートフォン版のテンプレートが別なのでPC版とスマートフォン版それぞれに広告を設置していく必要があります。そのため、2回に分けてアドセンスの設置方法を解説していきますね。

アドセンスの登録や審査が終わって広告コードの作成までできる前提で進めます。また、アドセンスの場合は前回の記事で注意点も書いておいたのでまだ読んでいない場合は先に読んでおく事をおすすめします。
FC2ブログにアドセンスを設置する時の注意点

設置場所としてはサイドバーと記事下に貼り付けていきます。HTMLを編集して広告を貼り付けるので毎回同じ場所に広告が表示されるようになります。

スポンサーリンク
アフィリエイトBパートナー募集

サイドバーにアドセンスを設置する

FC2ブログの管理画面のサイドメニューの中から「設定」⇒「プラグインの設定」をクリック。

fc2-ad-1

次にプラグインの設定という項目で「公式プラグイン追加」をクリック。

fc2-ad-2

プラグインがズラリ並んでいるのをちょっと下にスクロールして「拡張プラグイン」の「フリーエリア」を追加。

fc2-ad-3

フリーエリアの編集画面になるのでタイトルを「スポンサードリンク」「スポンサーリンク」に変更。アドセンスの場合は広告と分かるような表示にする必要があるため、このようなラベル表記が必要になります。

アドセンス以外はラベルは無くてもOK。それと必要であればコンテンツを中央寄せにします。

fc2-ad-4

次にその下の「フリーエリア内容」を記述する部分に広告のコードを貼り付けて「追加」をクリック。

fc2-ad-5

以上でサイドバーは完了。

FC2の記事下にアドセンス広告を設置する

今度は記事下に広告を表示させましょう。個別記事の記事の下に表示させるためにはHTMLを編集していきます。FC2ブログの管理画面のサイドメニューから「設定」⇒「テンプレートの設定」をクリック。

fc2-ad-6

「テンプレート管理」⇒適応中のテンプレートの「HTML・CSS」の編集をクリック。

fc2-ad-7

「HTML編集」と「CSS(スタイルシート)の編集」画面になりますが、まずはHTML編集をしていきます。

HTMLのソースコードがズラリ並んでいますが、その中から<%topentry_body>という部分を探します。探すときには「Ctrl」+「F」を押すと検索窓が出現するのでそれで検索すると一発。

この<%topentry_body>の下に次のコードを入れます。これはアドセンスの例。

<!--permanent_area-->
<div class="ad-bottom">
<p>スポンサーリンク</p>
ここに広告のコードを入れる
</div>
<!--/permanent_area-->

アドセンス以外はスポンサーリンクのラベルは無くてもいいかな。こんな感じ。

<!--permanent_area-->
<div class="ad-bottom">
ここに広告のコードを入れる
</div>
<!--/permanent_area-->

fc2-ad-8

説明しておくと「permanent_area」で囲んだ部分は個別記事の時だけ表示させる条件分岐です。つまりトップページには広告は表示されません。

トップページは記事一覧で複数の記事があるのでトップページにたくさんの広告を表示したくないため(アドセンスユニット広告は1ページに3つまでなので)。先ほど同様アドセンスの場合は「スポンサーリンク」とラベル表記もしておきます。

それから「div class=”ad-bottom”」というのは後からCSSで位置調整をするためにこの広告スペースに名前を付けておいたという訳。なくてもいいけどあると便利です。位置調整は後ほど。

ちなみにブログの記事作成に「追記」を利用している場合は、<%topentry_body>の下ではなくて<%topentry_more>というコードを検索してこの下に先ほどのコードを挿入するのがおすすめです。

広告表示の位置調整

先ほどはHTMLを編集して広告を挿入しましたが、今度はCSS(スタイルシート)で広告の位置調整をします。HTML編集画面を下にスクロールするとCSSの編集画面があります。

fc2-ad-9

ここにまたCSSのコードがズラリ書かれていますが一番下までスクロールして次の記述を追加。

.ad-bottom {
text-align : center;
margin-top : 20px;
margin-bottm : 20px;
}

広告を挿入した時にこの部分に「ad-bottom」と名づけていたのでこの部分に対してのコードです。

  • 広告とラベルを中央寄せ
  • 広告スペースの上に余白20px
  • 広告スペースの下に余白20px

という感じなので好きに数値は変更しておいて下さい。

とりあえず以上でPC版の広告挿入は完了ですが、この状態ではまだスマートフォン用のページには広告が表示されないので次回スマートフォン用のページにも広告を設置していきましょう。スマートフォンからの訪問者は多いし、クリック率も結構高いので設置を忘れないように。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

FC2ブログにGoogleアドセンス広告を設置する方法”に7件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    涙草様

    コメントありがとうございます。アドセンスの申請用に別のブログ(Seesaaブログ)を作成する事をおすすめします。そちらで申請し、審査が通れば他のブログ(FC2)にアドセンスを設置する事が可能です。

  2. 涙草

    現在fc2ブログで一日500件くらいのアクセスです。グーグルアドセンスをしてみたいと思ったのですが、fc2にはできないみたいです。
    どうしたらいいのか教えていただけませんか

  3. しげぞう 投稿作成者

    ゆっき〜☆様

    コメントありがとうございます。エキサイトブログは私は使った事がないので、守備範囲外なのですが、確か禁止タグがあってアドセンスは使えなかったような気がします。禁止タグに「script」があると使えませんので、一応調べて見る事をおすすめします。

  4. ゆっき〜☆

    とって〜も参考になりました!感謝です☆(^人^)
    ありがとうございました!m(__)m

    ところで。。。

    エキサイトブログのサイドバー(メモ帳)にアドセンスのコードを貼ることは、可能でしょうか〜

    お手すきの時に回答頂けますと幸いです。感謝です☆☆☆

  5. しげぞう 投稿作成者

    豚猫様

    わざわざコメントありがとうございます。非常に励みになります。今後もどうぞよろしくお願い致します。