はてなブログ無料プランのままでスマホ向けにgoogleアドセンスを貼る3つのステップ
こういうことをはてなで書いていいのかどうか分からないけれども、まあ、違反とか、へんにいじるわけではないのでまあいいでしょう。
そんなに難しいことではなく、あっという間にできるしとても簡単です。
ステップその1、はてなブログのデザインをレスポンシブなデザインにする。
と、いっても分からないですよね。はてなブログはブログのデザインをするときに、いくつかのデザインが選べます。
その中に、
“スマホで観た時でも、はてなブログ標準のスマホ対応画面にしなくても、そのままのデザインに近いデザインで表示できるように設定されたデザイン”
がある。
ってぐらいに覚えておいてください。
他のデザインだと、文字がとても小さくなってしまったり、全体的にはみ出してしまったりで、うまく表示されません。
ちなみにレスポンシブ対応のデザインは
ここを参考にしてください。
自分も使っているレスポンシブルーというデザインがお勧めです。
ステップその2、携帯向けのデザインを変更する。
レスポンシブデザインにしただけでは携帯向けのデザインは変わりません。
2つのデザインの設定をする必要があります。
まず一つ目、デザインの、スマホデザインの項目から、詳細設定でレスポンシブデザインの項目にチェックをいれます。
※こんなかんじ
次に、今度は、真ん中のスパナマークのボタンを押して、一番下にある{デザインCSS}と書いてあるところに
/* Responsive: yes */
と挿入します。
※これをしないとせっかくレスポンシブ対応にしても、スマートフォンでそのように表示されません!
※こんな感じ
以上で、サイトのレスポンシブ対応は終了です。
googleアドセンスの表示サイズを調整する。
せっかくサイト自身がスマホ対応になっても、そこに表示する広告の大きさが320以上だと、その幅にサイト自身の横幅が延びてしまい、やはり、うまくスマートフォンサイズで表示されません。
ですので、アドセンスの広告のサイズもそれに対応させる必要があります。
これは簡単で、広告のサイズを選ぶときに
レスポンシブのサイズを選んでください。
スマホ用、のマークが出ていますが、パソコンから観た時でも自動的にサイズ調整してくれるので、とりあえずサイズに迷ったらこれを貼ると良いと思います。
※これ