こんにちは、らいらいです!
アドセンスの審査が通ったはいいものの、広告の貼り方を調べるだけで丸1日取られてしまいました。
途中表示されなかったり、余白ができたり散々でした。
色んなサイトでやり方調べてみましたが、用語が難しかったり、CSSをいじる必要があったりハードルが高かったです。
やっっっと、ある程度満足いく形で設置できたので、ぼくのような完全初心者に向けて設定方法を公開します。
丸パクリすれば最低限の見れるものになります。
アドセンスを貼るベストな場所
この位置をそのまま丸パクリしてください。
【PC(パソコン)】
①記事タイトル下
728×90のビックバナー
②記事コンテンツ下
336×280のレクタングルを2枚(ダブルレクタングル)
③サイドバー
300×600のラージスカイスクレイバー
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/54cafe24a64b3cbeef2fbcf6f4ab7274.png?resize=728%2C903&ssl=1)
記事の途中にも広告を入れると良いといわれていますが、読みやすさを損なうのでぼくはおすすめしません。
このサイトではサイドバー広告は外しています。ここらへんは好みになります。
【SP(スマホ)】
①記事タイトル下
320×100のラージモバイルバナー
②記事コンテンツ下
自動サイズのレスポンシブ
③リード文下
自動サイズのレスポンシブ
![](https://i1.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/f9a1bcc3ef68cb323494896009f00e85.png?resize=399%2C971&ssl=1)
こちらも配置場所はPC版と似ています。
スマホ版は縦長なのでダブルレクタングルに向いておらず、②記事コンテンツ下はレスポンシブで設置します。
リード文の下(最初の見出しの上)に置くのも良いですが、ぼくはあくまでも記事がメインと考えているのでこのブログでは置いていません。
広告の作成
グーグルアドセンスのホームページに行きます。
「広告の設定」→「コンテンツ」→「広告のユニット」をクリック。
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/3771479ec05f5fe8a10887e9819a1f2e.png?resize=282%2C858&ssl=1)
画面に表示された「新しい広告ユニット」をクリック。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/ffb920efa3389e38d55cc93d62c0ee9e.png?resize=236%2C136&ssl=1)
広告の種類を選んでいきます。
![](https://i1.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/4cf62e1f23196323acfd428fa519e883.png?resize=728%2C590&ssl=1)
広告の種類
アドセンスには色んな種類の広告があります。
メインは「テキスト広告とディスプレイ広告」になります。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/954942cfd667dd5c6fc78777f133e88a.png?resize=728%2C274&ssl=1)
広告サイズも多種あります。
が、基本的に使うのは「推奨」に表示されている6種類の広告サイズです。(全て表示されない場合はスクロールしてください。)
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/86b486fc19c1a47bd48c33eb6f61e874.png?resize=728%2C186&ssl=1)
スマホ向きのものには携帯マークが付いています。
上の配置する場所に合わせて広告サイズを選んでください。
広告タイプが少ないうちは数字とかでも管理ができますが、広告タイプが増えるにつれて、わからなくなります。
スマホ用なのかパソコン用なのか、どの部分に配置する広告なのかで名前をつけるとわかりやすいです。
例:らいらいの場合
下の画像がぼくの広告ユニットの名前例です。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/b3155a99a6c95446d277145e932247a3.png?resize=728%2C291&ssl=1)
「スマホ用、パソコン用+配置場所」で名前をつけています。
アドセンスコードの配置の仕方
ワードプレスのダッシュボードから「外観」→「ウィジェット」を選択
テキストをドラッグ&ドロップで各項目に入れていきます。
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/1eede198b993dc3bf9cb9e3fdc03bc51.png?resize=728%2C388&ssl=1)
テキストのウィジェットをドラッグ&ドロップすることで該当のボックスの中に入り、編集することができるようになります。
タイトルは入力せず、テキストモードでアドセンスの広告コードを貼り付けます。
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/24fa7cf17b2a5ba10f2e14b4b956669c.png?resize=441%2C583&ssl=1)
ぼくは、タイトルを入力してしまったがためにトラブルに陥りました。
陥ったトラブル
全部解決するのに数時間かかってしまいましたが、全て単純な原因でした。
トラブル1:広告に見出しがついた
この場合「スマホ用 記事コンテンツ下 広告」というのが表示されてしまっています。
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/S__18030675.jpg?resize=576%2C1024&ssl=1)
解決1:ウィジェットでタイトルを入力してたのが原因でした。
【ダメな例】
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/897ab8f28d19d009b5f3ca1c4bba51a9.png?resize=433%2C584&ssl=1)
【正しい例】
![](https://i1.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/fbe2dc0aaf78a8cf14ba60f13d735c32.png?resize=435%2C582&ssl=1)
タイトルを削除したところ、広告の上に見出しが表示されることもなくなりました。
![](https://i1.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/S__18046984.jpg?resize=576%2C1024&ssl=1)
トラブル2:記事タイトル下の広告で無駄に余白ができた
グーグルアドセンスで表示されたコードをそのまま貼り付けたところ、SNSボタンと広告の間になぞの空白が!
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/6cf7eda1ed1d7193d7c8cb17e7e67fc5.png?resize=728%2C433&ssl=1)
解決2:貼り付けたアドセンスのコードが勝手に改行されているのが原因でした。
余白を全て削るように、改行を無くしたところ改善しました。
【ダメな例】
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/068b9dd443844877d8e80f92f84fe30a.png?resize=437%2C584&ssl=1)
【正しい例】
![](https://i0.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/48ce6cd3f389e2cd5174b8f5aebb2bd7.png?resize=434%2C581&ssl=1)
その結果、余白のないように配置することに成功。
![](https://i1.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/e7c8d1279733b0c0e4631fcb5d9eeb72.png?resize=728%2C397&ssl=1)
無事になぞの空白を消せました。
トラブル3:ダブルレクタリングの設定方法がわからない
調べるとストークなら簡単にできると書いてあるだけで具体的な方法が記載されてなく、かなりとまどいました。
解決した今では笑えますが、これに気づくのに2時間かかりました・・・
解決:「Quicktags」のタグを使うだけ。
ストーク利用者はほぼ必須で入れているプラグイン「Quicktags」の「☆【表示】 2カラム」のタグを入力するだけでした。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/b7a6907fc7bd70c396510b345712a7c4.png?resize=581%2C515&ssl=1)
[ ][ ]カラム1(左)[ ][ ]カラム2(右)[ ][ ]
実際に入れるとこんな感じです。
このカラム1(左)とカラム2(左)の部分にアドセンスのコードを入れるだけでした。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/10/f8e2ad123b9b0e0d0f9f7e946dbb8521.png?resize=438%2C592&ssl=1)
盲点でした。
![](https://i2.wp.com/naniga-nandemo.com/wp-content/uploads/2017/09/S__14647309.jpg?w=728&ssl=1)
まとめ
今日この設定をするためにほぼ丸一日使ってしまいました。
まぁ台風の影響もあって大雨で外出しなかったのでいいんですけどね。
これからブログのデザインいじりたいと考えていたのですが、アドセンスだけでここまで苦労していると先が思いやられます。
ただ、記事のほうが優先順位高いのでまだまだ遠い未来になりそうです笑。