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

 

こんにちは祐(@yuu304810)です。

 

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

 

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

 

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

 

この記事で得られる情報

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

 

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

 

f:id:yuu304810:20210305065148p:plain
お姉さん
アドセンス広告の上に「スポンサーリンク」を表示するメリットはあるのでしょうか?
 
とくにありませんが、アドセンスの規約に"広告とコンテンツが分かりやすく判断できるように"と、受け取れる文面が記載されていますので「ないよりはあるほうが良いのかな」と思います。 
f:id:yuu304810:20210305065242p:plain
f:id:yuu304810:20210305065148p:plain
お姉さん
必ずしも記載する必要があるわけではないと?  
読者に誤解を与えるような配置でなければ、記載しなくても大丈夫らしいです。 
f:id:yuu304810:20210305065242p:plain

 

詳しくはこちら▽

 

rakuski-diary.hatenablog.com

 

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

 

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

 

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

 

f:id:yuu304810:20210816213327p:image

 

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

 

f:id:yuu304810:20210816222909p:image

 

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

 

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

 

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

 

f:id:yuu304810:20210816213920p:image

 

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

 

f:id:yuu304810:20210305065148p:plain
お姉さん
う〜ん。デザインが自分のブログに合いません・・・。
 
位置やサイズ、色を変えることができるので、合わせてカスタマイズ方法も紹介しておきますね。 
f:id:yuu304810:20210305065242p:plain

 

<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

トップへ戻る