平日WEB系SE 週末時々自転車屋

WEB系の技術ネタや大好きなお酒、週末手伝う自転車屋の話などを書きます。

はてなブログをレスポンシブ対応にしてみた

 

はてなブログスマホ用のviewは表示も速くてよいのですが、googleadsenseが3箇所も入っていて(はてなブログ無料版を使っています)、デザインを自分でいじれないということで、

レスポンシブ対応のテンプレートを導入

してみました。

 

導入したのはおそらく一番人気のある

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

 です。

 

インストール

は簡単で、

管理メニューのデザイン → デザインテーマ → テーマ ストアでテーマを探す で対象のテーマを選択 → プレビューしてインストール → インストールするブログを選ぶ → このテーマをインストール

でインストールできます。

※ググレばたくさん出てきますね。

 

次に

テンプレートを適用する方法

ですが、

管理メニューのデザイン → スマートフォンスマホのアイコンです) → 詳細設定 → レスポンシブデザイン にチェック → 変更を保存する

で完了です。

 

ここまでやるとスマホでもPC版と同じHTMLが出力されるようになります。

 

で、ヘルプページにも書いてあるのですが、

管理メニューのデザイン → カスタマイズ(スパナのアイコンです) → デザインCSS の中に /* Responsive: yes */ を貼り付ける

をやらないと、viewportが設定されず、PC版がそのまま表示されてしまう(字が小さくなってしまいます)ので注意が必要です。

 

とりあえずここまでやれば

はてなブログのレスポンシブ対応は終わり

です。

 

次回は テーマの色を標準のブルーから

に変更したので、その変更内容について書きます。

 

続きの記事はこちら