Submit Search
Upload
WordPressスマートフォンテーマ制作
•
1 like
•
599 views
Tsuyoshi.
Follow
第4回ゆるふわ勉強会でお話した時のスライドです。
Read less
Read more
Software
Report
Share
Report
Share
1 of 18
Recommended
Pre-tryout workouts
Pre-tryout workouts
Tony Squire
Feliz día mama
Feliz día mama
Jair Klezz
Business magazine edition_5-2016pdf
Business magazine edition_5-2016pdf
Onno Annema
Lester Cohn recommendation_Nick Shields_Navy Pier
Lester Cohn recommendation_Nick Shields_Navy Pier
Lester Cohn
Chino medio ambiente
Chino medio ambiente
Carlos Yair Merino
040.haikai camadas nitretadas e aplicações ii
040.haikai camadas nitretadas e aplicações ii
João Carmo Vendramim
DuPont Model Flow
DuPont Model Flow
ROBERT SOUSEK
Zamil Nizar
Zamil Nizar
Zamil Nizar
Recommended
Pre-tryout workouts
Pre-tryout workouts
Tony Squire
Feliz día mama
Feliz día mama
Jair Klezz
Business magazine edition_5-2016pdf
Business magazine edition_5-2016pdf
Onno Annema
Lester Cohn recommendation_Nick Shields_Navy Pier
Lester Cohn recommendation_Nick Shields_Navy Pier
Lester Cohn
Chino medio ambiente
Chino medio ambiente
Carlos Yair Merino
040.haikai camadas nitretadas e aplicações ii
040.haikai camadas nitretadas e aplicações ii
João Carmo Vendramim
DuPont Model Flow
DuPont Model Flow
ROBERT SOUSEK
Zamil Nizar
Zamil Nizar
Zamil Nizar
BECS Energy Efficiency Concierge Services
BECS Energy Efficiency Concierge Services
ASI Aireko Services Installations
Que es la filosofía
Que es la filosofía
mrkarenb
Técnicas de redacción de textos
Técnicas de redacción de textos
Valery GaraviiTo
Proyecto Ciencias Naturales - Elisa
Proyecto Ciencias Naturales - Elisa
tnruizg
Privacidad y Protección de Datos Personales
Privacidad y Protección de Datos Personales
AndreaYebra
Animales vertebrados e invertebrados - Parte 5
Animales vertebrados e invertebrados - Parte 5
tnruizg
Redacción de una carta formal
Redacción de una carta formal
Juan José Rodríguez Díaz
Libro etica
Libro etica
Marcelitha Marcelitha
iosアプリのPaintcode利用
iosアプリのPaintcode利用
Rika Kurano
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
エピック・ゲームズ・ジャパン Epic Games Japan
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
Html5minute #5
Html5minute #5
Misaki Shibata
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
switch3000
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
内蔵化、モバイル化に向かうDepthセンサー
内蔵化、モバイル化に向かうDepthセンサー
Kaoru NAKAMURA
More Related Content
Viewers also liked
BECS Energy Efficiency Concierge Services
BECS Energy Efficiency Concierge Services
ASI Aireko Services Installations
Que es la filosofía
Que es la filosofía
mrkarenb
Técnicas de redacción de textos
Técnicas de redacción de textos
Valery GaraviiTo
Proyecto Ciencias Naturales - Elisa
Proyecto Ciencias Naturales - Elisa
tnruizg
Privacidad y Protección de Datos Personales
Privacidad y Protección de Datos Personales
AndreaYebra
Animales vertebrados e invertebrados - Parte 5
Animales vertebrados e invertebrados - Parte 5
tnruizg
Redacción de una carta formal
Redacción de una carta formal
Juan José Rodríguez Díaz
Libro etica
Libro etica
Marcelitha Marcelitha
Viewers also liked
(8)
BECS Energy Efficiency Concierge Services
BECS Energy Efficiency Concierge Services
Que es la filosofía
Que es la filosofía
Técnicas de redacción de textos
Técnicas de redacción de textos
Proyecto Ciencias Naturales - Elisa
Proyecto Ciencias Naturales - Elisa
Privacidad y Protección de Datos Personales
Privacidad y Protección de Datos Personales
Animales vertebrados e invertebrados - Parte 5
Animales vertebrados e invertebrados - Parte 5
Redacción de una carta formal
Redacción de una carta formal
Libro etica
Libro etica
Similar to WordPressスマートフォンテーマ制作
iosアプリのPaintcode利用
iosアプリのPaintcode利用
Rika Kurano
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
エピック・ゲームズ・ジャパン Epic Games Japan
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
Html5minute #5
Html5minute #5
Misaki Shibata
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
switch3000
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
内蔵化、モバイル化に向かうDepthセンサー
内蔵化、モバイル化に向かうDepthセンサー
Kaoru NAKAMURA
デスクトップ アプリがこの先生きのこるには
デスクトップ アプリがこの先生きのこるには
Manato KAMEYA
レスポンシブイメージとWordPressで扱われるイメージサイズ
レスポンシブイメージとWordPressで扱われるイメージサイズ
Akiko Kasaya
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Developers Summit
Similar to WordPressスマートフォンテーマ制作
(17)
iosアプリのPaintcode利用
iosアプリのPaintcode利用
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
全部知ってたらTwinmotionマスター!TwinmotionのぷちTips・テクニック
スマートフォン・タブレットに対応したサイト構築の考え方
スマートフォン・タブレットに対応したサイト構築の考え方
Html5minute #5
Html5minute #5
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
内蔵化、モバイル化に向かうDepthセンサー
内蔵化、モバイル化に向かうDepthセンサー
デスクトップ アプリがこの先生きのこるには
デスクトップ アプリがこの先生きのこるには
レスポンシブイメージとWordPressで扱われるイメージサイズ
レスポンシブイメージとWordPressで扱われるイメージサイズ
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
WordPressスマートフォンテーマ制作
1.
WordPress スマートフォンテーマ制作 Tsuyoshi.
2.
自己紹介 名前:Tsuyoshi. 仕事:Web屋 所属:WordBench 福岡 Custom Field
GUI Utility Extenderというプラグインをひっそりとブログで公 開させて頂いてます。
3.
デバイスのスクリーンサイズ 1280px 800px
4.
デバイスのスクリーンサイズ 320px 480px iPhone iPhone4/4Sの場合、デ ィスプレイのサイズは 3GSと同じだが、実際の 解像度は960px × 640px となっている。
5.
viewport PCサイトの表示 そもそも700∼1000pxくらいの PCサイトを表示したら切れるので は?
6.
viewport viewport 980px viewportを指定することでPCサ イトを表示可能にしている。 viewportの幅の初期値は980px。 980px の表示幅
7.
viewport viewportとは ・コンテンツの表示領域 ・デバイスの解像度や幅という訳ではない ・viewportの幅にはpx単位の値やデバイスごとに異 なる値 device-width(デバイスの幅)を指定出来る ・iPhone3GS/4/4Sともにdevice-widthは320px
8.
viewport width 表示領域の幅。デフォルトは 980px 。200
~ 10,000px、または device-width を指定。 height 表示領域の高さ。200 ~ 10,000px、または device-height を指定。 initial-scale 表示倍率。0 ~ 10 で指定。 minimum-scale 最小倍率。0 ~ 10 で指定。デフォルトでは 0.25。 maximum-scale 最大倍率。0 ~ 10 で指定。デフォルトでは 1.6。 user-scalable 縮小及び拡大の可・不可。yes、no で指定。デフォルトは yes。
9.
viewport コンテンツの幅がviewportの widthで指定した値を超えても自 動で調整してくれてるみたい。 <meta name="viewport" content="width=device-width" /> <meta
name="viewport" content="width=320px" />
10.
viewport ただし、初期表示倍率も指定して あげるとこのような表示になりま す。 <meta name="viewport" content="width=device-width, initial- scale=1"
/> <meta name="viewport" content="width=320px, initial-scale=1" />
11.
レスポンシブWebデザイン レスポンシブWebデザインとは HTMLを1ソースで、スクリーンサイズによって各デバ イスごとにコンテンツの表示を切り替える。
12.
レスポンシブWebデザイン CSS3 Media Queries デバイスのスクリーンサイズなど に応じて、CSSの切り替えが可 能。 基本的にはリキッド(可変)レイ アウトで構成していく。 width:95%
13.
レスポンシブWebデザイン CSS3 Media Queries @media
screen and (max-width: 1000px) { /* style */ } @media screen and (max-width: 760px) { /* style */ } @media screen and (max-width: 480px) { /* style */ } @media screen and (max-width: 320px) { /* style */ }
14.
テーマの切替プラグイン Device Themes Switcher スマートフォン用、タブレット用の テーマを個別に設定可能。
15.
スマートフォン化プラグイン 有名なWPTouch をはじめ、スマ ートフォン用のプ ラグインは探せ ばたくさんあ る。 インストールす るだけ。 WPTouch WP Mobile Detector
16.
フレームワークの活用 jQuery Mobile スマートフォン・タブレット端末 向けのモバイルフレームワーク。 jQuery Mobileでスマートフォン 用のテーマを作成した例。
17.
wp_is_mobile() wp_is_mobile() WordPress3.4から追加された関数(wp-includes/ vars.php) PCサイトとスマートフォン&タブレット用サイトとの 切り分けが可能。
18.
最後に ご清聴ありがとうございました。