[wordpress]PCサイトのテーマをカスタマイズしてモバイルテーマを作成する方法！

Tweet
トップへ

こんちくわ。
ブログをイジイジしまくっている@conchikuwaです。

やっとと言いますか、ついにと言いますか、当ブログのモバイルテーマが完成しました。

テーマはPCサイトのテーマを流用して作成しました。

まだ見直した方がいいかなという箇所もあるけど、まぁなんとか見られる感じにはなったかなと。ただ使っているテーマの作りの関係で、結構手こずっちゃいました。

今回はまたテーマを変更した時のために備忘録がてら、PCサイトのテーマをカスタマイズしてモバイルテーマを作成する方法を纏めてみます。

モバイルテーマを用意していないと当然ですがiPhoneではPCサイトのまま表示されます。

↓ 当ブログの場合、こんな感じ。。。

まぁタップすると拡大されるので、使えない事はないですが、画面サイズに比べて情報量が多く、見づらいです。やはり画面サイズに合わせたデザインにした方が、ブログにお越しいただいた方の為にも親切です。

今回は現在使用しているテーマをコピーしてモバイル用に最適化させる方法のご紹介ですが、その他にもWptouchというプラグインを利用したり、MobifyというWebサービスを利用したりといろいろあります。

詳しくはWebクリエイターボックスさんでご紹介されています。

WebサイトをiPhoneで見やすくする5つの方法 | Webクリエイターボックス
iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://w …
いつもありがとうございます！

プラグイン「WPtap Mobile Detector」をインストールする。

「WPtap Mobile Detector」はデバイス事に適用するテーマを切り替える事ができるスグレモノです。

WordPress › WPtap Mobile Detector « WordPress Plugins
This plugin automatically detects the type of mobile browser that you site is viewed from, and activ …

インストールすると管理画面のメニューに「Mobile Detector」が追加されており、そこで適用するテーマを選択できます。

PC用のテーマとモバイル用のテーマを別々にする事によって、モバイル用のテーマをガシガシイジリ倒してもPC側に全く影響がないというメリットがあります。

テーマフォルダを別名でコピーする。

サーバー上の”/wp-conten/themes”の中にブログのテンプレートが格納されているので、使用しているテーマのフォルダを丸ごとFTPを利用してダウンロードし、ファイル名を適当に変更して再度アップロードします。

テーマ用のスクリーンショットを上書きする

コピー元のままでも特に問題は無いのですが、管理画面上で紛らわしいので、テーマ内の”screenshot.png”を任意の画像に上書きします。

ちなみに私はとりあえず↓のような画像に上書きしました。

style.cssの最初のテーマの説明部分を修正

↓のようにstyle.cssの最初の部分に記載されているテーマの内容、説明等を修正します。

/*
Theme Name: Unspoken
Author URI: http://www.wpshower.com
Description: Advanced WordPress Premium theme developed proceeding from your wishes. Unspoken is our first, clean, simple and easy to customize premium WordPress theme specifically designed for your news or magazine website. We carefully analyzed your statements to each of free templates that we have released previously and have tried to realize all your remarks and wishes in Unspoken. Comes with 7 unique color schemes.
Author: Wpshower
Version: 1.0.4
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2011 Wpshower
*/

Theme Name: Unspoken

Author URI: http://www.wpshower.com

Description: Advanced WordPress Premium theme developed proceeding from your wishes. Unspoken is our first, clean, simple and easy to customize premium WordPress theme specifically designed for your news or magazine website. We carefully analyzed your statements to each of free templates that we have released previously and have tried to realize all your remarks and wishes in Unspoken. Comes with 7 unique color schemes.

Author: Wpshower

Version: 1.0.4

License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html

ちなみにスクリーンショットとstyle.cssの情報は管理画面＞外観＞テーマに表示されます。

横幅をスマホに合わせて表示させる。

スマホでPCサイトを見ると自動的に縮小されて全体が表示されますが、縮小されすぎて文字が小さく読みにくくなります。今回スマホ用に最適化されたテーマを作成するので、”viewport”というメタタグを<head>〜</head>に記述して縮小せずに表示させるようにします。

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

↓ ”viewport”を指定すると縮小されずに表示されます。

その他にも便利なコードがこちらもwebクリエイターボックスさんでご紹介されています。

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス
スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存してい …
いつもありがとうございます！

サイドバーをメイン部分の下に表示させる。

WordPressのテーマは2カラム（メイン部分とサイドバー）のレイアウトが多いと思います。スマホの画面は小さいのでサイドバーがあるとそれだけ表示が小さくなってしまいます。

ですのでサイドバーをメイン部分の下に表示させて横幅を広く使用します。メイン部分、サイドバーのCSSにfloatプロパティを使用して表示位置を指定している場合が多いですので、そのfloatプロパティを削除します。削除するだけで多くのWordpressのテーマはサイドバーが下に表示されるようになると思います。