シェリーさんち

妊活から妊娠へ アラサー主婦のブログ

アドセンスのリンク広告を横並びから縦並びにカスタマイズする方法

f:id:family-blog:20190211231538j:plain

こんにちは、シェリーです!

このブログは、グーグルアドセンスの広告を掲載しています。アドセンス広告の一つにリンク広告というものがあります。

自動的に大きさを調節してくれるレスポンシブタイプのリンク広告をこのブログに貼り付けたところ、リンク広告が横並び(一行)で表示されたので、HTMLを使って縦並び(複数行)で表示するように修正しました。

この記事では、カスタマイズした経緯と方法について解説します。

 

リンク広告

f:id:family-blog:20190206142535j:plain
リンク広告は、グーグルアドセンスの広告の一種です。上記にも貼っていますが、記事の内容に関連のあるキーワードが羅列された文字だけの広告で、他の画像付きの広告に比べてシンプルです。

2回クリックされないと収益が発生しないというデメリットもありますが、ミスクリックの可能性が低くなるため、クリックされた時の収益が他の広告よりも高くなる傾向があります。

リンク広告の作成方法

まず、グーグルアドセンスの「広告ユニット」から「+新しい広告ユニット」をクリックします。次に「テキスト広告とディスプレイ広告」を選択します。

f:id:family-blog:20190206071425p:plain

広告サイズの「推奨」をクリックすると、バナーが表示されるので一番下の「リンク広告」を選択します。

f:id:family-blog:20190206113325p:plain 

「レスポンシブリンク」を選択します。レスポンシブリンクは、PCやスマホなどの表示する媒体によって広告の大きさを自動で調節してくれるタイプの広告です。

f:id:family-blog:20190206113343p:plain

横一列に表示された広告

上記手順の後は自分で分かるように名前をつけ、一番下の「名前をつけコードを取得」をクリックすれば完了です。のはずが・・・記事内に貼り付けたところ、以下のように横並び(一行)で表示されていました。 

f:id:family-blog:20190206210654p:plain

横並びでも十分リンク広告としての機能は果たしているのですが、私には「リンク広告と言えば縦並び(複数の行がある)」というイメージがあったので、カスタマイズしてみることにしました。

Before→After(スマホ)

f:id:family-blog:20190206140858j:plain

カスタマイズ方法を解説する前に、スマホとPCそれぞれのBefore Afterのスクリーンショットを公開します!

まずは、このブログのアクセスの大半を占めるスマホのBefore→Afterです。

Before(スマホ)

f:id:family-blog:20190206210548j:plain

After(スマホ)

f:id:family-blog:20190206210621j:plain

キーワードの表示が、横並び(一行)から縦並び(二行)に変わりました。文字は大きく目立つようになりました。また戻すかもしれませんが、現在のところ希望通りの仕上がりになりました。

Before→After(PC)

f:id:family-blog:20190206141055j:plain

Before(PC)

f:id:family-blog:20190206210654p:plain

After(PC)

f:id:family-blog:20190206210710p:plain

PCでは、横並び(一行)に3つのキーワードが表示されていましたが、2列×2行で4個のキーワードが表示されるようになりました。

広告コードに一手間加えて解決!

f:id:family-blog:20190206164123j:plain

広告コードを取得すると"display:block"という箇所が見つかると思います。そこに;height:(高さ)pxを加えることによって行を増やすことができます。完成形はこのようになります。"display:block;height:(高さ)px"

行数ごとの高さは以下になります。

  • 1行:"display:block;height: 50px"
  • 2行:"display:block;height: 100px"
  • 3行:"display:block;height: 150px"
  • 4行:"display:block;height: 200px"
  • 5行:"display:block;height: 250px"

50px増やすと1行増えます。私のブログは、2行(100px) にしています。スマホとPCのキーワードは以下のように表示されます。

  • 1行:スマホ1個、PC2個(1行×2)
  • 2行:スマホ2個、PC4個(2行×2)
  • 3行:スマホ3個、PC6個(3行×2)
  • 4行:スマホ4個、PC8個(4行×2)
  • 5行:スマホ5個、PC10個(5行×2)

HTMLは かっけいさん のブログを参考にさせていただきました。ありがとうございます!

kaxtukei.com

まとめ

これまでサイドバーやヘッダーに設置していたリンク広告ですが(サイドバーやヘッダーなら横並び(一行)に表示されなかったため)、これからは本文に貼りつけることにします。

縦並び(複数行)にしてから文字が大きくなり広告が見やすくなりました。また元に戻すかもしれませんが、今はとても気に入っています。