気になる!

おすすめ商品レビュー、ユニクロ情報、はてなブログ運営の奮闘記録など。

【Googleアドセンス】「スポンサーリンク」文字を表示させる方法(中央に配置・色・サイズ変更)

Googleアドセンスのスポンサーリンク表示コード

今回ははてなブログでアドセンス広告の上に「スポンサーリンク」という文字を表示させる方法(コード)を紹介します!

 

「スポンサーリンク」の文字の、

  • 配置
  • サイズ

などが簡単に設定できますよ!

 

ちなみに当はてなブログでは、以前はすべての広告に「スポンサーリンク」の文字を表示させていましたが、今では一部だけに減らしました。

というのも、広告とブログのコンテンツが区別しやすければ、「スポンサーリンク」の表示はいらないようなのです!

詳しくはこちら。

rakuski-diary.hatenablog.com

 

 

 

 

「スポンサーリンク」の文字を表示させる方法

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

当はてなブログでは、下記のコードを使い、アドセンスの広告の上に「スポンサーリンク」の文字を表示させています。

 

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

 

はてなブログにアドセンス広告を設置する方法

例えば、記事上にアドセンス広告を設置する場合。

デザイン→カスタマイズ→記事→「記事上」内に、上記のコードと、アドセンスの広告コードを貼り付けます。

はてなブログ記事上にスポンサーリンク表記入りのアドセンス広告コードを設置する画像

 

これで【変更を保存する】をクリックすれば、記事上に「スポンサーリンク」の文字が表示されたアドセンス広告が表示されます!

はてなブログの記事上にスポンサーリンクの文字入りアドセンス広告を設置した画像

 

上の画像のように、「スポンサーリンク」の文字が、

  • 広告の中央に配置
  • サイズは小さめ
  • 色はグレー

になって表示さます。

 

このコードの意味が分かれば、自分の好みに合わせて、「スポンサーリンク」の文字を表示させることができます!

 

それでは、「スポンサーリンク」表示コードの意味を紹介します。 

 

「スポンサーリンク」表示コードの意味 

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

 

このコードは、スポンサーリンクという文字の位置サイズ、を指定しています。

 

コードの構造としては、表示させたい文字「スポンサーリンク」を「pとp」ではさみ、その文字の「style(=位置・サイズ・色)」を指定する、という形です。

 

私も細かいことは分かりませんが、指定する値を変えれば、文字のサイズや色を簡単に変更できます!

それでは、コードの中身を「style」ごとに確認します。

 

文字の位置(中央)

text-align: center;

 

上記の部分では、文字を中央寄せに指定しています。

このコードを削除すると、「スポンサーリンク」の文字は左寄せになるはずです。

 

文字のサイズ

font-size: 80%;

 

上記の部分では、文字のサイズを小さく指定しています。 

文字サイズを変えたくなければ、このコードは削除してください。

文字サイズより小さくするなら、90%、75%など、に変更し、

文字サイズを大きくするなら、110%、120%などに変更します。

 

文字の色

color: #a9a9a9;

 

上記の部分では、文字色を「darkgray」に指定しています。

このコードを削除すると、「スポンサーリンク」の文字色は黒色になるはずです。

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

 

▼色のコードが見つかります!

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

 

ラベル表記

スポンサーリンク

 

Googleアドセンスでは「スポンサーリンク」または「広告」の2種類だけを表示できます。

「スポンサードリンク」や「Sponsored links」などのラベル表記は許可されていません。

 

広告のラベル表示
AdSense の広告ユニットには、「広告」と「スポンサーリンク」のいずれかのラベルを表示できます。他の種類のラベルは、現時点では許可されません。

引用元:広告のラベル表示 - AdSense ヘルプ

 

スポンサーリンク

 

 

まとめ:はてなブログにアドセンス広告の「スポンサーリンク」を表示させる方法

以上、はてなブログにアドセンス広告の「スポンサーリンク」を表示させる方法を紹介しました!

 

▼はてなブログにアドセンス広告に「スポンサーリンク」を表示させるコード

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

 

▼コードの設置方法

「スポンサーリンク」を表示させるコードを、アドセンス広告コードの上の行に貼る。

 

▼コードの意味

「スポンサーリンク」の文字の位置、サイズ、色のstyleを指定。

 

コードの意味が分かれば、「スポンサーリンク」の文字を好みに合わせて調節できますよ!

 

【注意】

私はブログ運営初心者のため、このコードが絶対に正しいという自信はありません。

それでも当はてなブログでは問題なく表示できていますし、超少額ながら収益も発生できているので、問題はなさそうです!

一応、参考程度にしてみてください!

 

▼参考ページ(分かりやすく大変勉強になりました。)

本文(pタグ)のスタイル|HTMLに直接CSS(スタイルシート)を指定する方法 | WebGet!

 

 

rakuski-diary.hatenablog.com

 

rakuski-diary.hatenablog.com