はてなブックマーク - WPtouchはもういらない?プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法
Pocket

WordPressには「WPtouch」というスマホ対応サイトを生成してくれるプラグインが有名ですが、あまりにも有名すぎて多くの人が利用している為、スマホから見た時に自分のブログに個性がないと悩んでいる方がいるかと思われます。

またWordPress以外のCMS、またはCMSを使用せずにサイトを構築されている方の場合、なんとかスマホ対応サイトを用意したいと思っている方が多いのではないでしょうか?

今回はスマホ対応サイト用のCSSを別途用意する事で、ページをスマホ用に最適化する方法を紹介します。

スポンサードリンク


私が実際にやってみたサイトの例

男の節約道:PC版

20131101m01

男の節約道:スマホ版

20131101m02

男の節約道

あくまでいじるのは2つのCSSだけで、構成しているページはまったく同じものです。パソコンとスマホ、どちらからアクセスしたで、表示方法を切り替えているだけにすぎません。

スマホ対応する為のページ側の設定

viewportの設定

<head>にviewport設定をして、スマホからアクセスした時に、画面横サイズ一杯に表示されるようにします。

<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

上記はピンチで画面を拡大できないようにしています。拡大できるようにするには最後を「user-scalable=yes」にしてください。

PC用とスマホ用のCSSを切替える為の設定

<link rel="stylesheet" href="style.css" type="text/css" media="all">
<link media="only screen and (max-device-width:480px)" href="style_mobile.css" type="text/css" rel="stylesheet"/>

上がPC用、下がスマホ用のCSSを読み込む記述です。「style.css」「style_mobile.css」のCSSの名称は任意に変更して問題ありません。

これでページ側の設定は完了。後はスマホ用のCSSの記述を変更する作業です。

スマホ用のCSSの記述を修正

まずはPC用のCSSをコピペしましょう。

そこからスマホ対応サイトへとカスタマイズしていきましょう。

widthの変更

widthを固定の幅で指定している場合は全て「width:100%」に修正します。

カラム表記をリセット

floatを用いて分けていた、メインカラムとサイドカラムを解除します。「float:none;」で全て解除してください。

表示させたくない部分について

スマホでは見せたくない部分については「display:none;」を指定すれば、消すことが出来ます。

逆にスマホでは見せて、PC版では見せたくない部分がある場合は、スマホ用CSSには「display:block;」とし、PC用CSSには「display:none;」とする事で対応が可能です。

画像を調整

画像の横幅は300〜320pxが良いと思います。もしくは100%で指示するのもありだと思います。

他フォントのサイズや、中央揃え、マージン等、スマホで確認しつつ微調整すれば、完成です。

注意すべき点

スマホ用のCSSに特に記述がない場合は、原則としてPC用のCSSの指示に従うようになっています。

なのでスマホ用のCSSで記述を削除するのではなく、「none」や任意の数値をしっかりと入れて指示しておく事が重要になります。私はそれに気づかず、どうにもこうにもスマホ用のレイアウトが修正されず四苦八苦しました。

また画像は、高解像度のスマホで見るとぼやけた粗い画像で見えてしまう事があります。気になる場合は、画像サイズを2倍のものを用意してPC用、スマホ用それぞれに合ったサイズ調整をすると良いでしょう。

Tags:
2013年11月8日

ブログの更新情報はこちらからどうぞ

RSSリーダーへ登録していただく他に、facebookページや、twitterからもブログの更新情報をお知らせしています。是非ご登録下さい。



自己紹介

サムリ。1974年4月生まれ。東京都出身、埼玉在住。アメコミ映画に、仮面ライダー、ロボットアニメが好きな二児の父でフリーランスやっています。詳しいプロフィールはこちら

  • サムリブログのはてなブックマーク数