「やっとAdSenseに合格できたから、とりあえずサイドバーに設置してみたい。WordPress初心者でも分かるように教えてください。」
こういった方向けの内容です。
アドセンスのサイドバーへの設置ですが、主にやるべきことは下記２つ。
- アドセンス広告コードを取得する
- サイドバーにコードを貼り付ける
上記の内容って初心者の方だと少し戸惑うかもですが、実際はコピペ操作ができれば十分できる内容になっているので安心して進めてみてください。
それでは記事にそってアドセンスのサイドバーへの設置を行なっていきましょう。
目次
サイドバーにAdSense広告を設置するための準備
まずは下準備から。AdSenseをサイドバーに設置するためには下記の２つの準備が必要になります。
- アドセンス広告のコードを取得：AdSense内での作業
- テキストウィジェットの追加：WordPress内での作業
「 コードの取得 ＝ 材料の入手 」「 ウィジェット追加 ＝ 場所の確保 」のための作業なんだなってくらいのイメージでOKです。
少しややこしく感じるかもですが、手順にそってやれば特に問題はないと思うので、それぞれについて詳しく解説していきます。
準備①：AdSense広告のコードを取得する
まずは広告を設置するための、アドセンスコードの取得ですね。
アドセンス広告って実はいくつか種類があるんですが、サイドバーへの設置に関しては「ディスプレイ広告」という種類のモノを使っていきます。
広告の種類について詳しくしりたい方は、以下の記事を参考にしてみてください。
»参考：【ブログ収益UP】アドセンス広告の種類とおすすめ配置を解説
というわけで詳しい取得方法を手順にそって解説します。
- STEP.1コードを取得
Google AdSenseにログインし、[広告 ＞ 広告ユニットごと]を選択します。
ここで[ディスプレイ広告]をクリックし、作業を進めていきます。
- STEP.2広告ユニットの作成
広告ユニットの名前を入力し[作成]をクリックします。
（他に設定したい項目があれば別途行ってもいいですが、ぶっちゃけデフォルトで問題なしです。）
- STEP.3完成した広告コードをコピー
広告ユニットを作成すると、広告コードが表示されます。
このコードは後ほど使うので、コピーして保存しておきましょう。
ここまでくれば[完了]ボタンをクリックして、アドセンスを閉じてもOKです。
次はワードプレス内の準備を行なっていきます。
準備②：テキストウィジェットの追加
続いてコードを貼り付けるための場所の確保ですね。
この手のコードは「テキストウィジェット」というモノを使用することで貼り付けが可能となるので、サイドバーにこれを追加する感じの作業内容です。
これはワードプレスの管理画面での作業となるため、自分のサイトの管理画面にログインした状態で進めていきましょう。
- STEP.1ウィジェットの管理画面へ
まずはワードプレス管理画面から[外観 ＞ ウィジェット]を選択し、ウィジェットの管理画面へ移動します。
- STEP.2テキストをサイドバーへ
[テキスト]を選択し、サイドバーを選んだ状態で[ウィジェットを追加]をクリックすることで、サイドバーにテキストウィジェットが追加されます。
方法はテーマによって違うかもですが、ドラッグ＆ドロップでも追加可能です。
※ちなみに上下の位置関係ですが、こちらもドラッグ＆ドロップで変更できます。
これでコードを入力する準備も整いました。
ここまで来ると「なんだ後はさっきのコード貼るだけか」と思うかもしれませんが、注意点もあるので焦る気持ちを抑えてもう少しお付き合いください。
サイドバーにAdSense広告を設置する：注意点あり
ここから実際にアドセンス広告を設置していくわけですが、ここには２つ注意しておくべきポイントがあります。
- テキストモードに切り替え貼り付けること
- スポンサーリンクという文面を入れること
「よく分からない」という方もいると思いますが、手順通りやれば問題なしなので、ひとまず知識としてなんとなく覚えておいてください。
一応理由を解説しておくと、、、
- テキストモードで貼り付ける理由 → ビジュアルモードで入力するとコードが壊れる
- スポンサーリンクの文面が必要な理由 → 規約でそうなっているから
上記の感じです。要するに規約に違反せずに、しっかり広告が表示される状態にしておきましょうってことです。
ここから紹介する設置方法はこの２点に対応した方法となっているので、順番に進めていってください。
AdSense広告コードの貼り付け方
- STEP.1テキストモードへ切り替え
サイドバーのテキストウィジェットを開き、「ビジュアル/テキスト」のタブを[テキスト]に切り替えます。
- STEP.2スポンサーリンクの文字を入力
スポンサーリンクの文字を表示させるために、下記のコードを記述します。
<div style=”text-align: right;”><span style=”color: #808080; font-size: small;”>スポンサーリンク</span></div>
あとからカスタマイズもできますが、ここではひとまず「グレーの小文字で右寄り」に表示するためのコードとなっています。
- STEP.3アドセンス広告コードを設置
先ほどのコードの下に、コピーしておいたアドセンスコードを貼り付けます。
あとは「保存」をクリックすれば作業完了です。
スポンサーリンクの表示はカスタマイズ可能です
今回の解説では「グレーの文字・小さめのフォント・右寄り」で表示していますが、コードを書き換えることでカスタマイズは可能です。
変更したい場合は下記の部分をカスタマイズしてください。
- 文字色：color: #808080;
- フォントサイズ：font-size: small;
- 文字配置：text-align: right;
少しカスタマイズ例をあげておきますね。
- 文字色を青にする：color: #808080;→color: #4169e1;
- フォントを大きく：font-size: small;→font-size: large;
- 文字配置を中央に：text-align: right;→text-align: center;
上記の感じで、対象となるコードだけ書き換えておけばOKです。
カスタマイズする場合は上記のように、文字色がオレンジの部分だけを変更するようにしてください。
スペースを消したり「;」が消えたりすると反映されなくなる場合もあるので、ここには十分注意しつつカスタマイズを行ってみてください。
というわけで、今回の内容は以上となります。
コメントを残す