先日までこのブログのモバイル用テンプレートに、Bloggerデフォルトの「シンプル」というモバイルテンプレートを使っていました。
しかし、デフォルトのモバイルテンプレートを使用する場合には、以下の点に不満がありました。
- スマートフォンでアクセスしたときに、横にスワイプすると次の記事に勝手に移動する
- テンプレートの書き換えが一切できないので、ソーシャル的にも弱い
特に上記1のスワイプ回りの動作は、嫌がらせのような仕様なので早くなんとかしたいと思っていました。
そこで今回、極力テンプレートの修正を行わずにスマートフォンへ対応させてみました。
たき備忘録 - モバイル版
モバイルテンプレートを無効にしてカスタムテンプレートを有効にする
まずはBloggerのダッシュボードから、「テンプレート」>「モバイル」>歯車のボタンから設定画面を開き下記のように設定していきます。
- 「はい。携帯端末でモバイル テンプレートを表示する。」を選択
- 「モバイル テンプレートを選択」の部分で、一番下の「カスタム」を選択
これで、スマートフォンなどのモバイル端末でアクセスしても、パソコン用テンプレートが表示されるようになりました。
モバイル端末でアクセスしたときの表示倍率を変更するタグを挿入する
実際にサイトをスマートフォンなどで表示してみると、サイト全体を表示するので、かなり縮小して表示されるようになります。
特にブログの幅を800ピクセル程度に固定している場合などは、CSSなどで修正してあげる必要があります。
なのでまずは、表示倍率を指定する必要があるため、テンプレートの"<b:include data='blog' name='all-head-content'/>"の下の行に以下のコードを挿入します。
<b:if cond='data:blog.isMobile'>
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' />
</b:if>これで下準備は完了です。
追記(2012/06/05): PCテンプレートにもviewpointが適応されるのはちょっとまずいのでif文を追加しました。
モバイル端末に対応させるにあたって
パソコン用ブログをスマートフォン対応にする場合は以下のような修正が必要になると考えられます。
- ブログの幅を固定幅ではなく、リキッドレイアウトにする
- サイドバーを表示するほどの余裕がないので、フローティングを解除するか、非表示にする
- 内部の要素がはみ出たりする場合があるので、その対策
主に上記3点が重要かと思います。
テンプレートタグを利用してモバイル端末にのみ適用されるCSSを書く
幸いにもBloggerにはモバイル経由でのアクセスなのかを判定するテンプレートタグがあるのでそれを利用します。
<b:if cond='data:blog.isMobile'>
<style>
...モバイル端末にのみ適応させたいCSS...
</style>
</b:if>上記のようなコードをテンプレートのCSSが定義されている場所の後に挿入します。具体的には"</b:skin>"あたりがいいと思います。
この部分にCSSを追加していくのですが、わざわざ別要素のCSSを作るわけではなく、クラスやIDの上書きで対応していきます。（同じクラスやIDのCSSが定義されている場合は後から定義したものが優先されます）
では、上記の「...モバイル端末にのみ適応させたいCSS...」の部分を記述していきましょう。
1. ブログの幅を固定幅ではなく、リキッドレイアウトにする
多くのブログでは、表示幅を固定にしてレイアウトされていますが、スマートフォンの場合はリキッドレイアウト（可変幅）のほうがいいのでまずその部分を修正します。
#outer{margin:0 auto;width:100%;overflow:hidden;}幅を制限している要素に上記のCSSを適応することで、可変幅のデザインになります。（#outerの部分は適宜書き換えて下さい）
この時点では、サイドバーのフローティング解除などを行っていないのでデザインが崩れていると思いますが大丈夫です。
2. サイドバーを表示するほどの余裕がないので、フローティングを解除するか、非表示にする
スマートフォンは基本的に横解像度が低いので、サイドバーが非常に邪魔になります。
このブログでは、サイドバーのフローティングを解除して、記事の下に表示するようにしました。
場合によっては非表示にしても構いませんが、できれば表示しておいたほうがブログ的にもいいと思います。
#sidebar-outer{float:none;width:100%;}このブログでは上のCSSをサイドバーに適応させて要素を下に落とし込んでいます。
3. 内部の要素がはみ出たりする場合があるので、その対策
1.と2.の修正によってある程度形になってきていると思うのですが、リキッドレイアウトにしているにもかかわらず要素がはみ出て横スクロールバーが表示されたりしているかもしれません。
殆どの場合が、paddingを各要素の左右に入れている場合に起こるので、極力paddingは使わないほうがいいです。
どうしても使う場合は、左右のpaddingを0するなどして対策を行ってください。
最終的に
このブログをモバイルテンプレート対応にした際に挿入したコードのすべてが以下になります。
<b:if cond='data:blog.isMobile'>
<style>
.limit-width{margin:0 auto;width:100%;overflow:hidden;}
#outer{padding:0;}
#main-outer{float:none;margin:0;}
#main{margin:0;}
#forcus-category-outer{display:none;}
#header-inner{padding:10px 0;}
#header-inner h1{font-size:150%;}
.post-header h2{font-size:130%;}
#upper-nav-outer{display:none;}
.index-pager .newer a, .index-pager .older a{padding:20px 20px;}
#related-post span.label{display:none;}
#footer-inner{padding:30px 0 15px 0;}
#sidebar-outer{float:none;margin:10px 0 0 0;width:100%;}
</style>
</b:if>各要素の幅を小さくしたり、見出しのサイズを小さくしたり、不要な要素を"display:none"にしています。
もっと複雑で難しいのかなと思っていましたが、ある程度ちゃんとしたレイアウトを行っていればすぐに対応できるみたいですね。
まだBloggerデフォルトのモバイルテンプレートを利用している方は、ソーシャルボタン実装などで思わぬ恩恵を受けたりするのでぜひ試してみて下さい。