WordPressにAdsenseとAnalytics

アクセス解析とリスティング広告の設定

せっかくブログを新設したので、WordPressにAnalyticsAdsenseも設定しよう。

Google Analyticsは、サイトへのアクセスを詳細に分析してくれる無料サービス。
Google Adsenseは、広告を表示することで収入が得られるサービス。
両方とも、GoogleのサイトからJavaScriptのコードを取得して、自分のサイトに貼り込まなければならない。

フッタにGoogle Analyticsを貼り込む

Analyticsのコードは、HTMLの最後にある、の前に貼り込む。
WordPressでは、テーマファイル内のフッター・テンプレート内に挿入する。

管理画面に入って、メニューバーの「表示」→「テーマエディタ」を選び、右サイドメニューから「フッター」を選ぶ。
の直前にコードを貼り込んで、「ファイルを更新」をクリックする。

screenshot_01.jpg

ヘッダにGoogle Adsenseを貼り込む

Adsenseの広告は、タイトルロゴの下に728×90ドットのテキスト広告を入れることにする。
(Adsenseは、記事中に紛れ込ませるよりも、広告であることをしっかり明示したほうが、収益が向上する。)

テーマファイルの「ヘッダー」を選んで、<div id=“header”>ブロックの終わりの</div>の直前にコードを貼り込む。

screenshot_03.jpg

さて、実際のページを見ると……。

screenshot_05.jpg

表示場所は間違いないが、はみ出している。
こういうときは、慌てず、CSSを調べて、修正する。

今は、Firefoxのおかげで、こういった作業も効率よく行える。
FireBugをインストールしたFirefoxで該当ページを開き、FireBugのペインを表示させる。

「HTML」タブを選んで、HTMLの階層構造を開いていくと、<body> → <div id=“header”> の高さ(height)はCSSの167行目以降に定義されていることがわかる。

screenshot_06.jpg

そこで、テーマファイルの「スタイルシート」を選んで、いったん行番号を表示できるテキストエディタ(ここではJEdit X)にコピー。

169行目を

height:75px;

height:150px;

と書き換える。

続いて、「WEBプログラミング、MAC、IPOD…」という説明書きの下に15pxの余白を作る。
#header div.descriptionの定義の最後(191行目)に、

margin-bottom:15px;

を追加する。

screenshot_09.jpg

これを再び、テーマファイルの「スタイルシート」の編集画面に書き込む(元のソースを完全に置き換えるよ)。

「ファイルを更新」をクリックして、ページを確認すると、きっちり広告が収まっている。

screenshot_10.jpg

関連記事

投稿者:

ともゆき@zubapita

ともゆき@zubapita

作ったモノ 雑誌:月刊アスキー(デスク)、アスキー.PC(副編集長)、インターネットアスキー(編集長)、アスキーPCエクスプローラー(編集長) Webサイト:東京グルメ/ライブドアグルメ、映画を語ろう、本が好き 著書:「Twitter 使いこなし術」「facebook 使いこなし術」 最近は、株式会社ブックウォーカーにて、「BWインディーズ」をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>