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.

underscores (_s) を使おう! ― WordPressとおやつの会 Dec. 2012

2012/12/1 ネコワーキングにて発表した際のスライドです。

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

underscores (_s) を使おう! ― WordPressとおやつの会 Dec. 2012

  1. 1. WordPressとおやつの会 Volume 9, December 2012
  2. 2. 本日はご来場ありがとうございます
  3. 3. WordPressとおやつの会2010年9月にスタート
  4. 4. WordPressとおやつの会2010年9月にスタート仕事仲間の水玉製作所・梅原さんが主催している「Flashとおやつの会」にインスパイアされて作りました
  5. 5. WordPressとおやつの会2010年9月にスタート仕事仲間の水玉製作所・梅原さんが主催している「Flashとおやつの会」にインスパイアされて作りましたゆるく、まったりやってます
  6. 6. WordPressとおやつの会Facebook: www.facebook.com/wp.oyatsuTwitter: @WordPressOyatsu
  7. 7. 本日の内容自己紹介をしましょう本編:underscoresでテーマデザイン!
  8. 8. まず、自己紹介タイム。
  9. 9. 自己紹介いがらし たけし(@takeshi81)
  10. 10. 自己紹介いがらし たけし(@takeshi81)Webディレクター/フリーランス
  11. 11. 自己紹介いがらし たけし(@takeshi81)Webディレクター/フリーランス今年から事務所が新大久保からここ水道橋ネコワーキングに移りました。
  12. 12. こんな事務所です
  13. 13. こんな事務所です
  14. 14. こんな事務所です
  15. 15. 遊びに来てね♪こんな事務所です
  16. 16. 自己紹介Eコマースサイトの構築が得意です。
  17. 17. 自己紹介Eコマースサイトの構築が得意です。最近、向学のために自分のBtoCサイトを立ちあげました。
  18. 18. こんなお店やってます
  19. 19. 一度見に来てねwww.huhtikuu.jp
  20. 20. 北欧デザイン雑貨 フフティクー WordPress+Welcartで構築してます。
  21. 21. 北欧デザイン雑貨 フフティクー WordPress+Welcartで構築してます。 テーマはunderscores(_s)を使ってます。
  22. 22. underscores (_s) ?
  23. 23. underscores (_s)Toolboxテーマからforkしました。
  24. 24. underscores (_s)Toolboxテーマからforkしました。http://underscores.me/ で配布しています。
  25. 25. underscores (_s)Toolboxテーマからforkしました。http://underscores.me/ で配布しています。デザインワークに便利な設計になっています。
  26. 26. underscores (_s) の特徴(公式サイトから、英語の苦手なイガラシが適当に訳)
  27. 27. _s の特徴無駄のない、モダンなHTML5テンプレート親切な404 Not Foundページデフォルトは英語のみだけど、訳を当てればOKカスタムヘッダーのサンプルもありfunctions.phpのコメントを外すだけ
  28. 28. _s の特徴カスタムテンプレートタグをまとめてテンプレートをきれいに保つ inc/templete-tags.phpテーマオプションのサンプルfunctions.phpのコメントを外すだけいくつかの微調整がinc/tweaks.phpにfunctions.phpのコメントを外すだけ
  29. 29. _s の特徴画像を添付したテンプレートにキーボードナビゲーションを追加できますスマートフォンなど小さな画面でドロップダウンメニューが使えるJavaScript5種類のレイアウトサンプルCSSスマートにまとめられた style.css
  30. 30. _s の style.css
  31. 31. _s の style.cssデザイン的な要素は入ってません
  32. 32. _s の style.cssデザイン的な要素は入ってません→ 好きなようにスタイルを組めます
  33. 33. _s を適用しただけのページ
  34. 34. _s の style.cssデザイン的な要素は入ってません→ 好きなようにスタイルを組めますReset CSS & Normalize.css
  35. 35. _s の style.cssデザイン的な要素は入ってません→ 好きなようにスタイルを組めますReset CSS & Normalize.css→ 最初から入ってます!(Blueprintも少し)
  36. 36. ところで、皆さん…
  37. 37. 普段、どうやってテーマをデザインしてますか?
  38. 38. ものぐさな私のテーマデザインスクラッチで
  39. 39. ものぐさな私のテーマデザインスクラッチで → 時間がかかる…めんどい…
  40. 40. ものぐさな私のテーマデザインスクラッチで → 時間がかかる…めんどい…テーマフレームワークを使えばいいじゃない
  41. 41. ものぐさな私のテーマデザインスクラッチで → 時間がかかる…めんどい…テーマフレームワークを使えばいいじゃない私は Toolbox をベースに作ってました
  42. 42. ものぐさな私のテーマデザインToolboxテーマを追加
  43. 43. ものぐさな私のテーマデザインToolboxテーマを追加Toolboxの子テーマを作成
  44. 44. ものぐさな私のテーマデザインToolboxテーマを追加Toolboxの子テーマを作成必要なファイルを子テーマのフォルダに追加
  45. 45. ものぐさな私のテーマデザインToolboxテーマを追加Toolboxの子テーマを作成必要なファイルを子テーマのフォルダに追加一丁上がり!
  46. 46. でも _s で作るなら、子テーマはいりません。
  47. 47. 新・ものぐさな私のテーマデザイン 自分で決めた名前の _s テーマを追加
  48. 48. 新・ものぐさな私のテーマデザイン 自分で決めた名前の _s テーマを追加 テーマフォルダに画像などを追加、CSSを 追記 etc.
  49. 49. 新・ものぐさな私のテーマデザイン 自分で決めた名前の _s テーマを追加 テーマフォルダに画像などを追加、CSSを 追記 etc. 一丁上がり!
  50. 50. 練習 1:早速 _s をさわってみましょう! ダウンロードからインストールまで
  51. 51. 練習 2: レイアウトを考えます2 or 3 カラム?サイドバーは左 or 右?
  52. 52. 練習 3:味付けはお好みで 背景・フォント etc.
  53. 53. お疲れ様でした。またのご参加お待ちしております。

×