レスポンシブデザインでWordPressのテーマを作製しました。

ちわーす。
ふぅ...疲れました、かっぱふぅ( @kappafoo )です。

先日から、やるやると話をしていましたWordPressのテーマの作製と変更を、昨日イッキに行ないました。

といっても、まだ変更したテーマを公開しても、大きな問題はないだろうという甘い見込みの上で、まだまだ未完成な状態です。

それでも、ここまで漕ぎつけるまでには、初心者でWebページの知識のほとんどない私では、それはそれはとっても苦労しました。

ちなみに昨日までのテーマは、

テーマ1

です。「mypacecreator.net」さんとこにある「mypace custom V(five)」の2段組のテーマを少しカスタマイズして使ってました。

それを今回、メディアクエリを使ったレスポンシブデザインのテーマに、と~っても頑張って作製しました。

それが、こちら...

テーマ2

はい、こちらの見た目は3段組みレイアウトなんですが、

ウィンドウのページの横幅を狭くすると...

テーマ3

はい、2段組みレイアウトに変わります。
まだまだ狭くすると...

テーマ4

本文は1段、サイドバー部分がフッター部分に動いて、2段組みに分かれます。
画像はないですが、もっと狭くすると、すべて1段組みのレイアウトになります。

このテーマをiPhoneで見ると、すべて1段組みのレイアウト。

テーマ5

iPadで見ると、横向き(ランドスケープ)では、3段組みレイアウト。

テーマ6

縦向き(ポートレート)では、2段組みレイアウトになります。

テーマ7

いやぁ~、本当にここまでするのに大変疲れました。

このテーマを作るにあたって、ちょっと困ったこと、つまづいたことについては、後日また備忘録として書きたいと思います。

まだまだ、細かいとこは変なところが多いですが、ボチボチ直していこうと考えてます。

この記事が参考になったら、シェアしてください

 

 

関連記事も見てください

responsiveレスポンシブデザインを固定幅+リキッドレイアウトに一歩前進させました。 (2012.09.29)
レスポンシブデザインでGoogleAdsenseの広告サイズ変更が公式サイトで紹介されています。 (2013.06.27)
テーマ1スマートフォン用のWordPressのテーマはどうしよう? (2012.08.27)
GoogleWordPressのアドセンスの広告サイズをパソコンとスマートフォンで変更する方法 (2012.09.30)
logo「YUI Compressor」による圧縮と「ThemeTestDrive」の導入、あと「date.php」を作成しました。 (2012.11.17)

RSSの登録で最新記事をお届けします

フォローしてもらえると嬉しいです

F

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。

▲Pagetop