WordPress 3.2~ のデフォルトテーマ、Twenty Eleven をつかって、自分だけのレスポンシブ・ウェブサイトを作ってミました。 WordBench 東京勉強会 in KDDI スライド。

1. Twenty Eleven で
レスポンシブサイトを
つくろう、そうしよう
@Odyssey

2. おでっせい おかねがたりません
サラリーマン
WordPress 歴: もうすぐ6年
まけずぎらい WordPress 0.9.5 に出会う
せいべつ：おとこ WordPress ME 2.0 を使う
レベル：10 WordPress オフに参加
WordPress 公式日本語サイ
せいそくち：さいたま
ト運営チーム
WordPress 日本語版作成
E ハイストリートのふく チーム(WordPress 3.2 リ
E Galaxy SII リースリーダー)
E iPhone 4S WordCamp/Bench に参加
E iPod Nano WordBench 写真部
E Nintendo 3DS WordPants 製作委員会
E Playstation Portable WordBench モクモク部
E MacBook Air WordBench モンハン部

3. http://8bitOdyssey.com/

4. 今日のお話でできたのが
このデザインです。
http://8bitOdyssey.com/

6. おでっせい おかねがたりません
おやバカ
WordPress 歴: もうすぐ6年
まけずぎらい WordPress 0.9.5 に出会う
せいべつ：おとこ WordPress ME 2.0 を使う
レベル：1 WordPress オフに参加
WordPress 公式日本語サイ
せいそくち：さいたま
ト運営チーム
WordPress 日本語版作成
E ハイストリートのふく チーム(WordPress 3.2 リ
E Galaxy SII リースリーダー)
E iPhone 4S WordCamp/Bench に参加
E iPod Nano WordBench 写真部
E Nintendo 3DS WordPants 製作委員会
E Playstation Portable WordBench モクモク部
E MacBook Air WordBench モンハン部

8. では行ってみよう∼！

9. 1998年
WWW
ブラウザ

10. 1999年
WWW
携帯電話
ブラウザ

11. 2003年
WWW
i E V
ケータイ
ブラウザ

12. 2007年
Web
i E V
ブラウザー ケータイ Ktai Style

13. 2008年
Web
i E V

ブラウザー スマートフォン ケータイ
Ktai Style

14. 2009年
Web
i E V

ブラウザー スマートフォン ケータイ
Ktai Style

15. 2010年
Web
i E V

スマートフォン
ブラウザー ケータイ
/ タブレット
Ktai Style

16. 2011年
Web
i E V

スマートフォン
ブラウザー ケータイ
/ タブレット
Ktai Style

17. つまり、手間が増えている
ということです。

18. あきらめる…わけにも
いかないし…

19. 手間と時間は
無限じゃないし…

20. がんばって
スマホ対応したらしたで…

21. あなたのサイト、
こう思われてません？

22. いつも、オレが
使ってるメニューが
スマホだと使えない
じゃないか！！！(怒)

23. 2011年
Web
i E V

スマートフォン
ブラウザー ケータイ
/ タブレット
Ktai Style

24. 2011年
今日のお話は
ここをまとめてなんとか
Web
しようというお話です。
i E V

スマートフォン
ブラウザー ケータイ
/ タブレット
Ktai Style

25. 本日のアジェンダ

26. 本日のアジェンダ
・レスポンシブサイトとは？

27. 本日のアジェンダ
・レスポンシブサイトとは？
・Twenty Eleven

28. 本日のアジェンダ
・レスポンシブサイトとは？
・Twenty Eleven
・どのように実現しているの？

29. 本日のアジェンダ
・レスポンシブサイトとは？
・Twenty Eleven
・どのように実現しているの？
・子テーマの作り方をおさらい

30. 本日のアジェンダ
・レスポンシブサイトとは？
・Twenty Eleven
・どのように実現しているの？
・子テーマの作り方をおさらい
・子テーマカスタマイズのコツ

