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