水曜日

モバイル用と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>


PCで見てもモバイルと同じようにサイドメニューが下に並んでしまう
という様になってしまい、困っていました。
ようにする記述の次、</body>の前に適当に追加したところ
上手くいきました。

<!-- No Swipe Mobile -->
省略
<!-- /END -->

*/モバイル用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



0 コメント:

 
*/モバイル用CSS*/