こんにちは。zerippeです。
前回の記事で「Bloggerのテンプレートをモバイル端末対応にしてデザインの自由度を格段にアップさせる方法」という記事を書きましたが、もうちょっと上を目指して"レスポンシブデザイン"をBloggerテンプレートに採用してみました。
レスポンシブデザインって何？
自分もあまり詳しくはないのですが、どうやら「CSSのメディア属性を利用して、ディスプレイの解像度によってデザインを変化させ、様々なデバイスに対応するもの」らしいです（間違っていたらご指摘ください）。
ようするに、CSSだけでスマートフォンなどの低解像度端末や、中解像度のタブレット端末、高解像度のパソコンなどに適したデザインを自動で適応させるデザイン手法のことを言っているようです。
Bloggerのテンプレートをレスポンシブデザイン化するメリット
まずはメリットから上げてみます。
- スマートフォンなどのモバイル端末からアクセスした際に、モバイルテンプレートへの余計なリダイレクトが減る
- モバイル端末でアクセスした時にURLの末尾に"?m=1"というGETパラメータがなくなる
- PCテンプレートとモバイルテンプレートの2パターンだけでなく、PC、タブレット、スマートフォンなどの色々な環境に適応しやすくなる。
一見すると特に大きいメリットがないような気もしますが、2の影響は意外と大きいです。
なぜかと言えば、URLの末尾に"/?m=1"が付いてしまうことによって、PCテンプレートから見た時のURLと違うコンテンツとして認識されてしまいます。
これが要因で、ソーシャルボタンのカウント数が、モバイルURLとパソコンURLに分散してしまいます。
よって本当のカウント数がいまいち分からなくなってしまうわけです。
Bloggerのテンプレートをレスポンシブデザイン化するデメリット
では次にデメリットです。
- テンプレートタグの"data:blog.isMobile"が使えなくなる（モバイルテンプレートを無効にした際の副作用）。
これだけでしょうか。特に大きな問題にはならなそうですね。
どうすれば対応させることができるか？
実際にBloggerのテンプレートをレスポンシブ化するにあたって、主に設定する項目として以下の箇所が挙げられます。
- Bloggerダッシュボードからの設定変更
- "viewport"の追加
- BloggerにバンドルされているモバイルCSSへのリンク
- スマートフォン向けモバイルテンプレート用CSSの追加
これらが主に必要となる点です。
Bloggerダッシュボードからの設定変更
ではまずBlogger自体の設定からしていきます。
ダッシュボードから、テンプレート > モバイルの下にある歯車のボタンからモバイルテンプレートに関する設定画面を開きます。
上記の画像のように「いいえ。携帯端末で PC テンプレートを表示する。」を選択すればOKです。
"viewport"の追加
まずは、変更したいテンプレートを開き、下記の記述を探します。
<b:include data='blog' name='all-head-content'/>この文の下の行に以下のような文を挿入します。
<b:include data='blog' name='all-head-content'/>
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0'/>この文の意味は、モバイル端末でアクセスしたときの表示倍率を変更するためのものです。もうおまじない並みに広く広まっている手法なので詳しくは書きません。
BloggerにバンドルされているモバイルCSSへのリンク
次に、Bloggerの設定変更で、標準のモバイル用CSSが読み込まれなくなっているので、読み込むためのタグを挿入します。
<link type='text/css' rel='stylesheet' media='screen and (max-width: 768px)' href='http://www.blogger.com/static/v1/widgets/3511694692-widget_css_mobile_bundle.css' />このCSSを追加しなくても大丈夫ですが、レイアウトの整形が非常に面倒なので私はこれを利用しました。
この追加したタグの中で"media='screen and (max-width: 768px)'"という部分の記述が非常に重要で、「ウインドウの横幅が、768ピクセル以下の場合、hrefに指定したCSSを読み込む」という意味があります。
これがまさに、レスポンシブデザインの肝の部分となります。
スマートフォン向けモバイルテンプレート用CSSの追加
次に、モバイル端末用のCSSを書いていきます。
この項目は下記の記事の「モバイル端末に対応させるにあたって」で詳しく書いていますのでそちらを参照してください。
@media screen and (max-width: 768px){
.limit-width{margin:0 auto;width:100%;overflow:hidden;}
#outer{padding:0;}
#main-outer{float:none;margin:0;}
#main{margin:0;}
#forcus-category-outer{display:none;}
#header-inner{padding:10px 0;}
#header-inner h1{font-size:150%;}
.post-header h2{font-size:130%;}
.post-body iframe{width:95%;}
#upper-nav-outer{display:none;}
.index-pager .newer a, .index-pager .older a{padding:20px 20px;}
#related-post span.label{display:none;}
#footer-inner{padding:30px 0 15px 0;}
#sidebar-outer{float:none;margin:10px 0 0 0;width:100%;}
#related-post li{font-size:80%;}
fixed-social-bottons{display:none;}
}いきなり完成品ですが、やっていることは非常に簡単です。
前回の記事で、記述したCSSを"@media screen and (max-width: 768px){ }"で囲んでいるだけです。
少し前に書きましたが、テンプレートタグの"data:blog.isMobile"を使うことができなくなっているため、このような方法でモバイル端末のみに上記CSSを適応させています。
最後に細かいデザインの修正
流石にこれだけではデザインが崩れてしまう部分などが出てくると思うのでその部分は適宜修正していく必要があります。
特にサイドバー回りのフローティング解除や、フォントサイズの調節は必須となると思います。
おわり
とりあえずこれで簡単にですが、レスポンシブデザイン化できました。
ためしに、このブログを表示した状態でウインドウの幅を狭くしてみると、デザインが切り替わる様子が分かると思います。
前回の記事と似たような内容になってしまいましたが、以上で終わりです。
最後まで読んでいただきありがとうございました。