Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordCamp Tokyo 2012   TwentyTenをレスポンシブ化       したら勉強になったよ                 深水 一馬 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
自己紹介             深水 一馬(ふかみ かずま)             Twitter: @foom_in             Facebook: kazuma.fukami神奈川県大和市の会社に勤務。WordPressによ...
自己紹介            深水 一馬(ふかみ かずま)            Twitter: @foom_in            Facebook: kazuma.fukami  2011年に異業種から未経験で転職  Web業界歴は...
自己紹介            深水 一馬(ふかみ かずま)            Twitter: @foom_in            Facebook: kazuma.fukami製作の99%はTwenty Tenの子テーマです。Twe...
自己紹介            深水 一馬(ふかみ かずま)            Twitter: @foom_in            Facebook: kazuma.fukami         よろしくお願いします!TwentyTe...
Twenty Ten テーマについて      WordPressのTwenty Tenって           ご存じですか?TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Twenty Ten テーマについて          Twenty TenとはTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Twenty Ten テーマについて             20 10            Twenty      TenTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Twenty Ten テーマについて       WordPress 3.0から登場した    2010年版の標準テーマですTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Twenty Ten テーマについて              ◆スクショTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Twenty Ten テーマについて                           WordPress 3.2から                           デフォルトとなった                          ...
Twenty Ten テーマについて管理画面 → 外観 → テーマ                        Twenty Tenを使うには                        「利用可能なテーマ」   から           ...
レスポンシブウェブデザインについて    レスポンシブウェブデザイン?TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
レスポンシブウェブデザインについてCSS3のメディアクエリ(Media Querys)を使って表示デバイス(画面の幅)に応じてレイアウトが変わるマルチデバイス(スマホ)対応方法の一つ最大の利点はPC用ページとスマホ用ページを別々に用意しなくてす...
レスポンシブウェブデザインについてPC用とスマホ用で別々のHTMLを作る場合の例PC用ページwww.example.com/about.htmlスマホ用ページwww.example.com/sp/about.htmlレスポンシブを使うとPCもス...
WordPressのレスポンシブ対応                    のレスポンシブ対応TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
WordPressのレスポンシブ対応                のレスポンシブ対応         現在の標準テーマ  Twenty Elevenはレスポンシブ対応                        この人レスポンシブTwent...
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。ただし、テーマのバージョンアップ時にレスポンシブの記述が消えてしまうので子テーマを作る方がオススメ Twe...
実際にやってみよう1) 子テーマを作成する  子テーマのファイルは2つだけでOK header.phpは、オリジナルの Twenty Tenからコピーしてくる TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう    2) 子テーマのstyle.cssを編集TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集                            私はTwenty Tenの                            子テーマですよ!                ...
実際にやってみよう2) 子テーマのstyle.cssを編集  @media (max-width:○○){}を定義 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集    ターゲットとする端末(画面幅)や       デザインを考慮のうえ    しっかりと設計を行いましょう。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集      とは言え、今回はとりあえず TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集     Twenty Elevenのstyle.cssから      @media (max-width:○○){}         ○○の部分を拝借。 TwentyTenをレスポンシ...
実際にやってみよう2) 子テーマのstyle.cssを編集 Twenty Elevenのstyle.css             @media (max-width:○○∼の部分             Twenty Elevenでは800p...
実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集   非レスポンシブ                 レスポンシブ widthは原則pxで指定            widthは%で指定 されていることが多い TwentyTenをレス...
実際にやってみよう2) 子テーマのstyle.cssを編集      Twenty Ten            Twenty Eleven   非レスポンシブ                 レスポンシブ widthは原則pxで指定     ...
実際にやってみよう2) 子テーマのstyle.cssを編集      Twenty Ten            Twenty Eleven   非レスポンシブ                 レスポンシブ widthは原則pxで指定     ...
実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集                    pxを%に置き換える為の                       ポイントを追加する TwentyTenをレスポンシブ化したら勉強になったよ ...
実際にやってみよう1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう3) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集 サイドバーを落として2カラム→1カラム   にレイアウトの変更を行うには TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう2) 子テーマのstyle.cssを編集                           これだけっ! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう   3) 子テーマのheader.phpを編集TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
実際にやってみよう3) 子テーマのheader.phpを編集コピーしてきたheader.phpにmetaタグを追加<meta name="viewport" content="width=device-width,maximum-scale=1...
ここまで と これからここまでとりあえずTwenty Tenのレイアウトが画面幅に応じて変化するようになったTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
ここまで と これからここまで     子テーマのstyle.css 200行弱        製作時間 約2時間TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
ここまで と これからここまで          今日の説明だけでは         ???            かもしれません       (゚Д゚)TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
ここまで と これからここまで       とりあえず手を動かしてみると        レスポンシブって難しそう             ↓        何となく仕組みはわかった         くらいにはなると思いますTwentyTenをレ...
ここまで と これからこれから  でも、これでスマホ対応と言うには   ちょっと完成度が低いかも。TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
ここまで と これからこれから        メニューの折りたたみ        読み込む画像の切替え      3G回線での表示速度も考慮TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
おまけ       Responsive Twenty Ten               海外のサイトでレスポンシブな               Twenty Tenが配布されています               http://respon...
最後に   今日のスライドは後日公開しますTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
おしまい    ご静聴ありがとうございましたTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Upcoming SlideShare
Loading in …5
×

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

