Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
?Download as KEY, PDF?
9 likes?2,034 views
WordPress 3.2~ のデフォルトテーマ、Twenty Eleven をつかって、自分だけのレスポンシブ?ウェブサイトを作ってミました。 WordBench 東京勉強会 in KDDI スライド。
![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;
}](https://image.slidesharecdn.com/20111126wordbenchtokyo-111126010702-phpapp01/85/Twenty-Eleven-89-320.jpg)
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
- 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 モンハン部
- 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
- 19. 手間と時間は 無限じゃないし…
- 23. 2011年 Web i E V ? スマートフォン ブラウザー ケータイ / タブレット Ktai Style
- 24. 2011年 今日のお話は ここをまとめてなんとか Web しようというお話です。 i E V ? スマートフォン ブラウザー ケータイ / タブレット Ktai Style
- 25. 本日のアジェンダ
- 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. いや、まじで(; ?`ω??)
- 51. つまり
- 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） ?テーマ機能の見本市
- 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 { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: 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 { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: 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 { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: 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 { ?oat: left; margin: 0 -26.4% 0 0; 1000px width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { 2em ?oat: 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 { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: 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 { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; 188px 76px } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: right; ブラウザ幅: 1000px以上 margin-right: 7.6%; width: 18.8%; }
- 73. どのように実现してるの？ ?長さ?高さの指定は % or em ?CSS3 Media Queries
- 74. CSS3 Media Queries メディアタイプやスクリーン サイズなどの条件を指定して、 より細かくスタイルを適用できる。
- 75. CSS3 Media Queries 颁厂厂でも条件分岐できる！
- 76. CSS3 Media Queries 颁厂厂でも条件分岐できる！ さようなら、JavaScript！
- 77. CSS3 Media Queries 颁厂厂でも条件分岐できる！ さようなら、JavaScript！
- 78. CSS3 Media Queries 颁厂厂でも条件分岐できる！ さようなら、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) { …… }
- 86. body { padding: 0 2em; wp-content/themes/- } twentyeleven/style.css #page { 68行目～ margin: 2em auto; -264px #primary max-width: 1000px; } #secondary #primary { ?oat: left; margin: 0 -26.4% 0 0; width: 100%; 188px 76px } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { ?oat: 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 { ?oat: 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; }
- 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(/slideshow/twenty-eleven/10333988/"../twentyeleven/style.css");
- 105. 子テーマのつくり方 超浓缩版 ?親テーマと同階層にディレクトリ ?style.cssにtemplate: 親テー マ名を入力 ?style.cssと各種テンプレートで 上書き
- 106. 子テーマのつくり方 yourchildtheme/style.css 超浓缩版 /* ?親テーマと同階層にディレクトリ … */ ?style.cssにtemplate: 親テー マ名を入力 @import url(/slideshow/twenty-eleven/10333988/"../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 もテーマのコードも 変更の余地あり(かも)
- 132. 大丈夫だ、问题ない！
- 133. Twenty Eleven のファイルを分類して みたよ ? 8bitodyssey.com http://8bitodyssey.com/ archives/3208
- 134. 8产颈迟翱诲测蝉蝉别测を作るに あたって僕が変更したこと ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整
- 135. 8产颈迟翱诲测蝉蝉别测を作るに あたって僕が変更したこと ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整 レスポンシブ?ウェブデザイン のためではほとんど、これだけ。
- 136. 8产颈迟翱诲测蝉蝉别测を作るに あたって僕が変更したこと ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整 レスポンシブ?ウェブデザイン のためではほとんど、これだけ。
- 137. 8产颈迟翱诲测蝉蝉别测を作るに あたって僕が変更したこと 切れちゃっ てるし。 ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整 レスポンシブ?ウェブデザイン のためではほとんど、これだけ。
- 138. 8产颈迟翱诲测蝉蝉别测を作るに かぶってるし。 あたって僕が変更したこと 切れちゃっ てるし。 ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整 レスポンシブ?ウェブデザイン のためではほとんど、これだけ。
- 139. 8产颈迟翱诲测蝉蝉别测を作るに かぶってるし。 あたって僕が変更したこと 切れちゃっ てるし。 ?スマートフォンに適用される media queries でロゴの位置 をちょこっと調整 こうしたい レスポンシブ?ウェブデザイン のためではほとんど、これだけ。
- 140. @media (max-width: 450px) , 8产颈迟翱诲测蝉蝉别测を作るに @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) , 8产颈迟翱诲测蝉蝉别测を作るに @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. 完成！
- 147. One more thing...
- 148. 补诲蝉别苍蝉别を出し分ける
- 149. 补诲蝉别苍蝉别を出し分ける <?php if ( $is_iphone ) : ?> // ここにモバイル用 adsense コード <?php else : ?> // ここに通常の adsense コード <?php endif; ?>
- 151. 本日のスライドは下記にて公開します！ http://8bitOdyssey.com/ Twitter: @odyssey
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n
- #102: \n
- #103: \n
- #104: \n
- #105: \n
- #106: \n
- #107: \n
- #108: \n
- #109: \n
- #110: \n
- #111: \n
- #112: \n
- #113: \n
- #114: \n
- #115: \n
- #116: \n
- #117: \n
- #118: \n
- #119: \n
- #120: \n
- #121: \n
- #122: \n
- #123: \n
- #124: \n
- #125: \n
- #126: \n
- #127: \n
- #128: \n
- #129: \n
- #130: \n
- #131: \n
- #132: \n
- #133: \n
- #134: \n
- #135: \n
- #136: \n
- #137: \n
- #138: \n
- #139: \n
- #140: \n
- #141: \n
- #142: \n
- #143: \n
- #144: \n
- #145: \n
- #146: \n
- #147: \n
- #148: \n
- #149: \n
- #150: \n
- #151: \n