無料版ユーザーがレスポンシブなテーマにしてレスポンシブなAdSenseを貼ってみた

こんにちは、京終です。まだProにはしていません。

ふと、「はてなブログのスマホ版（デフォルト）にはアドセンスの広告貼れないけど、レスポンシブなテーマにしたら、自分のアドセンスが2つ貼れるやん！」という浅はかな考えが思い浮かび、レスポンシブテーマに変えることにしました。

ブログのレスポンシブ化

レスポンシブ対応のテーマをインストール

今回は鮮やかなグリーンが印象的な、tsunagimeさん作の「 Fresh Green」にしました。

Fresh Green - テーマ ストア - はてなブログ

テーマストアからインストールします。

viewportを設定する

ブログ管理画面の「設定」を選択し、「詳細選択」タブの下の方にある「headに要素を追加」に以下のソースを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

追加したら「変更する」を忘れずに。

テーマをレスポンシブ対応にする

ブログ画面の「デザイン」を選択し、「スマホマーク」＞「詳細設定」の「レスポンシブデザイン」にチェックを入れます。

最後に「変更を保存する」のを忘れずに！

アドセンスの広告を貼る

とりあえず、「タイトル下」と「サイドバー」の2ヶ所に貼ります。

タイトル下のアドセンスはレスポンシブな広告ユニットです。

縦のとき

横にしたとき

おぉ、ちゃんと大きさが変化する…。

これで少し様子見です。