6,848 views

Published on

2012年9月15日に行われたWordCamp Tokyo 2012で登壇した際のスライドです。

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

  1. 1. WordCamp Tokyo 2012 TwentyTenをレスポンシブ化 したら勉強になったよ 深水 一馬 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  2. 2. 自己紹介 深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami神奈川県大和市の会社に勤務。WordPressによるWebサイト製作に携わるデザイナー/コーダー TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  3. 3. 自己紹介 深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami 2011年に異業種から未経験で転職 Web業界歴は1年ちょっとTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  4. 4. 自己紹介 深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami製作の99%はTwenty Tenの子テーマです。TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  5. 5. 自己紹介 深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami よろしくお願いします!TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  6. 6. Twenty Ten テーマについて WordPressのTwenty Tenって ご存じですか?TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  7. 7. Twenty Ten テーマについて Twenty TenとはTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  8. 8. Twenty Ten テーマについて 20 10 Twenty TenTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  9. 9. Twenty Ten テーマについて WordPress 3.0から登場した 2010年版の標準テーマですTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  10. 10. Twenty Ten テーマについて ◆スクショTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  11. 11. Twenty Ten テーマについて WordPress 3.2から デフォルトとなった Twenty Eleven テーマTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  12. 12. Twenty Ten テーマについて管理画面 → 外観 → テーマ Twenty Tenを使うには 「利用可能なテーマ」 から 「有効化」 しましょう。 こっち!TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  13. 13. レスポンシブウェブデザインについて レスポンシブウェブデザイン?TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  14. 14. レスポンシブウェブデザインについてCSS3のメディアクエリ(Media Querys)を使って表示デバイス(画面の幅)に応じてレイアウトが変わるマルチデバイス(スマホ)対応方法の一つ最大の利点はPC用ページとスマホ用ページを別々に用意しなくてすむこと。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  15. 15. レスポンシブウェブデザインについてPC用とスマホ用で別々のHTMLを作る場合の例PC用ページwww.example.com/about.htmlスマホ用ページwww.example.com/sp/about.htmlレスポンシブを使うとPCもスマホもwww.example.com/about.htmlPC・スマホ用の表示をCSSで切り替えるので、一つのHTMLを使って同一URLにすることができる。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  16. 16. WordPressのレスポンシブ対応 のレスポンシブ対応TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  17. 17. WordPressのレスポンシブ対応 のレスポンシブ対応 現在の標準テーマ Twenty Elevenはレスポンシブ対応 この人レスポンシブTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  18. 18. WordPressのレスポンシブ対応 のレスポンシブ対応 WordPress 3.5 から搭載される 新標準テーマ Twenty Twelve も レスポンシブ対応となっています。TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  19. 19. レスポンシブウェブデザインについて のレスポンシブ対応 WordPressには レスポンシブ対応のテーマが 多数存在しています!TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  20. 20. レスポンシブウェブデザインについて でも…TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  21. 21. レスポンシブウェブデザインについて Twenty Tenはレスポンシブじゃない (́・ω・`)TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  22. 22. レスポンシブウェブデザインについて Twenty Tenってレスポンシブに 改造できたりしないのかな (́・ω・`)TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  23. 23. レスポンシブウェブデザインについて なんて考えまして (`・ω・́)TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  24. 24. 実際にやってみた 仕事の合間に ちょっと試してみましたTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  25. 25. 実際にやってみた そうしたら…TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  26. 26. 実際にやってみた 意外と簡単に それっぽくなった!TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  27. 27. 作業の流れ 作業の流れTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  28. 28. 作業の流れ 1) 子テーマを作成する 2) style.cssを編集 3) header.phpを編集TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  29. 29. 実際にやってみよう 1) 子テーマを作成するTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  30. 30. 実際にやってみよう1) 子テーマを作成するレスポンシブのスタイルシートなどはTwenty Tenのstyle.cssに直接記述してもOK。ただし、テーマのバージョンアップ時にレスポンシブの記述が消えてしまうので子テーマを作る方がオススメ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  31. 31. 実際にやってみよう1) 子テーマを作成する 子テーマのファイルは2つだけでOK header.phpは、オリジナルの Twenty Tenからコピーしてくる TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  32. 32. 実際にやってみよう 2) 子テーマのstyle.cssを編集TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  33. 33. 実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  34. 34. 実際にやってみよう2) 子テーマのstyle.cssを編集 私はTwenty Tenの 子テーマですよ! 親テーマのCSSを 読み込む TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  35. 35. 実際にやってみよう2) 子テーマのstyle.cssを編集 @media (max-width:○○){}を定義 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  36. 36. 実際にやってみよう2) 子テーマのstyle.cssを編集 ターゲットとする端末(画面幅)や デザインを考慮のうえ しっかりと設計を行いましょう。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  37. 37. 実際にやってみよう2) 子テーマのstyle.cssを編集 とは言え、今回はとりあえず TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  38. 38. 実際にやってみよう2) 子テーマのstyle.cssを編集 Twenty Elevenのstyle.cssから @media (max-width:○○){} ○○の部分を拝借。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  39. 39. 実際にやってみよう2) 子テーマのstyle.cssを編集 Twenty Elevenのstyle.css @media (max-width:○○∼の部分 Twenty Elevenでは800px,650px,450pxの 3点が設定されている TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  40. 40. 実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  41. 41. 実際にやってみよう2) 子テーマのstyle.cssを編集 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定 されていることが多い TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  42. 42. 実際にやってみよう2) 子テーマのstyle.cssを編集 Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  43. 43. 実際にやってみよう2) 子テーマのstyle.cssを編集 Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定幅を可変させたい部分は px→%に置き換える TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  44. 44. 実際にやってみよう2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  45. 45. 実際にやってみよう2) 子テーマのstyle.cssを編集 pxを%に置き換える為の ポイントを追加する TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  46. 46. 実際にやってみよう1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  47. 47. 実際にやってみよう1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  48. 48. 実際にやってみよう3) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  49. 49. 実際にやってみよう2) 子テーマのstyle.cssを編集 サイドバーを落として2カラム→1カラム にレイアウトの変更を行うには TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  50. 50. 実際にやってみよう2) 子テーマのstyle.cssを編集 これだけっ! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  51. 51. 実際にやってみよう 3) 子テーマのheader.phpを編集TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  52. 52. 実際にやってみよう3) 子テーマのheader.phpを編集コピーしてきたheader.phpにmetaタグを追加<meta name="viewport" content="width=device-width,maximum-scale=1, initial-scale=1, user-scalable=no"> TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  53. 53. ここまで と これからここまでとりあえずTwenty Tenのレイアウトが画面幅に応じて変化するようになったTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  54. 54. ここまで と これからここまで 子テーマのstyle.css 200行弱 製作時間 約2時間TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  55. 55. ここまで と これからここまで 今日の説明だけでは ??? かもしれません (゚Д゚)TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  56. 56. ここまで と これからここまで とりあえず手を動かしてみると レスポンシブって難しそう ↓ 何となく仕組みはわかった くらいにはなると思いますTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  57. 57. ここまで と これからこれから でも、これでスマホ対応と言うには ちょっと完成度が低いかも。TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  58. 58. ここまで と これからこれから メニューの折りたたみ 読み込む画像の切替え 3G回線での表示速度も考慮TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  59. 59. おまけ Responsive Twenty Ten 海外のサイトでレスポンシブな Twenty Tenが配布されています http://responsivetwentyten.com/TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  60. 60. 最後に 今日のスライドは後日公開しますTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
  61. 61. おしまい ご静聴ありがとうございましたTwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬

×