baserCMSサイトにGoogle AdSenseを設置したので、自分でも忘れないようにメモしておきます。テーマによっても違うのかもしれませんが、これはスムーズに完了しました。
テーマ「ratio_3_2」に設置した作業方法です。
別のテーマでいつか試したら、また報告しますね♪
アドセンスを設置したい箇所とサイズ
アドセンスを設置したいのは、右サイドバーの上部と、各ブログ記事の本文下。
あとは、トップページのフッターに貼ってみたい！
つまり、1つのページにつき、2個表示したいということです。
使用する広告は、スマホでも表示がされる300×250のレクタングル広告です。
今回設置するサイトのテーマはratio_3_2ですが、このテーマはレスポンシブで、どんな画面の幅でも300px以下にはならないように作られています。
そのため、この幅300pxのレクタングル広告を入れておくと、ぴったりハマるんですね。
ウィジェットを利用して設置
baserCMSサイトは、ダッシュボードにログインした状態で公開したサイトを見ると、ウィジェットの編集ボタンやシステムナビなど、すぐ編集できるような表示がされています。ログインしていない状態だと他のサイトと同じ見栄えですね。
そのため、ダッシュボードからウィジェット編集に進んでやる方法よりも、公開済みのサイト上からボタンをクリックした方がわかりやすいです。
では、まずは右サイドバーとフッターに、ウィジェットを使ってアドセンスを設置します。
管理者ダッシュボードにまずはログイン。
公開済みのサイトを表示して、そこから設定をします。
- 右サイドバーのウィジェット編集ボタンをクリックします。
（上の写真は、すでに設置後のため、広告が表示されています） - ウィジェットエリア編集の「ホーム::中段右」のページが開きます。
- 左の利用できるウィジェットから、テキストを右の利用中のウィジェットにドラッグ。
- 設定をクリックして、下記画像のようにアドセンスの取得したコードを貼り付けます。
私の場合は、下のウィジェットとの間隔が詰まってしまったのが気になり、最後に も入れています。 は、半角スペースのHTMLタグです。
ただ改行を入れただけでは、反映されなかったため、この半角スペースの を入れてここに入力がある！と表すことで、1行空白行が入れられるようになります。
下の「利用する」にチェックを入れて、保存します。
トップページのフッター部分も、ウィジェット編集ボタンから同じ手順で行います。
ブログ記事下の設定はsingle.phpファイルに追加
他のWPでも、記事したに広告を設置しているので、同じようにしたいと思いましたが・・・
これをトップページと同じようにフッターに設置すると、ちょっと記事と離れてしまいます。間にSNSのアイコンなども入りますし。
すぐ下に・・・となると、直接ファイルに記載する方法になりますね。
編集するのは、single.phpというファイルです。
- まずはファイルを探しますから、今度は管理者ダッシュボードのテーマ管理へ。
- 現在のテーマの写真下の青いボタン（管理）をクリック。
- レイアウトテンプレート 一覧が表示されるので、コンテンツ一覧をクリック。
- Blog/の左側の「開く」ボタンをクリック。
- default/のの左側の「開く」ボタンをクリック。
すると、ファイルが4つ表示されています。この中にsingle.phpがありますね。
位置で言うと、/app/webroot/theme/ratio_3_2/Blog/default/
ここにsingle.phpはあります。
では、左の編集ボタンを押しましょう。
どの部分に貼ればいいのか・・・っていうのが問題なのだけど・・・
<!– /.entry-contents-body –></div>と、<!– /.entry-contents –></div>の間。
<!– /.entry-contents-body –></div>というのは、その上にpostContentという言葉があるように、自分で投稿したブログ記事本文のことですね。それはここまで！と表していることになります。
そして、<!– /.entry-contents –></div>というのは、コンテンツここまで！を表していると思うので、記事のあとのコンテンツ内というと、この位置かと思いました。たぶん・・・
私は独学なので、正しいかどうかなど保証できません！！
でも、ちゃんと表示されているのでたぶん大丈夫でしょう（笑）たぶん・・・
記事下のアドセンス広告を中央揃えする方法
single.phpにアドセンスのコードを貼れば、当然ながら左寄せになります。
ツイッターやシェアのアイコンが左寄せですぐ下に来るので、そのままでも違和感はありません。
でも、アイキャッチは中央揃えだし、広告も中央に入れたい！と思ったら、先ほどの記載したコードをPタグを使ってはさめば中央になります。
<p style=”text-align: center;”>
コード
</p>
本当なら、cssに追加して、それを<div class=”●●”>のように書くのがいいのでしょうが、初心者には敷居が高いので、中央になればいいじゃん！という考えです（笑）
↓↓中央になっているでしょう？↓↓
猫をさわってビリッと静電気！我が家の静電気対策
