FC2ブログのスマートフォン用公式テーマをデザインさせていただきました♪

FC2ブログさまのスマートフォン用公式テーマをデザインさせていただきました♪
「Sweet」という名前で配布中です!

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

10月が公私ともに充実しすぎていたので(ものはいいよう※お察しください)
なんかもうなかったことになっているYUKIです。

こんばんは!

10月、このブログ一回も更新してない…ぐす;;

そんな10月の最終日に!
デザインさせていただいたFC2ブログさまのスマートフォン用公式テーマが公開されましたー!

わーい!

こんな感じのデザインになっております♪

今回久しぶりにWordPress以外のブログのテーマをデザインしたのですが、
レンタルブログのテーマ作りって実はものすごく思い入れがあるんです。

まだプログラマーやりながらWebデザイナーの勉強をしていた頃から
勉強のためにいろんなブログサービスのテンプレートを作っては配布してWebデザインの勉強をしていたのです。

↓こんな感じの作ってました。
こうして並べるとなんかもう懐かしくてほろ苦すぎるw

FC2ブログさんはそれがご縁で、PC用の公式テンプレートのデザインをさせていただいたこともあったり。

もう5年以上も前の話ですが…!

なので今回、ちゃんと(?)Webデザイナーとなった今、
こうしてあらためてご縁があって、とってもうれしかったです♪

こうして今Webデザインのお仕事ができるのも
ブログのテンプレートづくりという武者修行があったから!

レンタルブログテンプレのデザインは私の原点!w

なんかいろいろ思い出してまたやる気があがりました☆

今回デザインさせていただいたスマートフォン用公式テーマは「Sweet」という名前で配布中です!

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

FC2ブログ

ちなみにその当時からある私のFC2ブログはこちらw

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

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

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

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

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