31. 本日のアジェンダ
・レスポンシブサイトとは？
・Twenty Eleven
・どのように実現しているの？
・子テーマの作り方をおさらい
・子テーマカスタマイズのコツ
・ぼくが実際に変更したこと

32. レスポンシブ・
(ウェブ)サイト
レスポンシブサイトとは

33. レスポンシブ・
(ウェブ)サイト
レスポンシブサイトとは
レスポンシブ・ウェブデザイン
という手法でデザインされた
ウェブサイト。

34. レスポンシブ・
(ウェブ)サイト
レスポンシブサイトとは
レスポンシブ・ウェブデザイン
という手法でデザインされた
ウェブサイト。
※語呂が悪いので、ウェブだけ省きました…

35. レスポンシブ・
ウェブデザイン

36. レスポンシブ・
ウェブデザイン
のメリット

37. レスポンシブ・
ウェブデザイン
のメリット
・必要な技術はHTMLとCSS

38. レスポンシブ・
ウェブデザイン
のメリット
・必要な技術はHTMLとCSS
・どのデバイスにもソースはひとつ

39. レスポンシブ・
ウェブデザイン
のメリット
・必要な技術はHTMLとCSS
・どのデバイスにもソースはひとつ
・今後登場するデバイスもOK

40. レスポンシブ・
ウェブデザイン
のメリット
・必要な技術はHTMLとCSS
・どのデバイスにもソースはひとつ
・今後登場するデバイスもOK
・もちろんWordPressも

41. レスポンシブ・
ウェブデザイン

42. レスポンシブ・
ウェブデザイン
のデメリット

43. レスポンシブ・
ウェブデザイン
のデメリット
・CSS3未対応デバイスでは難しい

44. レスポンシブ・
ウェブデザイン
のデメリット
・CSS3未対応デバイスでは難しい
・回線の細いモバイルデバイスにも
PCと同じ画像を読み込ませてしまう

45. レスポンシブ・
ウェブデザイン
のデメリット
・CSS3未対応デバイスでは難しい
・回線の細いモバイルデバイスにも
PCと同じ画像を読み込ませてしまう
・自分で作るときっと気が狂う

46. ・自分で作るときっと気が狂う

47. ・自分で作るときっと気が狂う

