WordPress のレスポンシブな新テーマ [ Twenty Twelve ] を試してみました!

WordPress の純正テーマで、シンプルでレスポンシブな新テーマ [ [Twenty Twelve](http://wordpress.org/extend/themes/twentytwelve) ] を試してみました!

▲ [Twenty Twelve](http://wordpress.org/extend/themes/twentytwelve)

[ Twenty Twelve ] の特徴
———————————————————————-

– シンプル・エレガントなデザイン。
– レスポンシブ・デザイン対応のテーマ。
– ホームページのみに表示されるウィジェットを置くことができる。
– カスタムヘッダー ( 960 x 250 px ) は自分で用意する。
– WordPress 3.5 からバンドルされるようだ。

[ Twenty Twelve ] でカスタマイズした所
———————————————————————-

Twenty Twelve 1.0 がバージョンアップした時も対応できるように子テーマを作ってカスタマイズしました。

– page.php と single.php に Facebook の LikeBox を設置。
– Facebook LikeBox コードにある iframe 要素の style 属性の width を 100% にしてレスポンシブ対応。
– 縮小された画像の縦横比がおかしかったので、`img { height:auto; }` のスタイルを追加。
– フォントをちょこっと変えた。
– 自前の function.php を移植した。
– 自前の JavaScript を読み込むようにした。
– 960 x 250 px のヘッダーイメージ作った。

あとは、IETester で IE6, 7, 8, 9 の表示を軽く確認しておいた。

今回の環境
———————————————————————-

– [Twenty Twelve](http://wordpress.org/extend/themes/twentytwelve) 1.0
– WordPress 3.4.2
レンタルサーバー シックスコア ( SIXCORE S1 プラン )

参考にさせてもらったページ
———————————————————————-

– [新テーマ: Twenty Twelve — ブログ — WordPress.com](http://ja.blog.wordpress.com/2012/08/29/new-theme-twenty-twelve/)
– [Facebook Like Boxを幅100%にする(レスポンシブWebデザイン対応) | Web Showjin](http://web.showjin.me/2012/07/facebook-like-box_width100percen.html)
– [LikeBoxの横幅を自動で調整することは可能でしょうか? « fb.developers’+](http://fb.dev-plus.jp/forum/topic.php?id=89)

ありがとうございます!

コメントを残す

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