モバイル用とPC用の表示を作る

http://rrvf.blogspot.jp/2012/06/blogger-mobile-template.html
ここの記事を参考に、ipodtouchとPCでチェックしながら
ブログのテンプレートを書き換えてみました。
まずは

<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=0' name='viewport'/>
</b:if>

最初に

<b:include data='blog' name='all-head-content'/>

がどこにもなかったので付け足しました。

次にCSSをなんとかします。
元々あるCSSの中から、対応するouter-wrapperなどの名前を見つけて
くることが中々大変でした。

このモバイル用CSSはPCで見に来た人には適用されないものなのですが
上記のページに書いてあるように</b:skin>のあたりに入れたところ

#footer-wrapper a {color:#FFF;}
<b:if cond='data:blog.isMobile'>
<style>
.limit-width{margin:0 auto;width:100%;overflow:hidden;}
#outer-wrapper{margin:0 auto;padding:0 0 0 0;width:100%;overflow:hidden;}
#main-wrapper{float:none;margin:0 auto;padding:0 0 0 0;width:100%;overflow:hidden;}
#sidebar-wrapper{float:none;width:50%;}
</style>
</b:if>
]]></b:skin>

ＰＣで見てもモバイルと同じようにサイドメニューが下に並んでしまう

という様になってしまい、困っていました。

そこで、モバイルで画面をスワイプしても次の記事に飛ばない

ようにする記述の次、</body>の前に適当に追加したところ

上手くいきました。

省略

/モバイル用CSS/
<b:if cond='data:blog.isMobile'>
<style>
.limit-width{margin:0 auto;width:100%;overflow:hidden;}
#outer-wrapper{margin:0 auto;padding:0 0 0 0;width:100%;overflow:hidden;}
#main-wrapper{float:none;margin:0 auto;padding:0 0 0 0;width:100%;overflow:hidden;}
#sidebar-wrapper{float:none;width:50%;}
</style>
</b:if>

</body>
</html>

モバイル用のサイドメニューは表示したいものに

mobile='yes'をつけました

<b:widget id='HTML1' locked='false' mobile='yes' title='Manga / Comic' type='HTML'>

このあと、何度かチェックをしたところ

<meta content='width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=0' name='viewport'/>

の設定を0.5倍、0.75倍、1倍と変えたのですが、私が思っていたように

画像のサイズが変わるのではなく、それ以外の要素が大小しているということに

気付き0.75倍にすることにしました。

0.5

0.75

1.0

bontakobo