マイルドヤンキーにさよならを

おすすめの漫画、アニメ、ブログ、AV機器を紹介していきます

はてなブログ無料プランのままでスマホ向けにgoogleアドセンスを貼る3つのステップ

スポンサードリンク

こういうことをはてなで書いていいのかどうか分からないけれども、まあ、違反とか、へんにいじるわけではないのでまあいいでしょう。
そんなに難しいことではなく、あっという間にできるしとても簡単です。

ステップその1、はてなブログのデザインをレスポンシブなデザインにする。

と、いっても分からないですよね。はてなブログはブログのデザインをするときに、いくつかのデザインが選べます。
その中に、
スマホで観た時でも、はてなブログ標準のスマホ対応画面にしなくても、そのままのデザインに近いデザインで表示できるように設定されたデザイン”
がある。
ってぐらいに覚えておいてください。
他のデザインだと、文字がとても小さくなってしまったり、全体的にはみ出してしまったりで、うまく表示されません。


ちなみにレスポンシブ対応のデザインは

cards.hateblo.jp

ここを参考にしてください。
自分も使っているレスポンシブルーというデザインがお勧めです。

レスポンシブルー - テーマ ストア - はてなブログ

ステップその2、携帯向けのデザインを変更する。

レスポンシブデザインにしただけでは携帯向けのデザインは変わりません。
2つのデザインの設定をする必要があります。

まず一つ目、デザインの、スマホデザインの項目から、詳細設定でレスポンシブデザインの項目にチェックをいれます。

f:id:nectaris:20150831121649p:plain
※こんなかんじ



次に、今度は、真ん中のスパナマークのボタンを押して、一番下にある{デザインCSS}と書いてあるところに

/* Responsive: yes */

と挿入します。
※これをしないとせっかくレスポンシブ対応にしても、スマートフォンでそのように表示されません!


f:id:nectaris:20150831122431p:plain
※こんな感じ

以上で、サイトのレスポンシブ対応は終了です。

googleアドセンスの表示サイズを調整する。

せっかくサイト自身がスマホ対応になっても、そこに表示する広告の大きさが320以上だと、その幅にサイト自身の横幅が延びてしまい、やはり、うまくスマートフォンサイズで表示されません。
ですので、アドセンスの広告のサイズもそれに対応させる必要があります。

これは簡単で、広告のサイズを選ぶときに
レスポンシブのサイズを選んでください。
スマホ用、のマークが出ていますが、パソコンから観た時でも自動的にサイズ調整してくれるので、とりあえずサイズに迷ったらこれを貼ると良いと思います。


f:id:nectaris:20150831122557p:plain
※これ

以上の3つのステップで終わりです。

ね?簡単でしょう。


大体20分もかからずに、スマホ対応に変更できると思います。

ほか、アフィリエイトや、忍者admax を貼ることもできますので、デザインがかなり自由になります。



無料プランではてなブログをしている人は必ずやった方がいいですし、無料プランでなくてもデザインの可能性が増えるのでおすすめです。

スポンサードリンク