ノマドのブログ

場所や時間にとらわれない働き方、ブログ運営やアフィリエイト、ライティングテクニックなどなど。

はてなブログ無料版でアフィリエイト!スマホ版で自分の広告を表示させる方法

はてなブログ無料版でアフィリエイトをする方法について書いています。

 

はてなブログの無料版でアフィリエイト広告を表示するのは、PC版では比較的容易にできることは、前回の記事に書きました。

 

スポンサーリンク

 

 

nomado.hatenadiary.com

 

はてなブログ無料版スマホでは広告表示不可能

はてなブログ無料版でアフィリエイトするとき、スマホ表示に関しては、一筋縄ではいきません。PC版では表示が可能だった箇所も、スマホ表示については、ことごとく編集することができないためです。

 

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

 

ですので、デザインをいじって自分の広告を表示させるのためには、裏技が必要ということになります。その方法とは、PC版と同じHTMLをスマホでも表示させるという方法です。

 

*ここではアドセンス公告ではなく、ASPや楽天アフィリエイトで取得した広告コードのことをお話ししています。

 

はてなブログ無料版スマホでPC版のHTMLを表示させる

f:id:hanagardener:20180316194621j:plain

スマホ表示ではデザインから広告を貼るのは不可能といいましたが、スマホ表示でPCと同じHTMLを表示させることは可能です。

 

PC表示で記事上と記事下に挿入したHTMLコード(広告コード)を、そのままスマホに反映するという方法で、広告を表示するわけです。

 

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


ただし、このとき、スマホでははてな側の強制広告と並んで表示されるので、かなりうっとうしくなります。また、PCで広告コードを挿入するときに、スマホ表示のことも考えながら広告サイズを選ぶ必要があります。

 

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

スマホであまりにも多くの広告が並んでしまうと、ユーザーにとっては不便ですし、結果的に検索エンジンからの評価を下げてしまうことになりかねません。それでも、広告表示なしでは、はてなブログからの収益が発生しなくなるので、何とかしてアフィリエイト広告は表示させたいですよね。

 

最近はどんなブログでもスマホからのアクセスが多いので、ここで稼げないのは致命的になってしまいます。それで、スマホで広告表示するには結局どんな方法があるのか考えてみましたが、以下の2つになるのかな、と思います。

 

1.うっとうしくても広告を表示する

とにかくスマホでもPC表示と同じ広告を表示させるという方法です。スマホ表示のデザイン設定で「PCと同じHTMLを表示する」にチェックを入れることで可能になります。

 

ただしこの方法でいじれるのは、記事上と記事下だけです。

 

記事上の広告はスマホ表示の場合、記事タイトル下にはてな側のアドセンス公告と並んで表示されることになります。PC版の設定で、幅の広い広告サイズを選んでしまうと、スマホ表示では広告がはみ出てしまいますので注意が必要です。


記事下の場合は、記事下のSNSボタンの下にはてなの広告が表示され、その下に関連記事があれば関連記事が表示され、自分の広告はさらにその下に表示されます。

 

  1. 記事
  2. SNSシェアボタン
  3. はてなの広告
  4. 関連記事
  5. 自分の広告


関連記事の表示は、デザインのスマホ表示で「関連記事を記事下に表示する」にチェックが入っている場合に表示されます。

 

前回の記事にも書いていますが、以下のコードを利用してブログ記事直下に自分の広告を表示させる設定にしておくと、スマホでも同様に表示されます。

<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>

 

つまり記事と広告の順番はこんな感じ。

  1. 記事
  2. 自分の広告
  3. SNSシェアボタン
  4. はてなの広告
  5. 関連記事

 

この時アドセンス公告を設定すると、広告が並んでしまうのでペナルティを受ける危険性が高くなります。A8.netなどで取得した広告コードは問題ありません。

 

 

2.一つずつの記事内に広告タグを挿入する

これは、とても地道で面倒くさい方法ですが、一番確実に広告を挿入することができます。一つずつの記事内に、自分の広告タグを挿入して投稿する方法です。


この方法なら、記事内の好きなところに広告を挿入できます。

 

ただし、PCとスマホで表示させる広告は同じものになりますので、スマホ表示でもはみ出さないように300x250以下のサイズか、レスポンスサイズで貼り付ける必要があります。


さらに、記事タイトル下と、記事下には、はてなの広告が表示されますので、それも考慮したうえで広告を貼る場所を考える必要があります。

 

この方法の欠点は、いざ広告を貼ってしまった後に、広告位置やサイズを変更しようと思ったとき、いちいち一つずつの記事を編集しなおさなくてはいけないことです。ブログ内の記事が増えてきたときには、かなりたいへんな作業になります。

 

しかし、一方で、自分が広告を表示させたい記事にのみ広告表示させることができるというメリットもありますので、小規模ブログを作りたい人にとっては、やりやすいと感じるかもしれません。

 

 

 

nomado.hatenadiary.com

 

 

 

nomado.hatenadiary.com

 

 

nomado.hatenadiary.com

 

 

スポンサーリンク