Bloggerをスマホ対応にする

スマホ用のデザインを設定して、綺麗なBloggerが見えるようにしましょう。
まずは、モバイルテンプレートを無効にして、画面縮小率を調整します。

[テンプレート > HTMLの編集]
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
　<b:else/>
-   <meta content='width=640' name='viewport'/>
+   <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  </b:if>

width=device-width を設定すると100%表示ってことだけど、ちょっと拡大しすぎね。

スタイルシートを小画面用にカスタマイズしたのがこちら。
スマホ専用じゃないから、普通のブラウザでも画面を狭くすると適用されます。
(デザインを確認するのに、スマホをいちいち持ち出さなくてもいいので、楽だったりします。)

[カスタムCSSの追加]
@media only screen and (max-width: 480px) {
  body { min-width: 0;  max-width: 480px; }
  .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 0; }
  .content-inner { padding: 5px }
  .main-inner .columns { padding-right: 0px }
  .main-inner .column-center-inner .section {
    margin-right: 5px; }
  .Header .descriptionwrapper { display: none; }
  h3.post-title { margin-right: -15px; }
  .post-footer { display:none }
  .fauxcolumn-outer{ display:none }
  .main-inner .column-right-outer {
    position: relative; margin-right: 0px;
    width: 100%; border: 1px solid;
 }
}