今回ははてなブログでアドセンス広告の上に「スポンサーリンク」という文字を表示させる方法(コード)を紹介します!
「スポンサーリンク」の文字の、
- 配置
- サイズ
- 色
などが簡単に設定できますよ!
ちなみに当はてなブログでは、以前はすべての広告に「スポンサーリンク」の文字を表示させていましたが、今では一部だけに減らしました。
というのも、広告とブログのコンテンツが区別しやすければ、「スポンサーリンク」の表示はいらないようなのです!
詳しくはこちら。
「スポンサーリンク」の文字を表示させる方法
「スポンサーリンク」表示コード
当はてなブログでは、下記のコードを使い、アドセンスの広告の上に「スポンサーリンク」の文字を表示させています。
<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」の箇所を変更すれば、好みの色に変えられます。
▼色のコードが見つかります!
ラベル表記
スポンサーリンク
Googleアドセンスでは「スポンサーリンク」または「広告」の2種類だけを表示できます。
「スポンサードリンク」や「Sponsored links」などのラベル表記は許可されていません。
広告のラベル表示
AdSense の広告ユニットには、「広告」と「スポンサーリンク」のいずれかのラベルを表示できます。他の種類のラベルは、現時点では許可されません。
スポンサーリンク
まとめ:はてなブログにアドセンス広告の「スポンサーリンク」を表示させる方法
以上、はてなブログにアドセンス広告の「スポンサーリンク」を表示させる方法を紹介しました!
▼はてなブログにアドセンス広告に「スポンサーリンク」を表示させるコード
<p style="text-align: center; font-size: 80%; color: #a9a9a9;">スポンサーリンク</p>
▼コードの設置方法
「スポンサーリンク」を表示させるコードを、アドセンス広告コードの上の行に貼る。
▼コードの意味
「スポンサーリンク」の文字の位置、サイズ、色のstyleを指定。
コードの意味が分かれば、「スポンサーリンク」の文字を好みに合わせて調節できますよ!
【注意】
私はブログ運営初心者のため、このコードが絶対に正しいという自信はありません。
それでも当はてなブログでは問題なく表示できていますし、超少額ながら収益も発生できているので、問題はなさそうです!
一応、参考程度にしてみてください!
▼参考ページ(分かりやすく大変勉強になりました。)
本文(pタグ)のスタイル|HTMLに直接CSS(スタイルシート)を指定する方法 | WebGet!