Bloggerでレスポンシブに挑戦してみよう

  • 投稿 : 2013-06-06
  • 更新 : 2015-01-25
追記:2015/01/24

最近は、Bloggerのテンプレートもレスポンシブなものがほとんどなので、当記事よりもカスタマイズしやすいテンプレートを選ぶほうがよいかと思います。

参考:Bloggerで使いやすい「レスポンシブ」無料テンプレート 【2015年】

レスポンシブデザインは、なんか難しそう・・・

一番簡単な方法は、レスポンシブデザインの既存のテンプレートをカスタマイズすることだと思います。


Wordpressのtwenty twelveっぽい動作と骨格に見えたので、今回は上記のテンプレートを使用しました。デモは上記のサイドで見れるのですが、肝心のテンプレートがダウンロードできない状態になっていました。

そこで、Internet Archiveから入手することにしました。以下のリンクから私は入手しました。
http://web.archive.org/web/20130101000000*/http://bloggerbin.com/download/Innovative.zip

2012/10/15のほうがDL可能です。

横幅が広すぎるんだけど?!

Bloggerの人のレスポンシブデザインのサイトをみると、なんか横に長すぎるんですね。なれると平気なんですが、でももともと960pxぐらいで作ってきたサイトでは、文章の改行バランスが悪くなる気がします。

.row {
background: #fff;
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

今回使用したテンプレートだと上記の場所で指定されていました。1140pxを960pxとかに書き換えれば横幅の最大サイズが小さくなるので、今までと同じ感じで表示されるかと思います。

ほかのテンプレートでも、widthあたりで検索をかけて、%表示以外のところをチェックすれば大体変更したらよさそうな点が見つかるかと思います。

レスポンシブ特有?!

@media only screen and (max-width: 1023px) {

}
@media handheld, only screen and (max-width: 767px) {

}

横幅のサイズによって、適用されるスタイルシートを切り替えることができます。
@かmedia で検索すれば、見つかると思います。

実際にブラウザの幅を変更してみれば、切り替わるのがわかるので、実際にかいて動作を確認してみるのがよいかと思います。

このあたりで、サイドバーを下に落としたり等のレイアウト変更をしているようです。

ほかのレスポンシブデザインの既存のテンプレート

参考:
17 Best Responsive Blogger Templates to Download for your Blog
13 Best Responsive Blogger Templates 2013
Top awesome and stylish responsive Blogger templates 2013 updated
Best 10 Free Responsive Blogger Templates for 2013 Collections
Blogger で使えるレスポンシブデザインテンプレート 25 選 | クリボウの Blogger Tips

上記サイトからえらぶのが、手堅くて速い気がします。

無料のBloggerテンプレートを配布してる海外サイト10個で、レスポンシブなのを探してチェックしていたので、上記の一部は見かけたことがあるのですが、こちらで探すと地道に1つずつという路線になるような気がします。

カスタマイズポイント

・font-family 日本語フォントを追加
・text-transform 海外テンプレートの場合、大文字指定になってるので、この辺りを削除
・font-size、line-heightの調整
・post-title、H3 あたり
・.sidebar .widget あたり

レスポンシブと全然関係ないですが、この辺りを見直すとよいような気がします。

モバイル対応

追記:2014/07/06
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'/>
</b:if>

私は、head部分に上記を追加してます。

Analyticsの対応

<b:include data='blog' name='google-analytics'/>
  </body>
  </html>

上記の用に、テンプレートに追加。

スポンサーリンク