目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2

Size: px

Start display at page:

Download "目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2"

ひさともつつの
9 years ago
Views:

1 Google ウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法の記事を受けて WordPressでのテーマカスタマイズ方法株式会社コミュニティコム星野邦敏東京都荒川区西日暮里 NSO2 階 URL: 1

コミュニティコム星野邦敏 116-0013 東京都荒川区西日暮里 5-37-5 NSO2 階

2 目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2

3 目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 3

4 自己紹介星野邦敏 (ほしのくにとし) Twitter Facebook : 星野邦敏 (Kunitoshi Hoshino) 株式会社コミュニティコムという会社で自社運営サイトやアプリ他企業様向けサイトも作っていますオープンソースの活動をしたり IT 系の勉強会を主催したり地域の活動をしたり WordPressをCMSとしてWEBサイトを作ることが増えています 4

5 自己紹介 WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 5

6 自己紹介 WordPress 日本語サイトのイベントカレンダーを更新する係ココ 6

7 自己紹介公式ディレクトリにプラグインを登録したり Japan Tenkiプラグイン全国 142 地域の天気を自動表示 Hello Wapuuプラグインブログ更新を応援 7

8 WordBench東京 at GMO 自己紹介自社サイト運営から法人化そちら側で話すことも 8

9 自己紹介 WordPressに関して書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版速習デザインWordPress 9

10 目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 10

11 参考サイト OpenCU 11

12 CSS3のMedia Queriesによって WordPressテーマ側でレスポンシブウェブデザインにして画面サイズに応じて表示を振り分けることができます 12

13 参考サイト水族館コミュニティ 13

14 同一 URLで PCサイトスマートフォンサイトガラケー( 携帯 )サイトの振り分けを自動で実現 14

15 WordPressでは無料で PC 用スマホ用モバイル用に同じURLでユーザーエージェントで振り分けることができます (1) 各端末ごとに自動で最適な表示ユーザーも見やすい収益の機会損失が無くなる ( 例 ) 水族館コミュニティ (2) 同一 URLで自動で振り分けコンテンツを複数書く手間が無いミラーサイトにならない被リンク分散が無くSEOにも合う 15

くなる ( 例 ) 水族館コミュニティ http://www.japan-aquarium.

16 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 16

17 始めに結局何が良いの? 17

18 Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 18

19 Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 19

20 まとめレスポンシブウェブデザインを最も推奨するという Googleの公式見解 ( 方法 1) 各種バナーの振り分けをCSS3だけでは難しいのでその部分はWordPressの条件分岐タグを使う ( 方法 2) 簡易的に対応するならプラグインもある ( 方法 4) 20

21 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 21

22 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 WordPress3.2からの新デフォルトテーマ Twenty Eleven テーマは Media Queriesに対応したテーマですのでこのテーマをベースにカスタマイズすることもできます 22

