Download as PDF, PPTX
Uploaded byKazuma Fukami
Twenty Tenをレスポンシブ化したら勉強になったよ
2012年9月15日に行われたWordCamp Tokyo 2012で登壇した際のスライドです。
![11月12日セミナー資料[pdf]](https://cdn.slidesharecdn.com/ss_thumbnails/1112pdf-131112125424-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法](https://cdn.slidesharecdn.com/ss_thumbnails/wordbenchrwd-140709214312-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Twenty Tenをレスポンシブ化したら勉強になったよ
- 1. WordCamp Tokyo 2012 TwentyTenをレスポンシブ化 したら勉強になったよ 深水 一馬 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 2. 自己紹介 深水 一馬（ふかみ かずま） Twitter: @foom_in Facebook: kazuma.fukami 神奈川県大和市の会社に勤務。 WordPressによるWebサイト製作に携わる デザイナー／コーダー TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 3. 自己紹介 深水 一馬（ふかみ かずま） Twitter: @foom_in Facebook: kazuma.fukami 2011年に異業種から未経験で転職 Web業界歴は１年ちょっと TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 4. 自己紹介 深水 一馬（ふかみ かずま） Twitter: @foom_in Facebook: kazuma.fukami 製作の９９％はTwenty Tenの子テーマです。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 5. 自己紹介 深水 一馬（ふかみ かずま） Twitter: @foom_in Facebook: kazuma.fukami よろしくお願いします！ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 6. Twenty Ten テーマについて WordPressのTwenty Tenって ご存じですか？ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 7. Twenty Ten テーマについて Twenty Tenとは TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 8. Twenty Ten テーマについて 20 10 Twenty Ten TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 9. Twenty Ten テーマについて WordPress 3.0から登場した 2010年版の標準テーマです TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 10. Twenty Ten テーマについて ◆スクショ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 11. Twenty Ten テーマについて WordPress 3.2から デフォルトとなった Twenty Eleven テーマ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 12. Twenty Ten テーマについて 管理画面→ 外観 → テーマ Twenty Tenを使うには 「利用可能なテーマ」 から 「有効化」 しましょう。 こっち！ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 13. レスポンシブウェブデザインについて レスポンシブウェブデザイン？ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 14.
- 15.
- 16. WordPressのレスポンシブ対応 のレスポンシブ対応 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 17. WordPressのレスポンシブ対応 のレスポンシブ対応 現在の標準テーマ Twenty Elevenはレスポンシブ対応 この人レスポンシブ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 18. WordPressのレスポンシブ対応 のレスポンシブ対応 WordPress 3.5 から搭載される 新標準テーマ Twenty Twelve も レスポンシブ対応となっています。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 19. レスポンシブウェブデザインについて のレスポンシブ対応 WordPressには レスポンシブ対応のテーマが 多数存在しています！ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 20. レスポンシブウェブデザインについて でも… TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 21. レスポンシブウェブデザインについて Twenty Tenはレスポンシブじゃない (́･ω･`) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 22. レスポンシブウェブデザインについて Twenty Tenってレスポンシブに 改造できたりしないのかな (́･ω･`) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 23. レスポンシブウェブデザインについて なんて考えまして (`･ω･́) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 24. 実際にやってみた 仕事の合間に ちょっと試してみました TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 25. 実際にやってみた そうしたら… TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 26. 実際にやってみた 意外と簡単に それっぽくなった！ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 27. 作業の流れ 作業の流れ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 28. 作業の流れ 1) 子テーマを作成する 2) style.cssを編集 3) header.phpを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 29. 実際にやってみよう 1) 子テーマを作成する TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 30. 実際にやってみよう 1) 子テーマを作成する レスポンシブのスタイルシートなどは Twenty Tenのstyle.cssに直接記述してもOK。 ただし、テーマのバージョンアップ時に レスポンシブの記述が消えてしまうので 子テーマを作る方がオススメ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 31. 実際にやってみよう 1) 子テーマを作成する 子テーマのファイルは２つだけでOK header.phpは、オリジナルの Twenty Tenからコピーしてくる TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 32. 実際にやってみよう 2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 33.
- 34. 実際にやってみよう 2) 子テーマのstyle.cssを編集 私はTwenty Tenの 子テーマですよ！ 親テーマのCSSを 読み込む TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 35. 実際にやってみよう 2) 子テーマのstyle.cssを編集 @media (max-width:○○){}を定義 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 36. 実際にやってみよう 2) 子テーマのstyle.cssを編集 ターゲットとする端末(画面幅)や デザインを考慮のうえ しっかりと設計を行いましょう。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 37. 実際にやってみよう 2) 子テーマのstyle.cssを編集 とは言え、今回はとりあえず TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 38. 実際にやってみよう 2) 子テーマのstyle.cssを編集 Twenty Elevenのstyle.cssから @media (max-width:○○){} ○○の部分を拝借。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 39. 実際にやってみよう 2) 子テーマのstyle.cssを編集 TwentyElevenのstyle.css @media (max-width:○○∼の部分 Twenty Elevenでは800px,650px,450pxの ３点が設定されている TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 40.
- 41. 実際にやってみよう 2) 子テーマのstyle.cssを編集 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは％で指定 されていることが多い TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 42. 実際にやってみよう 2) 子テーマのstyle.cssを編集 Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは％で指定 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 43. 実際にやってみよう 2) 子テーマのstyle.cssを編集 Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは％で指定 幅を可変させたい部分は px→%に置き換える TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 44.
- 45. 実際にやってみよう 2) 子テーマのstyle.cssを編集 pxを%に置き換える為の ポイントを追加する TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 46.
- 47.
- 48.
- 49. 実際にやってみよう 2) 子テーマのstyle.cssを編集 サイドバーを落として2カラム→１カラム にレイアウトの変更を行うには TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 50. 実際にやってみよう 2) 子テーマのstyle.cssを編集 これだけっ！ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 51. 実際にやってみよう 3) 子テーマのheader.phpを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 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. ここまで と これから ここまで とりあえずTwentyTenのレイアウトが 画面幅に応じて変化するようになった TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 54. ここまで と これから ここまで 子テーマのstyle.css 200行弱 製作時間 約2時間 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 55. ここまで と これから ここまで 今日の説明だけでは ？？？ かもしれません （ﾟДﾟ） TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 56. ここまで と これから ここまで とりあえず手を動かしてみると レスポンシブって難しそう ↓ 何となく仕組みはわかった くらいにはなると思います TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 57. ここまで と これから これから でも、これでスマホ対応と言うには ちょっと完成度が低いかも。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 58. ここまで と これから これから メニューの折りたたみ 読み込む画像の切替え 3G回線での表示速度も考慮 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 59. おまけ Responsive Twenty Ten 海外のサイトでレスポンシブな Twenty Tenが配布されています http://responsivetwentyten.com/ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 60. 最後に 今日のスライドは後日公開します TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
- 61. おしまい ご静聴ありがとうございました TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