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

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

FC2ブログにアドセンス広告を貼る方法を解説する前に幾つか注意点があるのでまずは先に注意点を紹介しておきます。

特に利用規約に厳しいのがGoogleアドセンスなので配信停止やアカウント停止という状態にならないように注意が必要です。

FC2ブログでアドセンスを利用する時の注意点

Googleアドセンスは利用規約が非常に厳しくてFC2ブログとは相性がいいとは言えません（個人的感想）。広告の貼り方やブログの内容がまずいとすぐに広告の配信が停止してしまうのがアドセンス。

FC2ブログの場合は1ヶ月ブログを更新しないと強制的に大きな広告が出てくるようになります（しかも結構大きいやつ）。この大きな広告がアドセンス的にはポリシー違反になる場合があります。

おそらく理由は「コンテンツを押し下げるレイアウト」もしくは強制的に表示される広告が「アドセンス広告」だからだと思われます。どちらにしても1ヶ月ブログを放置するとアドセンス配信停止の警告を受ける確率が非常に高いです。

という事なので更新をやめてしまうようなブログは向きません。

完成したら放置というスタイルにしたいなら最初から独自ドメイン取得してWordPress使う事をおすすめします。

独自ドメインの取得方法やレンタルサーバーの選び方、WordPressの始め方、設定、カスタマイズなどは全て図解で記事にしてます！

• ⇒WordPressを始めるのに必要な物や料金
• ⇒初心者でも迷わないWordPressの始め方や使い方まとめ！

FC2ブログでアドセンスを設置する方法は2通り

FC2でアドセンス広告を設置する場合は

• 広告をテンプレートに埋め込む
• アドセンス自動広告を利用する

という2通りです。

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

WordPressへアドセンス設置に関してはphpファイルの編集やCSSの編集が必要になりますので、HTMLやCSSのようなものは苦手って方は「アドセンスの自動広告」の設置がおすすめです。

アドセンスの自動広告はサイトへコード１つ加えるだけでアドセンス広告の設置場所や数をGoogleにお任せする事ができますし、自動で最適化されますので面倒な作業が必要ありません。

⇒【図解】Googleアドセンスの自動広告とは？設定・設置と使い方

今回は広告をテンプレートに埋め込む方法について紹介していきます。

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

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

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

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

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

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

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

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

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

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

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

「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-->

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

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

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

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

広告表示の位置調整

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

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

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

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

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

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

とりあえず以上でPC版の広告挿入は完了ですが、この状態ではまだスマートフォン用のページには広告が表示されないので次回スマートフォン用のページにも広告を設置していきます。

FC2ブログのスマホページにアドセンスを設置する

まずFC2のスマートフォン用のページをみると大体どのテンプレートもこんな感じになっていると思うのでよく確認しておきましょう。最初から幾つかの広告が設置されていますが、これは消すと規約違反になってしまいます。

消す事ができるのはオーバーレイ広告（スクロールしても画面の下にずっと居座る広告）だけ。オーバーレイ広告の削除は後で解説します。

広告を挿入する場所の候補

• 「ブログタイトル下にある広告」の上
• 個別記事の「記事タイトルの下」
• 個別記事の記事下
• 注目記事や日記ランキングの項目の下

一応候補としてはこんな感じです。ここで幾つか注意点があります。「ブログタイトル下」や「記事タイトル下」に広告を貼る場合には高さの低い広告を選択する事。高さのある広告を設置するとスクロールしないと記事までたどり着きません。

コンテンツを押し下げる広告の配置は検索順位的にも良くない影響を与える可能性がありますし、Googleアドセンスでは警告を受ける場合もあります。

それからGoogleアドセンスの場合はもう１つ重要な約束があって、ユニット広告は３つまで貼れますが、スマートフォンでは、1つの表示可能なページ（1ビュー）に表示できるAdSense の広告ユニットは１つのみ。

つまりスクロールしない状態の画面（1ビュー）で2つの広告が見えるとアウト。そのため、アドセンスをスマートフォンに設置する場合は１つ１つの広告を離れた場所に設置する事が重要です。

という訳なので以上の点に注意して事前に設置場所を自分で決めておきましょう。

先にオーバーレイ広告を削除しておく

FC2のスマートフォンページではオーバーレイ広告だけは削除しても良いことになっているので広告を設置する前にこのオーバーレイ広告を削除します。既に削除している場合はここは飛ばしてOK。

FC2の管理画面のサイドメニューから「設定」⇒「テンプレートの設定」をクリック。

「スマートフォン用」の「テンプレート管理」をクリック。

すると現在使用しているスマートフォン用のテンプレートのHTMLが編集できる画面になります。

そしたらこのHTMLの中から<%ad_overlay>という部分を探します。「Ctrl」+「F」を押すと検索窓が出てくるので<%ad_overlay>を検索すると一発。

これがオーバーレイ広告を表示させる部分なので<%ad_overlay>を削除。以上でオーバーレイ広告は削除完了。

