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