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

追記: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>

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

【ブログ内で関連ある記事】

スポンサーリンク

『Bloggerでレスポンシブに挑戦してみよう』へのコメント

  1. 名前:universe : 投稿日:2014/06/22 02:38

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

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

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

    2.変えずにはレスポンシブにするのは難しい?大変なのでしょうか?

    3.@mediaというのをCSSに追加するだけではできないのでしょうか…?

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

  2. 名前:管理人 : 投稿日:2014/06/22 03:25

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


    >3.@mediaというのをCSSに追加するだけではできないのでしょうか…?

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

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

    しかし、一番最後のやつをCSSに追加すれば、PC版表示はレスポンシブになるはずです。

    >もともとBloggerは、PCとモバイルで切り分けられてるので、レスポンシブでないのか?
    画面の横サイズをみて、最適だとおもう表示をするのが、どうもレスポンシブのようです。

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


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

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

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


    >1.テンプレートを変えるしかないのでしょうか?
    >2.変えずにはレスポンシブにするのは難しい?大変なのでしょうか?

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

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

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


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

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

  3. 名前:universe : 投稿日:2014/06/22 08:10

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

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

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

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

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

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

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

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


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

    ありがとうございます。

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

  4. 名前:universe : 投稿日:2014/07/05 22:33

    kuroさん・・・。

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

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

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

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

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

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

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

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

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

  5. 名前:管理人 : 投稿日:2014/07/06 00:47


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

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

    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部分だけコピペして文法チェックなどをかけます。
    これで、カッコの閉じ忘れや、コメントアウトのやりかたの間違いや、変な文字が入り込んでいるとかを発見することができます。

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

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

  6. 名前:universe : 投稿日:2014/07/06 06:56

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

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

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

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

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

  7. 名前:universe : 投稿日:2014/07/07 02:52

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

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

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


    Analyticsの設定とか…。

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

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

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

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

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

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

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

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

  8. 名前:管理人 : 投稿日:2014/07/07 03:04

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

  9. 名前:universe : 投稿日:2014/07/07 19:42

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

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

    (^_^;)


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

  10. 名前:universe : 投稿日:2014/07/09 00:17

    kuroさん…。

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


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

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

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

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

    わかりませんでした。

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

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

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

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

    敬具

  11. 名前:管理人 : 投稿日:2014/07/09 00:38

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

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

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

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

  12. 名前:universe : 投稿日:2014/07/09 00:59

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

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

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


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

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

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

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

  13. 名前:管理人 : 投稿日:2014/07/09 01:08

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

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

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

  14. 名前:universe : 投稿日:2014/07/09 01:37

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

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

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

    何かおかしいですね…。

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

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

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

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

コメントを残す

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