BloggerをレスポンシブWEBデザインにしてみようと思いました。が、やっぱりやめました

公開日 : 最終更新日 :

カテゴリー :

前々から僕のブログをレスポンシブWEBデザインしてみたくてちょこちょことやっていました。ある程度の形になったので、テスト用のブログに作ったテンプレートを適用してみて細かいところを修正していったのですが、ある部分でちょっと困ったことがあり、レスポンシブWEBデザインを使うのをやめました。

今回は、BloggerにレスポンシブWEBデザインを適用する方法と断念した理由について紹介したいと思います。

BloggerにレスポンシブWEBデザインを適用する

BloggerにレスポンシブWEBデザインを適用する方法からです。レスポンシブWEBデザインを使うには、CSSでMedia Queries(メディアクエリ)を使います。Media Queriesは、サイトを見ているユーザーの状態に合わせて適用するCSSを振り分ける仕組みになります。Media Queriesを導入するための準備から行います。これらを行う前にBloggerのモバイルテンプレートを無効にしておいてください。

これらを導入してください。1行目はViewportを設定しています。2行目はIEの互換モードを設定しています。この場合は、IE9の互換モードです。3行目以降はIEのMedia Queriesについてです。Media QueriesはIEで動かないのでサイトにアクセスしたときにIEだった場合以下のJavascriptを設定しています。

Bloggerでのメディアクエリの使い方

BloggerでのMedia Queriesの使い方は以下の通りです。

ざっとですが、Media Queriesの使い方です。スタイルは各個人で違うので、それぞれであわせてください。上のコードの場合は、すべて<skin>タグのなかにすべて書きましたが、外部から読み込む方法もあります。

レスポンシブWEBデザインにしなかった理由

では僕のブログでレスポンシブWEBデザインにしようとしてやめたかですが、一つは、重くなるということです。このことは前に「Bloggerのスマホのブログデザインについて考える」で紹介したので別に構わなかったので、少しでも軽くしようしてJavascriptでUAの制御をしてレイアウトの表示非表示をしていたのですが、Adsenseでつまずきました。

AdsenseのコードがJavascriptだったのを思い出して、Javascriptでの制御が使えないことがわかりました。UAのソーシャルカウントが分散されないのは魅力的なのですが、それ以上に重くなりすぎてしまったのとAdsenseの件があったのでレスポンシブWEBデザインでスマホに対応するのを諦めました。なのでモバイルテンプレートのカスタムをつかってスマホのブログデザインを変えていきます。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>