ようやくこのブログ用の スマートフォン用テーマ作りました


このブログのスマートフォン用テーマ作ってみましたー!

現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。
(※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました!)

今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、
今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。

とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆
(あといろいろコード見直してもうちょいスムーズに表示されるようにします><たぶんいろいろと無駄なことしてるはず。)

で、スマートフォン用デザイン。

やらなきゃやらなきゃと思いつつ、
なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。

スマートフォン用デザインの基本などに関しては、
今回以下のページがとっても参考になりました!

また、このブログはWordpressを利用しているのですが、
WordPressのスマートフォン対応と言えばwp-touchなどプラグインで一発で対応できるものが有名だったりするのですが、

今回は上にも書いた通り、このプラグインは使わず、普段のテーマ作り方でスマートフォン用テーマを作りました。
wp-contents内にpc用とスマートフォン用のテーマを置いている状態です。

2つのテーマの切り替えには、 iPhone theme switcherというプラグインを使用しています。

プラグインを有効化し、使用したいテーマを選ぶと、iPhone・iPadからのアクセス時に設定したテーマを読み込むようになります。

ただ、このプラグインだとiPhoneの時しかこのデザインにならない上、iPadでもこちらのテーマが有効になってしまいます。

なので、twitterで@rintaxさんにアドバイスいただいた方法で、端末の判定を変更しました。
このプラグインの端末判定の箇所の判定条件を書き換える方法で、Androidを追加、iPadを削除しています。

ただ、スマートフォン向けの表示のさせ方に迷っていて、スマートフォンってPCサイトも問題なく見れるのがいいところでもあるような気がするので、一律強制的にスマートフォン用デザインを出すのってどうなのだろう?と思っています。

というのも、PC用とスマートフォン用でまったく同じ内容が乗っているならいいけど、PCサイトにはあるなにかがスマホ用だと足りない…とかあったらPCサイトの方がみたい!って時もあると思うし…。

はじめはPC用サイトを出す
→スマートフォンからのアクセスの場合はヘッダーにメッセージをだして、スマートフォン用テーマがあって切り替えられることを告知
→一度切り替えたらもう一回切り替えるまでそっちのテーマ

の方法もいいのかなーとも思ったり。

その場合だとWordPress theme switcherあたりを使うことになるでしょうか。

いや、スマホもってないんでよくわからないんですけどね…!(笑)

もうちょっと他の対応サイトなどを見て、いい方法を考えようと思います!

あと、考えるにあたっていろいろと参考になるサイトやプラグインの情報を頂いたのでメモ。

いろんなやり方ができそうです。

…さて。

今回テーマ自体はさくさく順調に作れたのですが、

WordPressのiPhone用テーマを作るにあたって困ったことがひとつだけありました。それが記事に張り込んでいる画像…!

PCで見ることを前提に、記事中には幅500pxぐらいの画像を埋め込んでいるので、難の指定もないそのままの状態では、画像がはみ出してしまいました。

でもmax-widthが使えるので、max-width: 100%で枠内に納められるじゃん!と喜んだのもつかの間、はり込んでいる画像にheightとwidthが入っていたため、横幅はいいのですが縦は指定されたピクセル数で表示されてしまって、横幅はいいものの、今度は縦に長くなってしまいました…。

javascriptでごにょごにょすれば消せるみたいなのですが…※

最初から本文にwidthやheightが入っていなければ表示させるときになにも気にしなくていいので、そっちのほうがいいなー?ということで、今回は本文からwidthとheightを消すことにしました。

※追記:かちびと.netのシロさんにjQueryで.removeAttr(“width”).removeAttr(“height”)で取ったらいいよ!と教えていただきました!ありがとうございます!!

とりあえず過去のエントリーの分は、一括でheightとwidthを削除してしまうとして…。

これから記事を書くとき、はじめからwidthとheightが入らないようにしたい…!(そもそもheightとwidth書かない派なので前々から気になってた)

そしてできればコアファイルはいじりたくない…

誰かいい方法知らないだろうか?と思いツイートしてみたところ

@jim0912さんが、functions.phpに書くだけでWordPressの画像挿入時にwidthとheight指定が入らないようにする方法を教えてくださいました!

本当にありがとうございます!!!

WordPressの画像挿入時にwidthとheight指定が入らないようにする
http://www.warna.info/archives/700/

動作もばっちりでした!

これで画像の幅問題も解決しました☆わーい☆

実は今お仕事でもいろいろとスマートフォン用のデザインを作っていたりするのですが、IE気にしなくていいってことがこんなに楽しいことだとは思わなかった…!w

いろいろできてとっても楽しいです(笑)

☆おまけ

実はtwitterで画像や動画が簡単に共有できるサービスのシャッターのサイトもスマートフォン用のデザインを最近やっと用意しました!(サムネイルのところなど一部まだ対応中のところもありますが)

よかったら見てみてくださいねー!


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト