Webデザイン

WordPressテーマをiPhone(スマートフォン)に対応させてみた

投稿日:2012年3月27日 更新日:

もともと、WordPressのテーマ「Twenty Eleven」をカスタマイズしてたので、前々から対応してたといえば対応してたっぽかったんですけど、iPhone用にバッサリとテーマを分けました。

iPhoneしか持ってないし、アクセス解析見てもスマートフォンからのアクセスのほとんどはiPhoneだから、とりあえずiPhoneからちゃんと見れたらいいやーってことで、iPhoneからしか表示テストしてませんw

Androidとかからも、ちゃんと見えてることを祈りますΣ(´∀`;)



プラグインで別テーマを使う

今回の作業で参考にしたサイトは・・・

WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの?

ここです。

ここに、WPtap Mobile Detectorという、超スバラシイ神プラグインが紹介されてたので、おおっ!って思って使ってみました。

これは楽チン。

PCとiPhone、スマホと、別テーマ使えるとか神すぎ(*´ω`*)

スマートフォン用テーマを作成

先ほど紹介したWebクリエイターボックスさんと同じ方法やりました。

元のテーマフォルダをコピー

今回やった方法はこちら。元のテーマフォルダをコピーし、テーマ名を変更してカスタマイズする方法です。Webクリエイターボックスの場合、元のテーマフォルダ名が「wcb2」、スマートフォン用テーマは「wcb2-mobile」と名づけ、その中で不要なファイル・コードをガツガツ捨てていきました。Web版とスマートフォン版で同じ画像を使うなら、テーマファイルやCSSファイルに記述する画像ファイルのパスを変えるだけなので簡単です。
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの?より引用

同じ方法で、いろんなものをガツガツ捨てていきました。

そう、必要なものまで・・・。

不要なものをガシガシ消したつもりが、カテゴリとかタグとかも消えちゃって、必要なものまで消えてるじゃん!な状態になっちゃいました。

んーー、まーいいや(・。・;

まとめ

とりあえずカタチだけでもできたので、あとはちょっとずつ修正していきます(*´∀`*)

多少は見やすくなったと信じたいなーwwwww

-Webデザイン
-

執筆者:

関連記事

no image

Movable Typeの記事一覧で本文の文字数を同じにする方法

記事一覧で本文の文字数を統一 Movable Typeでブログを作成した時に、TOPページやカテゴリアーカイブ・月別アーカイブ等に、記事の一覧が作成されると思います。 1つ1つの記事の全文を表示させて …

no image

Movable Typeで作成したブログの携帯版を作成する方法

Movable Typeの携帯版作成方法を探す Movable Typeでブログを作成していて、どうしても携帯版を作成したいと思ったのですが、現在のMovable Type単体では、他の一般的なブログ …

iPhoneのホーム画面にブログを追加した時に表示されるアイコンを新しいアイコンに設定してみた

アイコンを変えた、あんちゃん(@anchan_jp)です。 今回新しく作ったアイコンを、今までいろんなサービスで使ってた古いアイコンと入れ替える作業を少しずつ進めてて、このブログをiPhoneのホーム …

EvernoteサイトメモリーをWordPressにブラグインを使わずに設置する方法

やっとこのブログにもEvernoteサイトメモリーのボタンつけることができました^^ WP Evernote Site Memoryというプラグインを使えばすぐできるはずだったんですけど、文章の前か後 …

no image

「iPhoneテンプレートfor MT」でiPhone対応ブログを作成しよう

「iPhoneテンプレートfor MT」という、MovableType(以下「MT」)でiPhone対応のブログが簡単に作成できるというテンプレートを見つけました。 このテンプレートは、「crema …