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

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

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

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

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

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

http://www.komku.org/2013/03/13-best-responsive-blogger-templates-2013.html#.Ua_W9fn0HTo

13 Best Responsive Blogger Templates 2013 via kwout


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個で、レスポンシブなのを探してチェックしていたので、上記の一部は見かけたことがあるのですが、こちらで探すと地道に１つずつという路線になるような気がします。

カスタマイズポイント

・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>

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

スポンサーリンク

関連記事


タグ#Blogger#code

コメント一覧

  • 名前:universe :

    kuroさん、お久しぶりですm(__)m。

    私もレスポンシブwebデザインにしてみたいと思いいろいろ試行錯誤している状態なのですが…。

    レスポンシブにするには、
    １．テンプレートを変えるしかないのでしょうか？

    ２．変えずにはレスポンシブにするのは難しい？大変なのでしょうか？

    ３．@mediaというのをCSSに追加するだけではできないのでしょうか…？

    何卒、ご教授お願い申し上げます。
    _(._.)_

    2014/06/22 02:38

  • 名前:管理人 :

    ブログ記事を読ませてもらってるので、そのあたりも含めて・・。

    ■
    ＞３．@mediaというのをCSSに追加するだけではできないのでしょうか…？

    結構簡単にできるBloggerテンプレートのレスポンシブデザイン化 : たき備忘録 http://blogger.weblix.net/2012/06/blogger-responsive-web-design.html

    たぶん、上記あたりでCSSをなどを追加で、レスポンシブにはなるとは思うんですが、私が試した時はちょっとうまくいかなかったです。だいたいうまくいって、一部がうまくいかないという感じだったと思います。

    しかし、一番最後のやつをCSSに追加すれば、PC版表示はレスポンシブになるはずです。
    ■
    ＞もともとBloggerは、PCとモバイルで切り分けられてるので、レスポンシブでないのか？
    画面の横サイズをみて、最適だとおもう表示をするのが、どうもレスポンシブのようです。

    iPadだと、縦表示だと768表示、横表示だと1024表示あたりだったと思います。
    例えば、当ブログを表示させると、768表示の時は２カラム表示、1024表示の時は3カラム表示とかにしています。

    ■
    ＞Bloggerの場合は、アドセンスを使用しているのなら、PCとモバイル別にしておいたほうがよい。
    http://adsense-ja.blogspot.jp/2011/08/blog-post_23.html

    スマホの場合､一番上のアドセンスに、300ｘ250を持ってくると規約違反になったりするので、気をつけないとBloggerの場合引っかかる可能性があるからです。

    今は、レスポンシブ対応のアドセンス広告があり、
    @mediaで広告サイズを指定するとかすれば対応できるとはおもいますが・・・
    https://support.google.com/adsense/answer/3213689?hl=ja

    ■
    ＞１．テンプレートを変えるしかないのでしょうか？
    ＞２．変えずにはレスポンシブにするのは難しい？大変なのでしょうか？

    理論上は、一番最初の引用先の方法で出来る筈なんですね。
    しかし、標準テンプレートからいろいろカスタマイズしている場合において、レイアウトが崩れるとか、うまくいかない箇所がでてくると思います。

    その原因をさがして対応するのが早いか、レスポンシブ動作するテンプレートに組み込みなおすのが早いかというところだと思います。

    私がやった時は、レスポンシブの意味を理解していなかったので、うまくいかないときに何が悪いのかさえも分からないと状態だったので、後者を選択したというのはあります。

    ■
    ＞スマホとPCとを別々にしていても、レスポンシブなのか？
    たぶん違うんでしょうが、実際問題、PCとスマホを全く同じHTMLソースというのは無理があろうかと思います。

    当ブログはWPですが、「is_mobile」関数などを使って、一部内部で切り分けで処理しています。だから、実際には、スマホとPCで出力されるHTMLは一部違いがあります。

    2014/06/22 03:25

  • 名前:universe :

    kuroさーん、
    だめだぁ(>< )o

    たき備忘録さんのCSS追加した見たのですが…。
    レスポンシブになっていないような感じでした。(;´д｀)ﾄﾎﾎ…

    諦めて、
    元に戻しました…。

    スマホ表示でも若干、変わったのかな？？という感じでした。

    CSSを、
    テンプレートの方のCSSに追加してみたり、
    ユーザskinのcssに追加してみたり、
    両方に追加してみたらり、

    の3通りを試してみましたがあまり変わらずでした…。

    しばらく諦めてこのままでいようかと思います…。

    早急なお返事誠にありがとうございます。

    追伸）
    ＞ブログ記事を読ませてもらってるので、そのあたりも含めて・・。
    ↑
    ありがとうございます。

    大した内容ではありませんが…。
    嬉しいです(^^♪

    2014/06/22 08:10

  • 名前:universe :

    kuroさん・・・。

    kuroさんと同じテンプレートでレスポンシブデザインを試行錯誤して作り上げてきたのですが…。

    Chromeだと正常に表示されるたので、
    最終確認としてIEにて表示の確認をしたところ(´;ェ;`)ウゥ・・・

    IEだと、
    見事にデザイン（レイアウトもウィジェットも）が崩れまくりでした…。
    (;´д｀)ﾄﾎﾎ…

    HTMLの始めの部分をこれまでのテンプレートと比較してみたら、
    若干の違いがあったので、
    これまでのテンプレートの始め部分を記述してみたのですが…。

    やはり、IEでは表示が崩れまくりです…。

    kuroさんは、
    どのようにしてIEなどでも正常に表示されるようにされたのでしょうか？

    何卒、ご教授頂けましたら幸いです。

    よろしくお願い申し上げます。
    ≦(._.)≧

    度々、
    頼ってばかりで申し訳ありません。
    m(__)m

    2014/07/05 22:33

  • 名前:管理人 :

    ■
    元のテンプレートとカスタマイズしたテンプレートを比較すると、
    骨格（カラムの幅関係）の部分は、記事で書いた部分以外は変更していませんでした。

    この当時は本当によくわかっていなかったので、そのあたりを触る必要が私にとっては少なさそうなテンプレートを選択したのだと思います。

    Bloggerのテンプレートは一つにまとまっていて、分かりやすいと思っていたんですが、今見るとそうは思えないのが不思議ですね・・・。
    ■
    IE対応について。
    IEに合わせて作って、その後ほかのブラウザと、IE8,IE7の確認をしてるので逆はわかりません。
    IEで表示で来て、ほかでダメというパターンは少ないようなので・・・。

    ■
    ・IEのF12キーの開発ツール
    ・ChromeのF12キーの開発ツール

    実際に表示させてみて、HTMLソースのDIVとかを選択すると反転してその場所がわかるのと、DIVのmarginやpaddingの幅などが分かるので、これで確認して微調整したり、問題を見つけたりしています。

    これは最近使い始めただけなので、前は難しいとおもってつかってませんでした。

    ■
    Styleの部分のチェック
    http://jigsaw.w3.org/css-validator/validator.html.ja

    Bloggerの場合は難しいかもしれませんが、CSS部分だけコピペして文法チェックなどをかけます。
    これで、カッコの閉じ忘れや、コメントアウトのやりかたの間違いや、変な文字が入り込んでいるとかを発見することができます。

    そういうのがあっても、正常？に表示されることもあるのですが、なんかの拍子で表示がおかしくなったり、特定のブラウザだけ表示がおかしくなることもあります。

    今回はこれだとは思いませんが、念のため。

    2014/07/06 00:47

  • 名前:universe :

    kuroさん、
    いつもありがとうございます。
    CSSチェックサイト見てみました。

    なんかエラーが意外とたくさん…。
    検索して修正してみましたが何かが違う気がすると思い、
    新規にブログを作ってテンプレートをインポートしました。

    その中のCSSをコピペし直して、
    kuroさんと同じような辺りをIEでも確認しながらでカスタマイズしました。

    どこがいけなかったのかあまり定かではなかったですが、
    レスポンシブでIEにても表示されるようになりました。

    本当にありがとうございます。
    m(._.*)mペコッ

    2014/07/06 06:56

  • 名前:universe :

    kuroさん、
    いろいろありがとうございます。

    テンプレート、
    どうしようか迷いましたがレスポンシブにしてみました。

    ガジェットとか…。
    (これ一番大変でした。）

    Analyticsの設定とか…。

    レスポンシブにしてから、
    アクセスが全くなくなったorz…。

    なぜ？
    と思い調べたらBloggerのテンプレートでないものは、
    トラッキングIDコードを埋め込まなければならなかったのですね。
    わかってよかったぁ(^_^;)

    まだまだ、完成とまではいきませんが、
    とりあえず無事レスポンシブにすることが出来た模様です。

    以前のデザインも気に入っていたのですが、
    ユーザビリティなどを考慮するとレスポンシブにした方が良いのかな。
    と…。

    これから、
    少しづつカスタマイズしていくと思います。

    この度も、
    ありがとうございました。

    追記で、
    viewportのことまで記述しておいてくれて感謝です。

    長文になってしまいすみません。m(__)m
    お礼まで。

    2014/07/07 02:52

  • 名前:管理人 :

    Analyticsについては、
    今、テンプレートを見ると、Blogger用のタグ？を追加してありました。

    2014/07/07 03:04

  • 名前:universe :

    kuroさん、
    コメントありがとうございます。

    はい。
    Analyticsは気づいたので昨晩追加しました。
    m(._.*)m

    (^_^;)

    いつもありがとうございます。
    m(__)m

    2014/07/07 19:42

  • 名前:universe :

    kuroさん…。

    度々本当に申し訳ありません。m(__)m

    Chromeで要素の検証などでいろいろ確認してみたのですが、
    解決方法？（対処方法）がわからないでいます…。
    (´;ェ;`)ウゥ・・・。

    なぜか、
    人気の記事が１０件ではなく９件までしか表示されないことに気づきました。

    そして、
    リスト表示の黒丸「・」がIEでは表示されてしまいます。

    一度、
    ガジェットを削除して追加してみたり、
    CSSで、
    いろいろ試してみたのですが…。

    わかりませんでした。

    一応、
    自分自身の備忘録として記事にもしてみてあります。
    URL：http://sekirarablog.blogspot.com/2014/07/bloggercss.html

    もし、
    簡単に解決できそうでありましたら是非教えて頂けませんでしょうか。
    m(._.*)m

    何卒、
    よろしくお願い申し上げます。
    m(__)m

    追伸）
    簡単に解決できそうでなければkuroさんも大変なので無理しないで下さい。
    m(__)m

    敬具

    2014/07/09 00:17

  • 名前:管理人 :

    ■一覧の件数
    Chromeでも、9件では？
    HTMLソースを直接みても9件のような？

    ■黒丸の件
    ChromeのF12キーの開発ツールでプロパティをみると
    list-style: disc
    となっているので、黒丸表示されてるけど、上に画像が重なって見えないだけの気がします。

    ということで、打ち消すCSSを書いてみればIEでも消えるのではないかと思うのですがどうでしょうか？

    .PopularPosts ul li {list-style: none;}

    2014/07/09 00:38

  • 名前:universe :

    本当に度々コメントすみません。

    確かにHTML直で見てみると９件ですね…。

    設定では１０件表示にしてあるのですが…。
    う～ん、
    なぜなのでしょう…。

    もし、
    お分かりでしたらご教授お願い申し上げます。

    .PopularPosts .widget-content ul li {
    list-style: none;}
    については、
    ブログURLに記載しましたが、
    私が、
    olの番号リスト表示のCSSの記述が一部ulとolが混じっていました。

    それを修正した後、
    .PopularPosts .widget-content ul li {
    list-style: none;}
    を追加したところ
    「・」は表示されなくなりました。

    お騒がせして大変申し訳ありません。

    2014/07/09 00:59

  • 名前:管理人 :

    ガジェットで、件数を5件に減らしてみて、
    それがきちんと反映されるかどうかをまずは見てみてはどうでしょうか？

    5件にならないのなら、その設定値が何らかの理由で反映されていないということだと思います。

    あと、件数設定のところが、「最大」ｘ件となっているのもちょっと気になります。
    最大10件なので、9件表示でも文言的には間違っていないですが、なんとなく変ですね。

    2014/07/09 01:08

  • 名前:universe :

    kuroさん、
    本当に早いご返信ありがとうございます。

    早速、
    設定を5件に変更してみたところ5件表示されました。

    また、
    新しいブログを作り、
    そちらに前のテンプレートにて確認してみたのですが、
    前のテンプレートですと、
    10件表示されます。

    何かおかしいですね…。

    でも、
    しばらく様子見てみようと思います。m(__)m

    追伸）
    もし、
    何かお分かりでしたら当ブログのコメントorこちらのコメントに返信お願い申し上げます。
    m(._.*)m

    忙しい中ありがとうございました。

    でも、
    なにか変ですね…。

    2014/07/09 01:37

ブログや記事に関する質問・感想など

ご意見やお問い合わせは、お問い合わせ窓口から受け付けています。

記事に関する質問・感想などは、この記事のコメントをご利用ください。

お問い合わせ

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください（スパム対策）。