23 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 style.css 横幅に応じて自動対応させている /* =Responsive Structure (max-width: 800px) { (max-width: 650px) { (max-width: 450px) { only screen and (min-device-width: 320px) and (max-device-width: 480px) { } 23

24 ( 方法 1) style.css 横幅に応じて自動対応させている /* =Responsive Structure (max-width: 800px) { (max-width: 650px) { (max-width: 450px) { only screen and (min-device-width: 320px) and (max-device-width: 480px) { } WordBench 東京 at GMO CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスボンシブウェブデザインビューエリアの最大幅横幅 800pxより小さい場合に適用横幅 650pxより小さい場合に適用横幅 450pxより小さい場合に適用ビューエリアが320px~480pxの場合に適用 (iphone3g/3gsを意識している) 24

25 ( 方法 1) WordBench 東京 at GMO CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 Media Queriesの属 (max-width: 800px) 画面サイズの最大幅 800pxより小さい場合に {} 内に書かれているスタイルシートを適 (min-width: 800px) 画面サイズの最小幅 800pxより大きい場合に {} 内に書かれているスタイルシートを適 (max-device-width (min-device-width 800px) デバイスサイズの幅で適用 25

26 ( 方法 1) WordBench 東京 at GMO CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 jquerymobileでのレスボンシブウェブデザインも可能です all and (max-device-width: 480px) if ( window.screen < 480 ) { // jquery Mobile 読み込み document.write('<script' + 端末ごとに出力するコンテンツ量を変えたい ' src="jquery.mobile.js"></' + ガラケー( 携帯電話 )にも同時に対応をしたい 'script>'); } その場合は ( 方法 2)へ 26

27 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブWebデザイン(Media Queries)に対応した WordPressのテーマはたくさん登録されています Whiteboard Hatch PageLines 27

28 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブWebデザイン(Media Queries)に対応した WordPressのテーマはたくさん登録されています Response Responsive BizVektor ( 日本人作成 ) 28

29 レスポンシブウェブデザインメディアクエリで横幅に応じてサイトを最適化 8bitodyssey.com デフォルトテーマ Twenty Eleven を子テーマでカスタマイズ 29

30 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 30

31 ( 方法 2) WordBench 東京 at GMO ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5)wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 31

32 ( 方法 2) WordBench 東京 at GMO ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ Ktai Styleプラグイン ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズパケット量節約 ( 方法 3)Ktai Styleプラグインをカスタマイズ画像を自動縮小 ( 方法 4)ユーザーエージェントを振り分けるプラグインなど日本のガラケー ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5)wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) 独特の仕様に対応 Ktai Styleプラグインでスマホ&ガラケーの両方に対応してみます 32

33 Ktai Style プラグイン ( 手順 1) スマートフォンサイトに対応したテーマやガラケーサイトに対応したテーマを作る ( 手順 2) ktai-themesフォルダに作ったテーマを入れる ( 手順 3) 管理画面のKtai Styleの[テーマ]をクリックして各端末ごとで使うテーマを振り分ける 33

34 Ktai Styleプラグイン [いますぐインストール]をクリックして有効化します 34

35 Ktai Styleでのテーマフォルダの確認 wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php ktai-themes/ フォルダを追加! ( 注意 ) plugins/ktai-style の中の themesフォルダに入れるとプラグインバージョンアップ時に作ったテーマが消えてしまうので必ずこの方法で行いましょう! ktai-tokyohanami / smart-tokyohanami / ココに作ったテーマフォルダを入れる! 35

36 Ktai Styleプラグイン Ktai Style プラグインを有効化すると管理画面のメニューに左のような項目が追加されるのでスマートフォンや携帯表示の設定ができます [テーマ]をクリックして各端末で使うテーマを振り分けます 36

37 Ktai Styleプラグイン Ktai Style プラグインをインストールすれば各端末のユーザーエージェントに応じて同一 URLでサイトを振り分けることができます 37

38 ( 方法 2) WordBench 東京 at GMO ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5) wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 38

39 Mobile Theme Switcherプラグイン iphone&ipod 用 ipad 用 Android 用それぞれのテーマを設定できる 39

40 WordPressのコアファイルの条件分岐を前提にプラグインを作って端末ごとに振り分けることもできます WordPressテーマとして style.cssに Theme Name: smartphone と書いてあるモノをスマートフォンの時に読み込むプラグイン if (wp_is_mobile()) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; } 40

41 ( 方法 2) WordBench 東京 at GMO ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5) wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 41

42 コアファイルを確認こうなっているというイメージだけでOK! wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php vars.php 42

43 $is_lynx = $is_gecko = $is_winie = $is_macie = $is_opera = $is_ns4 = $is_safari = $is_chrome = $is_iphone = false; if ( isset($_server['http_user_agent']) ) { if ( strpos($_server['http_user_agent'], 'Lynx')!== false ) { $is_lynx = true; } elseif ( stripos($_server['http_user_agent'], 'chrome')!== false ) { if ( stripos( $_SERVER['HTTP_USER_AGENT'], 'chromeframe' )!== false ) { if ( $is_chrome = apply_filters( 'use_google_chrome_frame', is_admin() ) ) header( 'X-UA-Compatible: chrome=1' ); $is_winie =! $is_chrome; } else { $is_chrome = true; } } elseif ( stripos($_server['http_user_agent'], 'safari')!== false ) { $is_safari = true; } elseif ( strpos($_server['http_user_agent'], 'Gecko')!== false ) { $is_gecko = true; } elseif ( strpos($_server['http_user_agent'], 'MSIE')!== false && strpos($_server['http_user_agent'], 'Win')!== false ) { $is_winie = true; } elseif ( strpos($_server['http_user_agent'], 'MSIE')!== false && strpos($_server['http_user_agent'], 'Mac')!== false ) { $is_macie = true; } elseif ( strpos($_server['http_user_agent'], 'Opera')!== false ) { $is_opera = true; } elseif ( strpos($_server['http_user_agent'], 'Nav')!== false && strpos($_server['http_user_agent'], 'Mozilla/4.')!== false ) { $is_ns4 = true; } } if ( $is_safari && stripos($_server['http_user_agent'], 'mobile')!== false ) $is_iphone = true; $is_ie = ( $is_macie $is_winie ); 43

44 WordPressのバージョン3.4からの新機能条件分岐 wp_is_mobile 関数 function wp_is_mobile() { static $is_mobile; if ( isset($is_mobile) ) return $is_mobile; if ( empty($_server['http_user_agent']) ) { $is_mobile = false; } elseif ( strpos($_server['http_user_agent'], 'Mobile')!== false // many mobile devices (all iphone, ipad, etc.) strpos($_server['http_user_agent'], 'Android')!== false strpos($_server['http_user_agent'], 'Silk/')!== false strpos($_server['http_user_agent'], 'Kindle')!== false strpos($_server['http_user_agent'], 'BlackBerry')!== false strpos($_server['http_user_agent'], 'Opera Mini')!== false ) { $is_mobile = true; } else { $is_mobile = false; } } return $is_mobile; 44

45 WordPressのコアファイルの条件分岐を前提にパソコン用コンテンツとスマートフォン用コンテツを振り分けることも出来ます WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツ <?php else:?> パソコン用コンテンツ <?php endif;?> WordPressのバージョン3.4 以上が必須です 45

46 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 46

47 PCサイト用バナーとスマートフォンサイト用バナーを切り替えられますレスポンシブWebデザインにしてもバナーは切れる CSSで display:noneで対応しても Google AdSenseなどはリスクも考えられる 47

48 PCサイト用バナーとスマートフォンサイト用バナーを切り替えられます <?php if (wp_is_mobile()) :?> スマートフォン用バナーコード <?php else:?> パソコン用バナーコード <?php endif;?> 48

49 もしPC 用とモバイル用で振り分けられなかったらこんな感じにしないと成果報酬に繋がらないユーザーがちゃんとクリックしてくれるか分からない機会損失そもそも見た目が2 行になるでは別 URLで PCサイトスマホサイトガラケーサイトを作る? 手間が掛かるミラーサイトのようになる危険性も被リンクが分散してしまうので SEO 的にもマイナス傾向 49

50 アフィリエイトリンクの成果対象 PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) PC 用アフィリエイトリンクモバイル用アフィリエイトリンクバリューコマース A8 リンクシェアアクセストレードなど多くのASPはこの仕様 PC 用とモバイル用で振り分けないと収益の成果対象にならない楽天アフィリエイトのように PC 用とモバイル用のアフィリエイトリンクを統一したASPもある 50

51 WordPressでのアフィリエイトリンク対応まとめ PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) PC 用アフィリエイトリンクモバイル用アフィリエイトリンク ( 方法 1)Media Queries 対応テーマ ( 方法 2)ユーザーエージェントで振り分け ( 方法 3)それらを組み合わせる ( 方法 4)スマートフォンに自動対応のプラグイン Ktai Styleプラグイン 51

52 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 52

53 ( 方法 4)スマートフォンに自動対応するプラグイン WPtouch プラグインをインストールして有効化するとスマートフォン対応が自動でされた上にデザインもスマートフォンっぽくなっています 53

54 プラグイン管理画面からも選べます! WPtouch で検索! 検索できます! WordPress.orgからも選べます! 54

55 プラグインフォルダの確認 wp-admin / wp-content / languages / wp-includes / plugins / index.php themes / license.txt upgrade / readme-ja.html uploads / readme.html index.php wp-activate.php wp-app.php wp-atom.php wptouch フォルダ akismet / wp-multibyte-patch / hello.php index.php ココにプラグインフォルダを入れる! 55

56 WPtouchは日本語にも対応しています ( 一部翻訳が微妙 ) WordBench 東京 at GMO WPtouch Languageを Japanese に選択して Saveする 56

57 WPtouchには有料版があります基本的に Developer を選ばざるを得ないライセンスキーを各サイトごとに入力して管理する方法を取っている 1 回 199ドルを支払えばその後は無制限無期限で使える PayPalかクレジットカード決済 57

58 WPtouch 有料版は色々できます ipadに対応 58

59 WPtouch 有料版は色々できます ipad 対応 Enabled を選択 59

60 WPtouch 有料版は色々できますその他にもアイコン変更メニュー変更広告削除広告設定複数テーマ設定デザイン色変更など 60

61 で結局何が良いの? 61

62 レスポンシブWebデザイン対応の WordPressテーマを使って各種バナー部分の振り分けは WordPressの条件分岐タグ wp_is_mobile 関数を使うのが増えるのかな? 62

63 (コラム)3Gなど回線が細い場合は? レスポンシブWebデザイン(Media Queries)に対応した上でページ下にスクロールしたらページ送りをしてソースコードが新たに出るようにするページを開いた時点では全ソースコードは出ない 63

64 (コラム)3Gなど回線が細い場合は? WordPress + jquery での実装方法 <WordPress> wp_link_pages テンプレートタグでテーマ実装投稿本文に  で区切る <jquery> jquery.autopager プラグインをheaderまたはfooterに入れる 64

65 最後に続きは懇親会でも! (WordBench 東京の交流会後の二次会の写真 ) 65

66 最後に WordPressで繋がろう! WordPressのコミュニティにぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? 66

67 最後に今後のお問い合わせなど何かありましたら Mail: URL: などにご連絡くださいありがとうございました! 株式会社コミュニティコム星野邦敏 67

1.2. ご利用環境 1.2.1. 推奨ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時点で動作確認済み) Mozilla Firefox(バージョン 26 時点で動作確認済み) Safari 7

1.2. ご利用環境 1.2.1. 推奨ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時点で動作確認済み) Mozilla Firefox(バージョン 26 時点で動作確認済み) Safari 7 1. アーカイブデータベースを検索 / 閲覧する 1.1. データの検索方法東京アーカイブでは以下に分類されるカテゴリの画像データ資料データを閲覧できます江戸城浮世絵双六和漢書江戸東京の災害記録絵葉書写真帖近代の地図東京府東京市関係資料番付建築図面書

目 次 0. 自 己 紹 介 1.スマートフォン 対 応 2. 質 疑 応 答 2

目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2