twenty tenをレスポンシブ化したら勉強になったよ

TwentyTenをレスポンシブ化したら勉強になったよ / 深水一馬

TwentyTenをレスポンシブ化したら勉強になったよ

深水一馬

WordCamp Tokyo 2012


自己紹介

深水一馬（ふかみかずま）

神奈川県大和市の会社に勤務。WordPressによるWebサイト製作に携わるデザイナー／コーダー

Twitter: @foom_in Facebook: kazuma.fukami


自己紹介


2011年に異業種から未経験で転職Web業界歴は１年ちょっと



自己紹介


製作の９９％はTwenty Tenの子テーマです。



自己紹介


よろしくお願いします！



Twenty Ten テーマについて

WordPressのTwenty Tenってご存じですか？



Twenty Tenとは



Twenty20 10

Ten



WordPress 3.0から登場した2010年版の標準テーマです



◆スクショ



WordPress 3.2からデフォルトとなったTwenty Eleven テーマ



こっち！

管理画面 → 外観 → テーマ

Twenty Tenを使うには「利用可能なテーマ」から「有効化」しましょう。


レスポンシブウェブデザインについて

レスポンシブウェブデザイン？



CSS3のメディアクエリ(Media Querys)を使って表示デバイス(画面の幅)に応じてレイアウトが変わるマルチデバイス(スマホ)対応方法の一つ

最大の利点はPC用ページとスマホ用ページを別々に用意しなくてすむこと。



スマホ用ページwww.example.com/sp/about.html

PC用ページwww.example.com/about.htmlPC用とスマホ用で別々のHTMLを作る場合の例

PCもスマホもwww.example.com/about.htmlレスポンシブを使うと

PC・スマホ用の表示をCSSで切り替えるので、一つのHTMLを使って同一URLにすることができる。


WordPressのレスポンシブ対応

のレスポンシブ対応



現在の標準テーマTwenty Elevenはレスポンシブ対応


この人レスポンシブ



WordPress 3.5 から搭載される新標準テーマ Twenty Twelve もレスポンシブ対応となっています。




WordPressにはレスポンシブ対応のテーマが多数存在しています！




でも…



Twenty Tenはレスポンシブじゃない

(́･ω･`)



Twenty Tenってレスポンシブに改造できたりしないのかな

(́･ω･`)



なんて考えまして

(`･ω･́)


実際にやってみた

仕事の合間にちょっと試してみました



そうしたら…



意外と簡単にそれっぽくなった！


作業の流れ

作業の流れ


作業の流れ

1) 子テーマを作成する2) style.cssを編集3) header.phpを編集


実際にやってみよう

1) 子テーマを作成する




レスポンシブのスタイルシートなどはTwenty Tenのstyle.cssに直接記述してもOK。

ただし、テーマのバージョンアップ時にレスポンシブの記述が消えてしまうので子テーマを作る方がオススメ




子テーマのファイルは２つだけでOK

header.phpは、オリジナルのTwenty Tenからコピーしてくる



2) 子テーマのstyle.cssを編集




私はTwenty Tenの子テーマですよ！

親テーマのCSSを読み込む



@media (max-width:○○){}を定義




ターゲットとする端末(画面幅)やデザインを考慮のうえ

しっかりと設計を行いましょう。




とは言え、今回はとりあえず




Twenty Elevenのstyle.cssから@media (max-width:○○){}

○○の部分を拝借。




@media (max-width:○○～の部分Twenty Elevenでは800px,650px,450pxの３点が設定されている

2) 子テーマのstyle.cssを編集Twenty Elevenのstyle.css




非レスポンシブwidthは原則pxで指定

レスポンシブwidthは％で指定

されていることが多い



2) 子テーマのstyle.cssを編集Twenty ElevenTwenty Ten





2) 子テーマのstyle.cssを編集Twenty ElevenTwenty Ten



幅を可変させたい部分はpx→%に置き換える




pxを%に置き換える為のポイントを追加する



1) テーマのCSSを解析



サイドバーを落として2カラム→１カラムにレイアウトの変更を行うには





これだけっ！



3) 子テーマのheader.phpを編集



3) 子テーマのheader.phpを編集

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">

コピーしてきたheader.phpにmetaタグを追加


ここまでとこれから

とりあえずTwenty Tenのレイアウトが画面幅に応じて変化するようになった

ここまで


子テーマのstyle.css 200行弱製作時間約2時間

ここまで




今日の説明だけでは

（ﾟДﾟ）かもしれません？？？

ここまで



レスポンシブって難しそう↓

何となく仕組みはわかった

くらいにはなると思います

とりあえず手を動かしてみると

ここまで



でも、これでスマホ対応と言うにはちょっと完成度が低いかも。

これから



メニューの折りたたみ読み込む画像の切替え

3G回線での表示速度も考慮

これから


おまけ

Responsive Twenty Ten

海外のサイトでレスポンシブなTwenty Tenが配布されていますhttp://responsivetwentyten.com/


最後に

今日のスライドは後日公開します


おしまい

ご静聴ありがとうございました

twenty tenをレスポンシブ化したら勉強になったよ

Documents