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

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

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

深水 一馬

WordCamp Tokyo 2012

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

自己紹介

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

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

Twitter: @foom_in Facebook: kazuma.fukami

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

自己紹介

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

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

Twitter: @foom_in Facebook: kazuma.fukami

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

自己紹介

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

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

Twitter: @foom_in Facebook: kazuma.fukami

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

自己紹介

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

よろしくお願いします！

Twitter: @foom_in Facebook: kazuma.fukami

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

Twenty Ten テーマについて

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

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

Twenty Ten テーマについて

Twenty Tenとは

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

Twenty Ten テーマについて

Twenty20 10

Ten

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

Twenty Ten テーマについて

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

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

Twenty Ten テーマについて

◆スクショ

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

Twenty Ten テーマについて

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

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

Twenty Ten テーマについて

こっち！

管理画面 → 外観 → テーマ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressのレスポンシブ対応

のレスポンシブ対応

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

WordPressのレスポンシブ対応

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

のレスポンシブ対応

この人レスポンシブ

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

WordPressのレスポンシブ対応

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

のレスポンシブ対応

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

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

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

のレスポンシブ対応

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

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

でも…

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

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

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

(́･ω･`)

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

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

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

(́･ω･`)

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

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

なんて考えまして

(`･ω･́)

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

実際にやってみた

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

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

実際にやってみた

そうしたら…

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

実際にやってみた

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

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

作業の流れ

作業の流れ

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

作業の流れ

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

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

実際にやってみよう

1) 子テーマを作成する

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

実際にやってみよう

1) 子テーマを作成する

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

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

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

実際にやってみよう

1) 子テーマを作成する

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

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

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

実際にやってみよう

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

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

実際にやってみよう

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

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

実際にやってみよう

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

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

親テーマのCSSを読み込む

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

実際にやってみよう

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

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

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

実際にやってみよう

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

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

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

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

実際にやってみよう

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

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

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

実際にやってみよう

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

○○の部分を拝借。

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

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

実際にやってみよう

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

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

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

実際にやってみよう

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

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

実際にやってみよう

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

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

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

されていることが多い

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

実際にやってみよう

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

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

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

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

実際にやってみよう

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

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

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

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

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

実際にやってみよう

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

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

実際にやってみよう

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

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

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

実際にやってみよう

1) テーマのCSSを解析

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

実際にやってみよう

1) テーマのCSSを解析

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

実際にやってみよう

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

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

実際にやってみよう

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

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

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

実際にやってみよう

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

これだけっ！

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

実際にやってみよう

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

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

実際にやってみよう

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

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

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

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

ここまで と これから

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

ここまで

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

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

ここまで

ここまで と これから

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

ここまで と これから

今日の説明だけでは

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

ここまで

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

ここまで と これから

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

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

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

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

ここまで

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

ここまで と これから

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

これから

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

ここまで と これから

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

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

これから

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

おまけ

Responsive Twenty Ten

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

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

最後に

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

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

おしまい

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