はてなブログ無料版でアフィリエイト！スマホ版でアドセンス広告を表示させる方法

はてなブログの無料版でアドセンスを表示したい、というとき、PC表示はあまり難しくありません。一方、スマホ表示に関しては、ちょっとやっかいです。そもそもはてなブログ無料版では、スマホで自分の広告が表示できるスペースが制限されているためです。

それでも不可能ではないので、はてなブログ無料版のスマホ版でアドセンス広告を表示する方法についてまとめておきます。

はてなブログ無料版のスマホ表示広告枠

はてなブログ無料版のスマホ表示では、デフォルトで自分の広告を表示できるスペースが、とても制限されています。

通常、広告や自由表記のスペースは、デザインから設定しますが、スマホ表示に関しては、自分でいじれるスペースはほとんどありません。

無料版のスマホ表示に関しては、PC版では編集できた、タイトル下も記事上下もフッターも、HMTLコードを挿入することができないんです。

ですので、どうしても無料版のスマホでアドセンス広告を表示させたいという時は、スマホでPCと同じHTMLを表示させるように設定します。

はてな無料版のスマホでPCと同じ広告を表示させる

f:id:hanagardener:20180320175447j:plain

デザインからスマホ編集を選択し、記事のカスタマイズで、「PCと同じHTMLを表示する」にチェックを入れると、PC表示で挿入した広告を表示させることができます。

こうすると、PC表示の設定で、挿入したアドセンス広告がスマホでも表示されることになります。

しかし、ここで注意したいのは、はてなブログ無料版のスマホ表示では、すでにはてな側の強制アドセンスが表示されているということです。

アドセンスのペナルティに気を付ける

アドセンスは広告表示に関して、規制を緩めつつありますが、それでもいくつか留意すべきことがあります。特にスマホ表示では、アドセンス広告が連続して表示されたり、スマホの画面がアドセンス広告で占められてしまうような表示方法は、グーグルから警告を受ける危険があります。

ですので、はてなブログ無料版でアドセンス広告コードを挿入するときには、はてな側のアドセンス広告と連続しないように気を付ける必要があります。

記事タイトル下のアドセンス広告

スマホ表示では、記事タイトル下にもともとはてな側のアドセンスが表示されています。ですので、自分のアドセンス広告をここに表示させると、アドセンスが2つ連続して表示されることになります。

このため、記事タイトル下(記事上)には、アドセンス以外の広告を表示させるか、自分の広告と、はてなの広告の間にコンテンツを挟みこむ必要があります。

記事下のアドセンス広告

記事下については、自分の広告とはてなのアドセンスの間には、SNSシェアボタンや関連記事が表示されることが多いので、そのままアドセンス広告が連続するということはないようです。ただし、近い位置にアドセンス広告が並ぶので、必ずしも安全というわけではありません。

とはいっても、記事下は最もクリック率が高いので、自分のアドセンス広告を表示させたいですよね。自分のアドセンスとはてなのアドセンスの間に、何かしらのコンテンツを挟むようにするのが一番良いと思います。

なお、デフォルトでは、自分のアドセンス広告は、以下のような位置で表示されます。

記事
SNSシェアボタン
はてなのアドセンス広告
関連記事
自分のアドセンス広告

これを記事直下に自分のアドセンスを表示させるには、以下のコードを挿入してください。

<div id="my-footer">

※ここに自分のアドセンス広告コードを挿入

</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

「※ここに自分のアドセンス広告コードを挿入」を自分のアドセンス広告コードと差し替えて、デザイン→PC(スパナアイコン)→記事下に挿入します。

そうすると、以下の順番で表示されます。