Suche senden
Hochladen
今から始めよう!WordPressで作る女子ウケ★スマホサイト
•
9 gefällt mir
•
3,714 views
rie05
Folgen
WordCamp Osaka 2012でお話した「今から始めよう!WordPressで作る女子ウケ★スマホサイト」セッション資料です。
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 49
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
松田 千尋
Bootstrap
Bootstrap
kenji goto
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
Empfohlen
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
松田 千尋
Bootstrap
Bootstrap
kenji goto
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
climbFrog
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
株式会社ND&I しかたこうき
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
WP REST API の活用事例と今後
WP REST API の活用事例と今後
Yuusuke Yoshida
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
H2O Space. Co., Ltd.
Weitere ähnliche Inhalte
Was ist angesagt?
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
株式会社ND&I しかたこうき
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
WP REST API の活用事例と今後
WP REST API の活用事例と今後
Yuusuke Yoshida
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
Was ist angesagt?
(20)
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP REST API の活用事例と今後
WP REST API の活用事例と今後
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
Ähnlich wie 今から始めよう!WordPressで作る女子ウケ★スマホサイト
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
H2O Space. Co., Ltd.
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
switch3000
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
Mitsuru Katoh
About rails 3
About rails 3
issei126
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
kenji goto
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
Yoshito Tabuchi
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版
Tomoki Hasegawa
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Yoshito Tabuchi
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
Demo120724
Demo120724
Kazuo Shimokawa
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Apps for Web Platform
Apps for Web Platform
dynamis
Ähnlich wie 今から始めよう!WordPressで作る女子ウケ★スマホサイト
(20)
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
20120316 designerworkshoppublished
20120316 designerworkshoppublished
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
About rails 3
About rails 3
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
はじめてのiOSアプリ開発 Swift対応版
はじめてのiOSアプリ開発 Swift対応版
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Demo120724
Demo120724
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Apps for Web Platform
Apps for Web Platform
Mehr von rie05
Pulse CMS Meetup #2
Pulse CMS Meetup #2
rie05
20160124_GPL勉強会
20160124_GPL勉強会
rie05
141219 まにフェス
141219 まにフェス
rie05
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
rie05
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
rie05
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
rie05
Wordcamp東京
Wordcamp東京
rie05
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
Mehr von rie05
(8)
Pulse CMS Meetup #2
Pulse CMS Meetup #2
20160124_GPL勉強会
20160124_GPL勉強会
141219 まにフェス
141219 まにフェス
デザインはおまかせで、丸投げされた時どうする?
デザインはおまかせで、丸投げされた時どうする?
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
Wordcamp東京
Wordcamp東京
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
今から始めよう!WordPressで作る女子ウケ★スマホサイト
1.
2.
さいしょに この資料は後日アップロードされます! WordCamp大阪公式サイトにリンク掲載します
http://2012.osaka.wordcamp.org/
3.
自己紹介
瀬口理恵(せぐちりえ)@rie05 1983年大阪うまれ大阪そだち 5DGの屋号でフリーランスデザイナーしてます Web/DTP/AppUI/講師業/Ust配信 etc WordCamp大阪 実行委員長 WordBench大阪 管理人 WordCamp神戸実行委員・スピーカー @rie05 /rie.seguchi
4.
アジェンダ
女子ウケなスマホサイトをWPで! 1 4 コーディングと 最新スマホ事情 WPテーマ化 2 5 スマホサイトとは 検証環境について 3 6 スマホサイトデザイン まとめ
5.
最新スマホ事情
1 最新スマホ事情
6.
最新スマホ事情 スマートフォン
持ってる人!
7.
最新スマホ事情
2011年9月11日にWordCamp神戸で使った資料データ (MM総研調べ)
8.
最新スマホ事情
現在の推移 (MM総研調べ)
9.
最新スマホ事情 つい最近の出来事は… ■iPhone5登場! ■Android最新機種は OS4.1 ■Windows Phoneは
Windows8発売と共に8搭載機種発売の見込み
10.
最新スマホ事情 iPhone
Android Windows Phone
11.
最新スマホ事情
(MM総研調べ)
12.
スマホサイトとは
2 スマホサイトとは
13.
スマホサイトとは
スマートフォンに最適化 されているサイト 例)楽天市場TOPページ
14.
スマホサイトとは
スマートフォンに最適化 されていないサイト 例)Tullys Coffeeサイト
15.
スマホサイトとは ★スマートフォンに最適化されているサイトとは… マウスではなく指でタップするため、ボタンは押しやすくするなど の独自UIが必要 弱い3G回線でみられることも考慮した軽量化サイト
太陽光の下で見られても見やすいようコントラストに注意した配色 ユーザーエージェントをみて振り分け
16.
スマホサイトとは スマホ制作、いろいろなアプローチ
17.
スマホサイトとは HTML5 + CSS3/
Javascriptで制作
18.
スマホサイトとは
Jquery mobileで制作
19.
スマホサイトとは マルチデバイスに対応、ワンソースで運用する レスポンシブ・ウェブデザイン
20.
スマホサイトとは
オリジナルデザインを作って WordPressでスマホテーマ制作
21.
スマホサイトとは WordPressとは 世界標準のWebパブリッシングプラットフォーム ✓ブログ、CMSとしてWebサイトを効率良く制作できるソフトウェア ✓世界中でのWebサイトで約1割以上は、WordPressで作られたサイト
22.
スマホサイトデザイン
3 スマホサイトデザイン
23.
スマホサイトデザイン
iPhone Android ボタンは1つ ボタンは3つ (ホーム) (メニュー/ホーム/戻る)
24.
スマホサイトデザイン http://static.lukew.com/TouchGestureGuide.pdf
25.
スマホサイトデザイン
スマホサイトペーパープロトタイプ Project: Date: Notes: Notes: SINGLE VIEW LAYOUT SCROLL VIEW LAYOUT
26.
スマホサイトデザイン
ワイヤー作成オンラインツール Cacoo https://cacoo.com/
27.
スマホサイトデザイン ∼実例ギャラリーサイト∼ ★スマートフォンサイト集めました。 http://sp-web.jp/ ★iPhone対応サイト トップ |
meet i [ミートアイ] http://web.meet-i.com/?type=web ★iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています http://www.ishowcase.jp/ ★優れたiPhoneサイトデザイン集 - iPhoneデザインボックス http://design.web-hon.com/
28.
スマホサイトデザイン
∼UIパターンサイト∼ http://pttrns.com/logins http://www.lovelyui.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http://mockapp.com/m/Home.html
29.
デザイン/UI リキッド(可変幅)でデザインする →Landscape(横画面)表示対策 角丸やグラデ、ドロップシャドウはCSS3で表現
ロールオーバーがないためテキストリンクは色を 変え下線を引くなど、タップでアクションがあるボ タンはデザインに統一性を。
30.
スマホサイトデザイン 私はデザインはPhotoshopで作ります
このへんは好みで Adobe Photoshop®
31.
スマホサイトデザイン デザインするサイズについて
width:320px height:480px ? Retina display対応 高解像度端末の対応?
32.
スマホサイトデザイン width:320px height:480px
width:640px height:960px Photoshopで50%縮小表示しながら制作
33.
スマホサイトデザイン
デモサイトつくりました
34.
スマホサイトデザイン
DEMO
35.
コーディングとWPテーマ化 4 コーディングとWordPressテーマ化
36.
コーディングとWPテーマ化 私はコーディングはCodaを使います
このへんは好みで
37.
コーディングとWPテーマ化
まずはコーディングから。 積極的に最新技術を使っていきましょう
38.
コーディングとWPテーマ化 <meta name="viewport" content="width=device-width"
/> viewportとは? ウィンドウのサイズのようなもの。初期値は横幅980px。 このコードをhtmlのhead内に書いて指定してあげること で任意の横幅を指定できる。width:device-width と指定すると、そのデバイスの幅で調整されます。
39.
コーディングとWPテーマ化 コーディングが終わったらテーマ化 公式テーマ公開やテーマ配布をしない場合、
最小構成で作ってしまいましょう
40.
コーディングとWPテーマ化
テーマ構成 index.php style.css php css header.php footer.php php php include(読み込み) してくる用
41.
コーディングとWPテーマ化 コーディングしたデータをテーマ構成用に拡張子を 変えて.phpにする cssはひとつのstyle.cssファイルにまとめる
ファイルにWPタグをいれていく →DEMO
42.
コーディングとWPテーマ化
WordPress3.4から使えるようになった 条件分岐関数→wp_is_mobile <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?> スマホ用コンテンツ <?php else: ?> PC用コンテンツ <?php endif; ?> 注意!このままだとタブレットもスマホ用と判定されてしまうので カスタマイズしないとだめ。
43.
コーディングとWPテーマ化
プラグイン ■Multi Device Switcher http://wordpress.org/extend/plugins/multi-device-switcher/ インストール→有効化でスマホ用、タブレット用などのデバイスでどのテーマを表示させ るか設定できます。国産、アップデートも2012/10/16にされています。
44.
コーディングとWPテーマ化
容量制限に注意 GIF/PNG/TIFF:3メガピクセル以下 JPEG:32メガピクセル以下 HTML/CSS/JS:10MB以下 JSは実行速度10秒以内
45.
検証環境について
5 検証環境について
46.
検証環境について Macなら→iOSシミュレーター Xcodeをインストール、その後iOSでmac検索
それ以外なら→Mobilizer Adobe Airの簡易シミュレーターツール 簡易シミュレーター(Adobe Air製)Mobilizer http://www.springbox.com/mobilizer/ ブラウザ確認→Safariで開発メニューからユーザーエージェント変更
47.
まとめ
6 まとめ
48.
まとめ ♥ 色々な手法があるけどターゲット、目的に合った設 計をするのはPCサイトもスマホサイトも同じ ♥最新の技術を追っていく事になるので日々勉強! ♥ WordPressはphpで構成されているけどデザイ ナーさんが触りやすいような作りだと思います
Jetzt herunterladen