WordPressのTwenty Tenテーマをレスポンシブにしてみた

最新バージョンのWordPress(バージョン3.3.2現在)では、デフォルトテーマが「Twenty Eleven」というテーマで、このテーマがレスポンシブデザインになっているのは有名です。

私はTwenty Elevenテーマはまだまだ勉強中なので、納品するサイトを制作する際は、一つ前のデフォルトテーマだった「Twenty Ten」の子テーマをよく使っています。

当然このテーマはレスポンシブではないので、スマートフォンなどに最適化したレイアウトで表示させるには、それなりにカスタマイズするとか、プラグインを使う(WP touchとか)必要があります。

また、Twenty Tenベースで制作したサイトを、後からスマホに対応させるという要望が今後出てくる気がしなくもないので、何か良い方法がないか日々検討していたりします。

一つの考えとして、いっそTwenty Tenがレスポンシブ対応になればいいんじゃないか?というのがありまして、ちょっと面白そうなのでやってみました。

作業としては、Twenty Tenの子テーマを作って、style.cssに150行ほど書いただけではありますが、ウィンドウの幅に応じてレイアウトが変わる様はまさにレスポンシブw。
思ったよりちゃんとできてます。なんか楽しいぞ。

あ、スマートフォンからも表示できました。

実際の動きはこちらからどうぞ
サンプルサイト 

これをどのように活用するかは…微妙ですが、一応こういうこともできるということで、いい勉強になりました。

追記:ソース公開のご要望を頂いたので、続きの記事を書きました。

WordPressのTwenty Tenテーマをレスポンシブにしてみた” への3件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>