まずは、モバイルテンプレートを無効にして、画面縮小率を調整します。
[テンプレート > 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;
}
}