ブログタイトルの下に広告を設置する

上から順番にいきましょう。まずはブログのタイトル下。既にここには広告が設置されていますが、この初期広告の上に広告を設置する方法です。

前述したようにこの部分に広告を設置するなら高さの低い広告を選択する方が無難。320×50くらいかな。

FC2ブログの管理画面⇒「設定」「テンプレート設定」⇒「スマートフォン用テンプレート管理」と進み、スマートフォン用のHTMLから<%ad>という部分を探します。「Ctrl」+「F」で検索すると早いです。この<%ad>というのが初期状態でブログタイトル下に設置されている広告です。

そのため、この<%ad>の部分の直前に広告を設置すると初期広告の上に表示できますし、<%ad>の直後に広告を設置すると初期広告の下に広告を設置する事ができます。今回は初期広告の上に設置してみる事にしましょう。

探したコード<%ad>の直後に広告コードを入れます。

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

一応アドセンス用にラベル「スポンサーリンク」入れていますが、アドセンス以外の広告であれば「ｐ」タグの部分は削除してもOK。

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

アドセンス以外はこれでOK。一応後からCSSで位置調整ができるように広告スペースにクラス名「smart-ad」を付けています。位置調整は後ほど。こんな感じになればOKです。

個別記事のタイトル下に広告を設置する

次は個別記事のタイトル下、つまり記事本文の一番上に広告を設置する方法。ここも高さのある広告はおすすめしません。貼り付けは自分でよく考えて判断して下さい。要領は一緒でスマートフォンのHTMLから個別記事を出力する部分を探してその直前に広告を設置します。

「設定」⇒「テンプレートの設定」⇒「スマートフォン用テンプレート管理」でスマートフォン用のHTMLから次の部分を探す。「Ctrl」+「F」で検索すると早いです。

<div class="entry_body">

この部分が個別記事の本文を表示させる部分になるのでこのコードの直前に広告を設置しておきましょう。

アドセンスならスポンサーリンクというラベルを付けておきます。

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

アドセンス以外ならスポンサードリンクは外してこれで大丈夫です。

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

こんな感じになるはず。一応ここも広告スペースに「smart-ad」と名前を付けておき後でCSSで位置調整をします。

記事下に広告を設置する

記事下はクリックされやすい場所ですし、320×250のようなちょっと大きめの広告がおすすめ。

これまで説明してきた部分と同じように「設定」⇒「テンプレート設定」⇒「スマートフォン用テンプレート管理」でスマートフォンのHTMLの画面。スマートフォン用のHTMLから次の部分を探します。これも「Ctrl」+「F」で検索。

<!--/more-->

この部分が「/more」つまり追記を表示するスペースの終わり部分です。この部分の直後に広告を設置する事で追記部分を表示した後（記事の終わり）に広告を設置できます。アドセンスならこれ。

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

アドセンス以外ならスポンサーリンクを外してこれでOK。

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

こんな感じになったはずです。

フッターに広告を設置する

最後にページの一番下の方に広告を設置する場合の説明。現状ではスマートフォンページでは記事の下に「注目記事」とか「日記ランキング」のようなコンテンツがあるのでその下に広告を設置します。

「スマートフォン用のテンプレート管理」⇒HTMLの編集画面で次の記述を探します。「Ctrl」+「F」で検索。

<div id="footer_menu">

この記述がフッター（ページの一番下の情報）を書く部分なので探したコードの直前に広告を設置します。アドセンスならこれ。

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

アドセンス以外ならスポンサードリンクを外してこれでOK。

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

こんな感じになります。

スマートフォンページの一番下の検索窓の下に広告が表示されるはずです。

最後に位置調整をする

さて、設置した全ての広告スペースにクラス名「smart-ad」という名前を付けたのでスタイルシート（CSS）で全部一括で細かい位置調整をします。広告１つ１つ個別に位置調整をする場合はそれぞれのクラス名を変更してCSSで調整もできます。

スマートフォン用のテンプレート管理でHTMLの画面になっていると思いますが、そのHTMLの下にスタイルシート編集という画面があります。

このスタイルシートを編集していきます。ここにCSSがズラリ並んでいますが、一番下までスクロールして次の記述を追加。

.smart-ad {
text-align : center;
margin-top : 10px;
margin-bottom : 10px;}

• 広告をスペースを中央寄せ（center）
• 広告スペースの上に余白10px（margin-top）
• 広告スペースの下に余白10px（margin-bottom）

という感じになるので、余白は自分で数値を変更しておきましょう。

以上で設置は完了ですが、最初にも書いたようにアドセンス広告の設置は慎重に決める事が大事です。。

以上FC2ブログにアドセンスを設置する方法でした。

• ⇒Googleアドセンスの始め方。申請や審査から設置までのまとめ
• ⇒アフィリエイトの始め方と稼ぐ方法のまとめ