48. いや、まじで(; ･`ω･́)

49. レスポンシブウェブデザイン
は作るもんじゃない！

50. レスポンシブウェブデザイン
は作るもんじゃない！
パク…インスパイア
するものだ！

51. つまり

52. レスポンシブウェブデザイン
にするのが大変なのではない。

53. レスポンシブウェブデザイン
にするのが大変なのではない。

54. レスポンシブウェブデザイン
にするのが大変なのではない。
そう、WordPressならね。

56. Twenty Eleven

59. ・

60. Twenty Eleven

61. Twenty Eleven
・WordPress 3.2からのデフォル
トテーマ（3.3でももちろんOK）

62. Twenty Eleven
・WordPress 3.2からのデフォル
トテーマ（3.3でももちろんOK）
・テーマ機能の見本市

63. WordBench 東京勉強会プレゼン
資料をアップしました
http://8bitodyssey.com/
archives/2278

64. Twenty Eleven
・WordPress 3.2からのデフォル
トテーマ（3.3でももちろんOK）
・テーマ機能の見本市
・レスポンシブ・ウェブデザイン

65. どのように実現してるの？

66. どのように実現してるの？
・長さ・高さの指定は % or em

67. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto;
max-width: 1000px;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}

68. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto;
max-width: 1000px;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}

69. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto;
max-width: 1000px;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}

70. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto;
#page
max-width: 1000px;
2em
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
1000px
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary { 2em
float: right; ブラウザ幅: 1000px以上
margin-right: 7.6%;
width: 18.8%;
}

71. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto;
max-width: 1000px;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}

72. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto; -264px
#primary
max-width: 1000px;
} #secondary
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%; 188px 76px
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right; ブラウザ幅: 1000px以上
margin-right: 7.6%;
width: 18.8%;
}

73. どのように実現してるの？
・長さ・高さの指定は % or em
・CSS3 Media Queries

74. CSS3 Media Queries
メディアタイプやスクリーン
サイズなどの条件を指定して、
より細かくスタイルを適用できる。

75. CSS3 Media Queries
CSSでも条件分岐できる！

76. CSS3 Media Queries
CSSでも条件分岐できる！
さようなら、JavaScript！

77. CSS3 Media Queries
CSSでも条件分岐できる！
さようなら、JavaScript！

78. CSS3 Media Queries
CSSでも条件分岐できる！
さようなら、JavaScript！
非対応ブラウザは JS で！
http://code.google.com/p/css3-
mediaqueries-js/

79. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
……
}
@media (max-width: 650px) {
……
}
@media (max-width: 450px) {
……
}
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

80. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
……
}
通常適用
@media (max-width: 650px) { されるCSS
……
}
@media (max-width: 450px) {
……
}
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

81. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
…… ブラウザ幅が
} 800px以下
@media (max-width: 650px) {
の時に適用
……
}
@media (max-width: 450px) {
……
}
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

82. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
…… ブラウザ幅が
} 650px以下
@media (max-width: 650px) {
の時に適用
……
}
@media (max-width: 450px) {
……
}
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

83. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
…… ブラウザ幅が
} 450px以下
@media (max-width: 650px) {
の時に適用
……
}
@media (max-width: 450px) {
……
}
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

84. wp-content/themes/-
…… twentyeleven/style.css
…… 2240行目∼
@media (max-width: 800px) {
……
スクリーン型
} の媒体でかつ
@media (max-width: 650px) { デバイス幅が
…… 320px以上
}
480px未満
@media (max-width: 450px) {
……
の時に適用
} (iphone等）
@media only screen and (min-device-
width: 320px) and (max-device-width:
480px) {
……
}

85. Twenty Elevenで見てみましょう

86. body {
padding: 0 2em; wp-content/themes/-
} twentyeleven/style.css
#page { 68行目∼
margin: 2em auto; -264px
#primary
max-width: 1000px;
} #secondary
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%; 188px 76px
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right; ブラウザ幅: 1000px以上
margin-right: 7.6%;
width: 18.8%;
}

87. wp-content/themes/-
@media (max-width: 800px) { twentyeleven/style.css
…… 2240行目∼
#main #content {
#primary
margin: 0 7.6%;
#content
width: auto;
7.6% 7.6%
}
……
#main #secondary {
float: none;
#secondary
margin: 0 7.6%;
width: auto; 7.6% 7.6%
}
……
}
ブラウザ幅: 800px未満

88. どのように実現してるの？
・長さ・高さの指定は % or em
・CSS3 Media Query
・画像もフレキシブルに

89. wp-content/themes/-
/* Images */ twentyeleven/style.css
.entry-content img,849行目∼
.comment-content img,
.widget img {
max-width: 97.5%;
}
img[class*="align"],
img[class*="wp-image-"]
{
height: auto;
}
img.size-full {
max-width: 97.5%;
width: auto;
}

90. Twenty Elevenで
レスポンシブサイト
をつくる。

91. おすすめは子テーマ

92. おすすめは子テーマ
子テーマ
エヴァンジェリストです

93. Duotone の子テーマを作ろう、
そうしよう@ WordCamp
Fukuoka 2010
http://www.slideshare.net/
odysseygate/duotone-
wordcamp-fukuoka-2010
子テーマ
エヴァンジェリストです

94. 子テーマとは？

95. 子テーマとは？
抜粋版

96. 子テーマとは？
抜粋版
・親テーマのテンプレートや機能を
利用できる。必要に応じて変更・
上書きできる。

97. 子テーマとは？
抜粋版
・親テーマのテンプレートや機能を
利用できる。必要に応じて変更・
上書きできる。
・親テーマがバージョンアップして
も子テーマの変更は保持される。

98. 子テーマのつくり方

99. 子テーマのつくり方
超濃縮版

100. 子テーマのつくり方
超濃縮版
・親テーマと同階層にディレクトリ

101. 子テーマのつくり方
wp-content 超濃縮版
themes
・親テーマと同階層にディレクトリ
twentyeleven 親テーマ

102. 子テーマのつくり方
wp-content 超濃縮版
themes
・親テーマと同階層にディレクトリ
twentyeleven 親テーマ
ディレクトリ作成！
yourchildtheme 子テーマ
子テーマの
style.css style.css

103. 子テーマのつくり方
超濃縮版
・親テーマと同階層にディレクトリ
・style.cssにtemplate: 親テー
マ名を入力

104. 子テーマのつくり方
yourchildtheme/style.css
超濃縮版
/*
Theme Name: yourchildtheme
・親テーマと同階層にディレクトリ
Theme URI: http://www.example.com/
・style.cssにtemplate: 親テー
Description: Child theme for ...
Author: You
マ名を入力
Author URI: http://www.example.com/
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

105. 子テーマのつくり方
超濃縮版
・親テーマと同階層にディレクトリ
・style.cssにtemplate: 親テー
マ名を入力
・style.cssと各種テンプレートで
上書き

106. 子テーマのつくり方
yourchildtheme/style.css
超濃縮版
/* ・親テーマと同階層にディレクトリ
…
*/ ・style.cssにtemplate: 親テー
マ名を入力
@import url("../twentyeleven/style.css");
・style.cssと各種テンプレートで
以下で 上書き
twentyeleven/style.css を上書き
適宜新規スタイルを記載

107. 例：header.php を変更したい
子テーマのつくり方
wp-content 超濃縮版
themes
・親テーマと同階層にディレクトリ
・style.cssにtemplate: 親テー
twentyeleven
マ名を入力
yourchildtheme
・style.cssと各種テンプレートで
コピー
style.css
上書き 子テーマの
header.php
コピー header.php

108. 子テーマカスタマイズのコツ

109. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える

110. 子テーマカスタマイズのコツ
親テーマ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える

111. 子テーマカスタマイズのコツ
親テーマ 目指すべき姿
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える

112. 子テーマカスタマイズのコツ
header の横幅
を変えれば…
親テーマ 目指すべき姿
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える

113. 子テーマカスタマイズのコツ
header の横幅
を変えれば…
親テーマ 目指すべき姿
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
コメント数の背景を
吹き出しの画像にすれば…

114. 子テーマカスタマイズのコツ
header の横幅
を変えれば…
親テーマ 目指すべき姿
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
コメント数の背景を
吹き出しの画像にすれば…
どのようにスタイル
を書くかから

115. 子テーマカスタマイズのコツ
header の横幅
を変えれば…
親テーマ 目指すべき姿
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
コメント数の背景を
吹き出しの画像にすれば…
どのようにスタイル どのように変更するか
を書くかから という発想

116. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認

117. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認

118. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
でも自分で書くの面倒でしょう？
れるか考える
・ワイヤーフレームで狙い所を確認

119. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
Twenty Eleven のレスポンシブ構造を
見比べて、どう変更したら近づけら
図解してみた ¦ 8bitodyssey.com
れるか考える
http://8bitodyssey.com/
archives/2923
・ワイヤーフレームで狙い所を確認

120. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認
・現状把握は開発ツールで

121. 子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認
・現状把握は開発ツールで

122. ボックス・マージン・パディング
の状況を確認
子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認
・現状把握は開発ツールで

123. ボックス・マージン・パディング
の状況を確認
子テーマカスタマイズのコツ
・親テーマと目指すべきデザインを
見比べて、どう変更したら近づけら
れるか考える
・ワイヤーフレームで狙い所を確認
・現状把握は開発ツールで
適用されているスタイルを確認

124. HTML5テーマで気をつけて
おいたほうがよいこと
・タグそのものではなく、
ID や CLASS を駆使して
スタイルを指定する。

125. HTML5テーマで気をつけて
おいたほうがよいこと
・タグそのものではなく、
ID や CLASS を駆使して
スタイルを指定する。

126. HTML5テーマで気をつけて
おいたほうがよいこと {
header nav
……
}
・タグそのものではなく、
ID や CLASS を駆使して
スタイルを指定する。

127. HTML5テーマで気をつけて
おいたほうがよいこと {
header nav
……
}
・タグそのものではなく、
ID や CLASS を駆使して
#branding #access {
スタイルを指定する。
……
}

128. HTML5テーマで気をつけて
おいたほうがよいこと
・タグそのものではなく、
ID や CLASS を駆使して
スタイルを指定する。

129. HTML5テーマで気をつけて
おいたほうがよいこと
・タグそのものではなく、
消滅して、復活した <time> 要素
ID や CLASS を駆使して
スタイルを指定する。

130. HTML5テーマで気をつけて
おいたほうがよいこと
・タグそのものではなく、
消滅して、復活した <time> 要素
ID や CLASS を駆使して
スタイルを指定する。
HTML 5 もテーマのコードも
変更の余地あり(かも)

131. ファイルが多すぎて
よくわからないんだけど…

132. 大丈夫だ、問題ない！

133. Twenty Eleven のファイルを分類して
みたよ ¦ 8bitodyssey.com
http://8bitodyssey.com/
archives/3208

134. 8bitOdysseyを作るに
あたって僕が変更したこと
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整

135. 8bitOdysseyを作るに
あたって僕が変更したこと
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整
レスポンシブ・ウェブデザイン
のためではほとんど、これだけ。

136. 8bitOdysseyを作るに
あたって僕が変更したこと
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整
レスポンシブ・ウェブデザイン
のためではほとんど、これだけ。

137. 8bitOdysseyを作るに
あたって僕が変更したこと
切れちゃっ
てるし。
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整
レスポンシブ・ウェブデザイン
のためではほとんど、これだけ。

138. 8bitOdysseyを作るに
かぶってるし。
あたって僕が変更したこと
切れちゃっ
てるし。
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整
レスポンシブ・ウェブデザイン
のためではほとんど、これだけ。

139. 8bitOdysseyを作るに
かぶってるし。
あたって僕が変更したこと
切れちゃっ
てるし。
・スマートフォンに適用される
media queries でロゴの位置
をちょこっと調整
こうしたい
レスポンシブ・ウェブデザイン
のためではほとんど、これだけ。

140. @media (max-width: 450px) ,
8bitOdysseyを作るに
@media only screen and (min-device-width:
あたって僕が変更したこと
320px) and (max-device-width: 480px) {
#site-title {
・スマートフォンに適用される
padding: 8em 0 0;
media queries でロゴの位置
width: 280px;
} をちょこっと調整
#site-title img {
width: 280px;
レスポンシブ・ウェブデザイン
}
のためではほとんど、これだけ。
#branding #searchform {
top: 3em !important;
}
}

141. @media (max-width: 450px) ,
8bitOdysseyを作るに
@media only screen and (min-device-width:
あたって僕が変更したこと
320px) and (max-device-width: 480px) {
#site-title {
・スマートフォンに適用される
padding: 8em 0 0;
media queries でロゴの位置
width: 280px; 通常は 405px
} をちょこっと調整
#site-title img {
width: 280px;
レスポンシブ・ウェブデザイン 通常は 405px
}
のためではほとんど、これだけ。
#branding #searchform {
top: 3em !important; 通常は 4em
}
}

142. 完成！

143. http://8bitOdyssey.com/

147. One more thing...

148. adsenseを出し分ける

149. adsenseを出し分ける
<?php if ( $is_iphone ) : ?>
// ここにモバイル用 adsense コード
<?php else : ?>
// ここに通常の adsense コード
<?php endif; ?>

150. Twenty Elevenでレスポンシブ
サイトをつくろう、そうしよう！

151. 本日のスライドは下記にて公開します！
http://8bitOdyssey.com/
Twitter: @odyssey