はてなブログ無料版ならアドセンス広告の配置はこれが正解だと思う(最終章)

広告

はてなブログ無料版ならアドセンス広告の配置はこれが正解だと思う(序章)の続きです。

え~と…何だったかな。

もう一回読み返してみる(笑)

gattolibero.hatenablog.com

そうだ、Google AdSense(グーグルアドセンス)の広告を記事下に2個とも配置するのがベストかなっていうところまで話したんだ。

で、今日の話は、一手間加えることで普通に記事下に配置するよりも更に良くなるよ、っていう話ね。

 普通にアドセンス広告を記事下に配置すると「記事の直下」ではなく「ソーシャルボタンやはてなアドセンスの下」に設置されてしまう問題を解決する

広告を配置する最もベストな位置は、ブログの記事本文を読み終わった直後に視線に入る場所、すなわち記事の数行下(直下)だと思うわけですよ。

ところがここには「はてなスター」っていうのかな、あとは「はてなブックマーク」や「Facebook」「twitter」などのソーシャルボタンが配置されています。

さらにその下には、はてなが自前で用意しておいたアドセンス広告も陣取ってるし。

結局、普通に自分のアドセンス広告を「記事下」に配置しようと思ったら、それら先客たちの下に貼り付けることになりますので、かなり「思ってたのと違う」ことになります。

 

通常であれば配置の順番は、こういう感じ。

記事本文おわり。

スター

SNSボタン

はてな自前アドセンス

ここに自分のアドセンス広告を設置

 

 

で、この順番をこうしたい。

記事本文おわり。

ここに自分のアドセンス広告を設置

スター

SNSボタン

はてな自前アドセンス

 

こうすれば、記事を読み終わった人の視界にスムーズにアドちゃんが入ってきます。

 

こんなことできんの?

はい、出来るみたいです。

chipspd.hatenadiary.jp

 

超~ありがたいです。

さっそく私もやってみました。

「ダッシュボード」→「デザイン」→「カスタマイズ(スパナのアイコン)」→「記事」

と進みます。

「記事」をちょっと下にスクロールすると「記事上下のカスタマイズ」というのがあるので「記事下」の記入欄に、以下のコードを貼り付けるだけ。

あっけないほど簡単

ありがたいわ~。

ちなみに、このHTMLコードをブログ内に表示できるWEB上のサービス「GitHub Gist」の使い方も「チップの日常」様から学ばせていただきました。

「チップの日常」、読者登録必須ですな。

chipspd.hatenadiary.jp

 

はい、ということでかなりイメージ通りになりましたね。

 

あとは前回の話「スマホで表示した時にもアドセンス広告が連続で表示されないために広告と広告の間に何らかの自前コンテンツを挟む」事が出来ればなおさら良しって話です。

私の場合は、とりあえず応急処置的にレクタングル(300x250)の広告と同じサイズの画像を貼って置くことにしました。

広告と同じサイズだと、2個並んだ時に割と綺麗に見えますからね。

ちゃちゃっと数分で作った画像なんですが気に入っています。

余白を上手く生かしたまるで日本画のような美(笑)

はてなブログ無料版ならアドセンス広告の配置はこれが正解だと思う(序章)

で、この画像に関する記事のURLをリンクしておきました。

(画像をクリックすると

はてなブログ無料版ならアドセンス広告の配置はこれが正解だと思う(序章)

に飛びます。)

このへんは、今後またいろいろと変更するかもしれません。

別に画像じゃなくて文字でもイイですしね。

画像にしても、GIFだっけ?何か動きのある絵でも面白そうですしね。

まぁそのへんはいずれ。

 

実をいうと、このアドセンス広告2個と自前の画像の配置、なかなか大変でした。

綺麗に見えるように配置したくて、泣きながら何度も微調整しました。

 

実はアドセンス広告の内の一つに「レスポンシブ」を選択しておりまして。

レスポンシブはスマホで見た時やPCで見た時、タブレットで見た時など、広告のサイズが変化するので、微妙にしっくりいかないんですよね。

「あれ?何でそこに余白できちゃうかな~!?」みたいな。

縦幅が同じでも横幅が微妙に狭い広告とかもあるので、表示される広告次第ではスッキリしない感じになってしまうんです。

レスポンシブを上にして、レクタングルを下に配置したかったんですが、どうもしっくりいってないように見えるので、結局レスポンシブを下に持って行くことになりました。

私はHTMLとかCSSに関する基本的な知識が全然ないので、「中央揃え」とか「フロート」とか「フロート解除」とか、良く訳が分かってないんですよね。

非推奨の方法でもいいや!って若干やけくそです。

 

本当は、お手本になるような優等生的なCSSが書けるのであれば、「こんな感じでCSSで微調整すれば余白がきれいに見えるよ!参考にしてね!」って言いたいんですけどね(笑)

 

さて、「Google AdSense(グーグルアドセンス)の広告の設置場所」と「はてなブログ無料版」の折り合いをどうつけるか?という話を2回にわたってお伝えしてきましたが、いかがでしたでしょうか。

何か皆さんの心に残ったものはあったでしょうか(笑)

「全米が泣いた」的な。

 

それでは、最近私が愛用しているリラクゼーションミュージックを聴きながらお別れです。

またお会いしましょう。世界ふしぎ発見!

尺が6時間なので、イヤというほどリラックスできます(笑)