WordPressのスマホテーマを作成しました。気を付けたことのまとめ

wordpress

こんにちわ。@giant_morinkeyです。

ブログを始めた当初からいつかはスマホ対応しようと考えていて、あっという間に2年が経ってしまいました。
2年の間に、あれよあれよと時代はスマホファーストの時代に突入していました。
もっと早く対応すればよかったなぁと感じています。

[スポンサーリンク]

今回やったこと

スマホ対応ということで、最初はブログのテーマをレスポンシブなテーマに変えようかと思ったのですが、デザインを最初から作り直すことの手間と、慣れていないレスポンシブwebデザインに四苦八苦しそうな気がしていたので、ブログのテーマは今のままとしておいて、スマホのテーマだけを最適化する方法をとりました。

今回は、スマホ用テーマを作る時に気をつけたことをまとめていきます。

スマホテーマを作成する時に気をつけたこと

基本的にはPC用テーマを改修するような感じでスマホテーマを作っていきました。
それでも、スマホテーマを作るにあたり、いくつか気をつけた点があります。

metaタグ

PCサイトとは異なり、スマホサイトの場合は、以下のタグ(viewport)をheadタグ内に追記する必要があります。

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"/>
	</head>

content属性の意味は以下の通りです。

user-scalable=no : 拡大・縮小をすることを禁止します。
width=device-width : デバイス画面サイズ(幅)にあわせて描画させます。
initial-scale=1 : 描画時の拡大率を100%とします。(拡大・縮小無しの状態)

widthサイズ

今回はPC用テーマを基にスマホ用テーマを作成していきました。
PC用テーマには、CSSの"width"で幅を指定している箇所がいくつもあったので、全てwidth:100%;へ変更しました。

スマホは画面が小さいことと、画面サイズがまちまちなため、あえてサイズを指定しないようにしています。

画像サイズ

画像が切れることなくスマホ画面に表示できるように以下をCSSに追加します。
どんなサイズの画像も、1画面内に表示できるようになります。

img {
    max-width: 100%; 
    height:auto;
}

PCとスマホでテーマを切り替える方法

デバイス別に表示を切り替えるために、WordPressプラグインの「Multi Device Switcher」を使用しています。

PC用テーマはもともとあるものを使うようにしたかったので、スマホからのアクセスの場合のみ、今回作成したテーマを表示させるよう設定する必要がありました。
PCアクセスはこっちのテーマで、スマホアクセスはあっちのテーマで。といったイメージです。

使用したアイコン

スマホテーマ作成時に使用したアイコンは、以下のサイトからダウンロードしました。
シンプルで使いやすかったです。

phone-themes2

スマホテーマをPCブラウザで確認する方法

ChromeのMobileLayouterを使ってテストしていました。
きりの良いところで実機も使う。といった感じです。

phone-themes4

完成したスマホテーマ

こんな感じに仕上がりました。
個人的には気にっています。
phone-themes3

最後に

スマホテーマは、通常のPCテーマを作るよりも、ロジックはシンプルになったと思います。
作業時間としては、全部あわせても8時間くらいでした。1日2~3時間使って3日間かかりました。
時間はあまりかからなかった感じです。

作り始めた当初は、レスポンシブなテーマを作るまでの仮テーマとして使おうと思っていましたが、実際に作ってしまった今では、これでいいかも。と感じています。
今後の修正するとしたら、せっかくスマホ専用テーマを作ったので、もう少しCSS3やjQueryを使ってグリグリ動くテーマにできればいいなぁと考えています。
それでは!