【Google AdSense】広告でレイアウトは崩したくない【Blogger手動設定】
いつの間にかGoogle AdSenseの審査を通過していた
以前、BloggerからGoogle AdSenseに申し込んだものの、コロナ禍の影響で審査が中断されていることを記事にしました。
・BloggerからGoogle AdSenseに申し込んだ
その後、長らく何の音沙汰もなかったため、申し込んだことをほとんど忘れていましたが、いつもの間にか審査を通過して、広告配信が可能になっていました。
申し込んだのが2020年の5月、審査を通過したのが2021年11月ですから、1年半かかったことになります。コロナ禍で審査の開始がこれだけ遅れたのか、審査自体がこれだけかかったのか、どちらなのかはわかりません。いずれにせよ、気長に待つしかないということですね。1年半も待てねーよ、という人も多いでしょうけど。
さらに、このメールが来ていることに気づいたのは、今年の2月になってからでした。このメールが来たのは、汎兮堂関連サイトの管理のためのGoogleアカウントで、普段プライベートで使っているアカウントではないので、メールチェックを怠っていたのです。
2月に審査通過に気付いてから、アドセンスの設定をしなければと思いつつ、何だかんだで先送りしていましたが、今回ようやく重い腰を上げて設定をおこなったので、例のごとく備忘録代わりにまとめておきます。
自動広告ではレイアウトが崩れてしまう
アドセンスの設定で一番楽なのは自動広告機能を使用する方法です。広告の場所やサイズ、形など自動的に最適なものに設定して表示してくれる機能で、Googleもこれを推奨しています。なので、まずはこれを試してみます。
まず最初に、BloggerのブログとAdSenseのアカウントとを接続しないといけません。Bloggerの管理画面の「収益」ページを開き、「AdSenseをリンク」ボタンをクリックします。
これで接続が完了です。広告の掲載の設定は初期設定ですでに「自動広告」になっています。ただ、ご存知の通り僕のサイトはBloggerの標準テンプレートではなくSmartテンプレートを使用しているため、「現在のテーマでは自動広告が適切に動作しない可能性があります」という注意喚起がなされています。僕自身もそれを危惧しているわけですが、とにかく実際に自動広告を表示させてみなければ、どうなるかわかりません。
自動広告を表示させてみるために、管理画面の「レイアウト」ページを開き、メインブロックに「AdSense」ガジェットを追加します。その際、「AdSenseの設定」で広告サイズは「ラージビッグバナー」を選択しました。
レイアウトの変更を保存し、実際にサイトを表示させてみると、こうなります。
ヘッダー下(ブログ本文上)の広告は問題なさそうです。個人的には画面下端のアンカー広告が好きではないのですが、レイアウト的にはこれも問題ありません。
問題なのは、記事リストの中に挿入される広告です。
広告がその直下の記事リンクとくっついてしまっています。これは問題です。レイアウトの統一性が失われてしまいました。おそらく、Bloggerが提供している標準のテンプレートであれば、レイアウトの統一性を損なうことなく記事リストの間に自然に広告が挿入されるのだと思いますが、Smartテンプレートの場合はこうなってしまうのでしょう。
僕としては、このレイアウトの崩れは容認できないので、自動広告は利用しないことにしました。
AdSenseコードを手動でサイトに追加する
自動広告を利用しないとなると、AdSenseのコードを取得して、それをHTML/JavaScriptガジェットとして手動でブログに追加するしかありません。
まず、管理画面の「収益」ページに戻って、広告の掲載に関する設定を「自動広告」から「広告ユニット」に変更します。
AdSenseのコードを取得するために、「収益を表示」をクリックして自分のGoogle AdSenseの管理ページを開きます。
「広告」のサマリーページを開き、「広告ユニットごと」のタブをクリックします。
「新しい広告ユニット」の中の「ディスプレイ広告」をクリックして、広告ユニット作成ページを開き、広告ユニット名を入力し、広告サイズは「レスポンシブ」を選択した上で、「作成」ボタンをクリックします。
広告ユニットが作成され、コードが表示されるので、このコードをコピーします。
なお、次回以降、すでに作成済みの広告ユニットのコードをコピーしたい場合は、「既存の広告ユニット」のリストの中の該当するユニットの「<>」をクリックすれば、コードが表示されます。
コードが取得できたら、次はBloggerの管理画面に戻り、「レイアウト」ページを開き、メインブロックに「HTML/JavaScript」ガジェットを追加します。「AdSense」ブロックではないので注意。
ガジェット設定画面が開くので、コンテンツの部分にさきほどコピーした広告コードを貼り付けます。タイトルは入力してもしなくてもかまいませんが、広告であることを明確に表示したほうがよいと思うので「広告」と入力しました。
これでヘッダー下の部分に、レスポンシブサイズの広告が表示されるようになりますが、このままでは、その下に続く部分と近すぎるので、広告ガジェットの下にもう一つ「HTML/JavaScript」ガジェットを追加し、その内容を改行2行とします。これで広告ガジェットの下にスペースができ、レイアウトが整います。
サイドバーとブログ本文下にも広告を掲載する
あとは、同様のやり方で、「サイドバー」ブロックにもディスプレイ広告ガジェットを追加しました。ただし、サイドブロックの場合は、広告ガジェットの下にスペース用のガジェットを作成する必要はありません。
また、メインブロックの一番下(ブログ本文の下の部分)には、Multiplex広告ユニットを追加しました。複数の広告がグリッド形式で表示されるユニットです。新しい広告ユニットを作成する際に、「ディスプレイ広告」ではなく「Multiplex広告ユニット」を選択して、コードを取得し、あとは、これまでと同様に、「HTML/JavaScript」ガジェットのコンテンツ部分にこのコードを貼り付けるだけです。なお、レイアウトを整えるため、広告ガジェットの上にスペースをあけるための改行ガジェットを挿入しました。
とりあえず、これでAdSense広告の掲載設定は完了しました。なるべくサイト閲覧者の邪魔にならないような設定にしたつもりですが、今後さらに様子を見ながら改良していきたいと思います。
コメント
0 件のコメント :
コメントを投稿