【はてなブログ】アドセンス広告の上に「スポンサーリンク」を表示する方法【コピペでOK】

こんにちは祐（＠yuu304810）です。

今回は『アドセンス広告の上に「スポンサーリンク」を表示する方法』について、解説していきます。

とくに難しい作業や、専門知識は必要なく、コピペするだけなので超簡単です。

ぜひ参考にしてみてください。

この記事で得られる情報

・スポンサーリンクを表示するメリット
・スポンサーリンクを表示する方法
・スポンサーリンクのカスタマイズ方法

アドセンス広告の上に「スポンサーリンク」を表示するメリット

お姉さん

アドセンス広告の上に「スポンサーリンク」を表示するメリットはあるのでしょうか？
 

とくにありませんが、アドセンスの規約に"広告とコンテンツが分かりやすく判断できるように"と、受け取れる文面が記載されていますので「ないよりはあるほうが良いのかな」と思います。 

祐

お姉さん

必ずしも記載する必要があるわけではないと？  

読者に誤解を与えるような配置でなければ、記載しなくても大丈夫らしいです。 

祐

詳しくはこちら▽

rakuski-diary.hatenablog.com

アドセンス広告の上に「スポンサーリンク」を表示する手順

今回は記事内で「スポンサーリンク」を表示させる場合の手順を解説しますが、ヘッダーや、フッター、どこでも同様の手順です。

①編集見たまま画面の隣の【HTML】を選択

②アドセンス広告のコードがある一行上に、これから紹介するコードを貼り付ける

「スポンサーリンク」を表示するコード

<p style="text-align: center; font-size: 80%; color: #a9a9a9;">スポンサーリンク</p>

上記のコードを、HTML内のアドセンス広告の上に貼り付けます。

このように表示されていれば完成です。

お姉さん

う〜ん。デザインが自分のブログに合いません・・・。
 

位置やサイズ、色を変えることができるので、合わせてカスタマイズ方法も紹介しておきますね。 

祐

<p style="text-align: center; font-size: 80%; color: #a9a9a9;">スポンサーリンク</p>

このコードは、赤色が位置、青色がサイズ、緑色が色を指定しています。

「スポンサーリンク」を左寄せにする方法

text-align: center;

上記のコードを削除すると、左寄せになります。

「スポンサーリンク」のサイズを変更する方法

font-size: 80%;

文字サイズをより小さくするなら数字を低く、大きくしたいなら高く変更します。

「スポンサーリンク」の色を変更する方法

color: #a9a9a9;

カラーコードの「♯a9a9a9」の部分を変更すれば、好みの色に変えられます。

お好みの色は下記のサイトから探してみてください▽

WEB色見本 原色大辞典 - HTMLカラーコード

カスタマイズする際の注意点

アドセンス広告のラベル表記は『スポンサーリンク』または『広告』のみ表示可能です。

『スポンサードリンク』や『Sponsored links』などの表記の仕方は許可されていませんので、注意してください。

少しでも参考になれば嬉しいです。

リンク

参考元：https://rakuski-diary.hatenablog.com/entry/adsense-sponsored-links-code