目 次 Wordpressで 作 るスマートフォンサイト コーディング 編 2

株 式 会 社 コミュニティコム 星 野 邦 敏 116-0013 東 京 都 荒 川 区 西 日 暮 里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1

目 次 Wordpressで 作 るスマートフォンサイト コーディング 編 2

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 3

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 4

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

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

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

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

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

自 己 紹 介 WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 今 も 執 筆 中 です 2012 年 7 月 に 出 版 web creators 特 別 号 スマートフォン ソーシャル メディア WordPress 10

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 11

スマートフォン 対 応 サイトとその 方 法 参 考 サイト A List Apart 日 本 語 サイト http://all-web.org/ala/ 12

スマートフォン 対 応 サイトとその 方 法 参 考 サイト OpenCU http://www.opencu.com/ 13

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

スマートフォン 対 応 サイトとその 方 法 参 考 サイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 15

スマートフォン 対 応 サイトとその 方 法 同 一 URLで ユーザーエージェントで 振 り 分 けることにより PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けることができます 16

スマートフォン 対 応 サイトとその 方 法 方 法 (ⅰ)レスポンシブ ウェブデザインによる 画 面 切 り 替 え (ⅱ)ユーザーエージェントによる 振 り 分 け メリット (1) 各 端 末 ごとに 自 動 で 最 適 な 表 示 ユーザーも 見 やすい 収 益 の 機 会 損 失 が 無 くなる (2) 同 一 URLで 自 動 で 振 り 分 け コンテンツを 複 数 書 く 手 間 が 無 い ミラーサイトにならないので 被 リンク 分 散 が 無 くSEOにも 合 う 17

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 18

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

Googleの 見 解 始 めに 結 局 何 が 良 いの? 20

Googleの 見 解 要 は 同 じHTMLが 良 いと 言 ってる 他 の 方 法 を 否 定 はしていない Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 21

Googleの 見 解 Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 22

まとめ WordBench 大 阪 夏 のスマホサイト 祭 り Googleの 見 解 レスポンシブ ウェブデザインを 推 奨 するGoogleの 公 式 見 解 ( 方 法 1) 各 種 バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う ( 方 法 2) とは 言 え レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもある ( ココ 重 要 ) ( 方 法 2) 簡 易 的 に 対 応 するなら プラグインを 入 れて 完 了 ( 方 法 4) 23

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 24

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

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

( 方 法 1) WordBench 大 阪 夏 のスマホサイト 祭 り CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? ( 引 用 元 : http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html ) 27

( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? 要 は 画 面 サイズによってレイアウトを 変 えること 28

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

( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 header.php meta 情 報 として viewportを 設 定 する <meta name="viewport" content="width=device-width" /> Viewportとは? 一 言 で 言 うと 表 示 領 域 のこと 30

( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 viewportの 属 性 device-width デバイスの 幅 (ピクセル 値 )に 応 じる width 可 視 領 域 の 幅 (ピクセル 値 ) (デフォルトは 980px ) 例 : Appleのサイトはviewport 固 定 iphoneでの 見 え 方 <meta name="viewport" content="width=1024" /> 31

( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 style.css 横 幅 に 応 じて 自 動 対 応 させている /* =Responsive Structure ----------------------------------------------- */ @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) { } 32

( 方 法 1) style.css 横 幅 に 応 じて 自 動 対 応 させている /* =Responsive Structure ----------------------------------------------- */ @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) { } WordBench 大 阪 夏 のスマホサイト 祭 り CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 ブレークポイント ビューエリアの 最 大 幅 横 幅 800pxより 小 さい 場 合 に 適 用 横 幅 650pxより 小 さい 場 合 に 適 用 横 幅 450pxより 小 さい 場 合 に 適 用 ビューエリアが320px~480pxの 場 合 に 適 用 (iphone3g/3gsを 意 識 している) 33

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

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

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

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

( 方 法 1) WordBench 大 阪 夏 のスマホサイト 祭 り CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 2012 年 12 月 リリース 予 定 の WordPress3.5からの 新 デフォルトテーマ Twenty Twelve テーマも レスポンシブ ウェブデザインに 対 応 したテーマとなる 予 定 です http://core.svn.wordpress.org/trunk/wp-content/themes/twentytwelve/ 38

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

( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? ユーザーエージェント (User agent 略 称 UA)とは 利 用 者 があるプロトコルに 基 づいてデータを 利 用 する 際 に 用 いるソフトウェアまたはハードウェアを 指 す 利 用 者 エージェント とも 言 う (Wikipediaより) 40

( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? どの 端 末 から 訪 れたか 端 末 のヘッダー 情 報 から 分 かるということ ( 逆 に ユーザーエージェントの 偽 装 もできる ) 例 : ios5.1.1 Mozilla/5.0 (iphone; CPU iphone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3 Galaxy S III SC-06D Android 4.0.4 Mozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 41

スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Chromeの 場 合 > デフォルトの 機 能 右 クリックで 要 素 の 検 証 から User agentを 設 定 できます 42

スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Firefoxの 場 合 > Firefoxのアドオン FireMobileSimulator を 使 いましょう 有 効 後 ツール > FireMobileSimulator にて スマートフォンや 携 帯 サイトのように ユーザーエージェントを 切 り 替 えられます 43

( 方 法 2) WordBench 大 阪 夏 のスマホサイト 祭 り ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 44

( 方 法 2) WordBench 大 阪 夏 のスマホサイト 祭 り ユーザーエージェントで 振 り 分 けて 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プラグインで スマホ&ガラケーの 両 方 に 対 応 してみます 45

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

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

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 / ココに 作 った テーマフォルダ を 入 れる! 48

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

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

( 方 法 2) WordBench 大 阪 夏 のスマホサイト 祭 り ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 51

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

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

( 方 法 2) WordBench 大 阪 夏 のスマホサイト 祭 り ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 54

コアファイルを 確 認 こうなっているというイメージだけで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 55

$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 ); 56

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; 57

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

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

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

各 種 バナー 広 告 など 可 変 サイズに 対 応 できない PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えます <?php if (wp_is_mobile()) :?> スマートフォン 用 バナーコード <?php else:?> パソコン 用 バナーコード <?php endif;?> 61

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

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

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

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

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

プラグイン 管 理 画 面 からも 選 べます! WPtouch で 検 索! 検 索 できます! WordPress.orgからも 選 べます! http://wordpress.org/extend/plugins/ 67

プラグインフォルダの 確 認 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 ココに プラグインフォルダ を 入 れる! 68

WPtouchは 日 本 語 にも 対 応 しています ( 一 部 翻 訳 が 微 妙 ) WordBench 大 阪 夏 のスマホサイト 祭 り WPtouch Languageを Japanese に 選 択 して Saveする 69

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

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

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

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

で 結 局 WordPressでは どう 実 装 するの? 74

レスポンシブ ウェブデザイン 対 応 のWordPressテーマを 作 成 して 各 種 バナーなど 可 変 サイズに 対 応 できない 部 分 の 振 り 分 けは WordPressの 条 件 分 岐 タグ wp_is_mobile 関 数 を 使 いましょう ただ レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもあります その 場 合 は ユーザーエージェントによって テーマ 自 体 を 切 り 替 えて 対 応 しましょう 工 数 を 掛 けられない 時 は プラグインで! 75

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

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

(コラム) ユーザーエージェントで 振 り 分 けて 専 用 のテーマを 作 る 場 合 jquery Mobileも 便 利 78

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

jquery Mobileは 簡 単 で 便 利 ブラウザ 間 の 違 いを 気 にしなくて 良 い (IE 対 応 など) jquery http://jquery.com/ jquery Mobile http://jquerymobile.com/ 80

jquery Mobileのタグはリファレンス 等 を 参 考 に jquery Mobileのタグ PHP WordPressテンプレートタグ WordPress 条 件 分 岐 タグ を 組 み 合 わせるのがコツ Designs jquery Mobile http://jquerymobile.com/designs/ 81

jquery Mobileを 使 う 準 備 ダウンロード 82

jquery Mobileを 使 う 準 備 ダウンロード 83

jquery Mobileを 使 う 準 備 テーマフォルダの 中 に jqueryとjquery Mobileを 入 れる ココでは jsフォルダを 作 り その 中 に 入 れました 84

jquery Mobileを 使 う 準 備 jsフォルダの 中 身 jqueryと jquery Mobileの サイトから ダウンロードした ファイル 85

jquery Mobileを 使 う 準 備 metaタグの 中 に jquery Mobileを 読 み 出 すタグを 書 く 通 常 のWordPressテーマにおいて 読 み 込 むテンプレートタグ <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/js/jquery.mobile- 1.0b3.min.css" /> <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-1.6.4.min.js"></script> <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.mobile- 1.0b3.min.js"></script> 多 くのテーマフォルダでは header.phpファイル 86

jquery Mobileを 使 う 準 備 metaタグの 中 に jquery Mobileを 読 み 出 すタグを 書 く Ktai Styleで 読 み 込 む 場 合 のタグ これで ktai-themesフォルダを 読 み 込 んでくれる <link rel="stylesheet" href="<?php ks_theme_url();?>js/jquery.mobile-1.0b3.min.css" /> <script src="<?php ks_theme_url();?>js/jquery-1.6.4.min.js"></script> <script src="<?php ks_theme_url();?>js/jquery.mobile-1.0b3.min.js"></script> 多 くのテーマフォルダでは header.phpファイル 87

jquery Mobileを 使 う 準 備 WordPressのコアファイルには jqueryが 同 梱 されているので 以 下 のWordPressのテンプレートタグで 読 み 込 むこともできます <?php wp_enqueue_script('jquery');?> 88

(1)テーマの 色 を 確 定 <body> <div data-role="page" data-theme="c"> <div data-role="header" data-theme="a"> <h1><?php echo get_bloginfo('name');?></h1> </div> <div data-role="content" data-theme="c"> ~~~ </div> <div data-role="footer" data-theme= a"> ~~~ </div> </div> 89

(2)アイコンもタグだけで 実 現 <div data-role="header" data-theme="a"> <a href="<?php echo get_bloginfo('url');?>" data-icon="home">top</a> <h1><?php echo get_bloginfo('name');?></h1> </div> サイトURL (WordPressのテンプレートタグ) 記 事 上 の 共 通 部 分 は header.phpファイルを 用 意 90

(3)リストビューもタグだけで 実 現 HTMLでは <ul data-role="listview" data-inset="true"> <li data-role= list-divider > 墨 田 区 </li> <li><a href=.html > 隅 田 公 園 </a></li> <li><a href=.html > 錦 糸 公 園 </a></li> </ul> トップページは home.phpファイルを 用 意 リストもタグ 指 定 で 簡 単 WordPressで カテゴリごとにリスト 化 も 簡 単 91

(3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' ));?> HTMLから WordPressテーマ 化 <ul data-role="listview" data-inset="true"> <li data-role="list-divider"><?php echo get_catname('1');?></li> <?php while($my_query->have_posts()) : $my_query->the_post();?> <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li> <?php endwhile;?> </ul> 92

(3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' ));?> カテゴリーID 1 の 記 事 を 配 列 に 入 れる 93

(3)リストビュー カテゴリーID 1 の カテゴリー 名 を 取 得 <ul data-role="listview" data-inset="true"> <li data-role="list-divider"><?php echo get_catname('1');?></li> <?php while($my_query->have_posts()) : $my_query->the_post();?> <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li> <?php endwhile;?> </ul> カテゴリーID 1 の 記 事 を ループ 処 理 ( 繰 り 返 し 処 理 ) 記 事 のタイトルを 取 得 記 事 のリンクURLを 取 得 94

(4) 折 り 畳 み <div data-role="collapsible" data-collapsed="true"> ~~~ WEBAPIを 利 用 して Yahoo! 知 恵 袋 の 関 連 情 報 を 自 動 取 得 & 表 示 ~~~ </div> 各 記 事 は single.phpファイルを 用 意 コンテンツの 折 り 畳 みも 簡 単 WordPressと 組 み 合 わせれば 表 示 するコンテンツの 量 も 変 えられる 95

(5)フッターナビゲーション 動 的 にならないのなら 直 接 URLを 入 れても 良 い <div data-role="footer" data-position="fixed" data-theme="c"> <div data-role="navbar"> <ul> <li><a href= http://www..com/">top</a></li> <li><a href= http://www..com/profile.html">プロフィール</a></li> <li><a href= http://www..com/mail.html">お 問 い 合 わせ</a></li> </ul> </div> </div> 記 事 下 の 共 通 部 分 は footer.phpファイルを 用 意 96

(コラム) レスポンシブ ウェブデザイン のディレクションについて 97

レスポンシブ ウェブデザインのディレクション 前 提 : モバイルファースト モバイルユーザーに 対 応 したコンテンツ の 出 し 方 から 考 えていく 98

レスポンシブ ウェブデザインのディレクション 紙 から 考 えるイメージでは 無 い レスポンシブ ウェブデザインが 普 及 したら Webブラウザベースでデザインしていくことも? 例 : text-shadow 影 を 付 ける border-radius 角 丸 を 付 ける 参 考 : 菊 池 崇 さんの 技 術 評 論 社 さんでの 記 事 http://gihyo.jp/design/feature/01/css3-approach/0001 99

レスポンシブ ウェブデザインのディレクション 通 常 の 制 作 の 流 れ 1. 要 件 定 義 2.ワイヤーフレーム 3.デザインをPhotoshopやFireworksなどで 作 る 4.モックアップ 5. 実 装 6.デバック 7. 完 成 納 品 レスポンシブ ウェブデザインの 案 件 だったのに 実 現 不 可 能 になることも ワイヤーフレームを 決 める 段 階 から 入 り 込 めないと 厳 しいのでは? 100

レスポンシブ ウェブデザインのディレクション グリッドレイアウト 均 等 なカラムと 隙 間 から 成 り 立 っているCSSのレイアウト (CSSフレームワーク) を 使 うと レスポンシブ ウェブデザインがしやすい 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 101

レスポンシブ ウェブデザインのディレクション 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 102

WordPress 情 報 の 調 べ 方 http://www.zusaar.com/event/348004 詳 しくは おそらく WordBench 神 戸 [ 番 外 編 ]で! レスポンシブデザインやるなら 座 談 会 2012 年 8 月 26 日 ( 日 ) 13:30-16:30 こうべまちづくり 会 館 ( 神 戸 本 町 )2F ホール 神 戸 市 中 央 区 元 町 通 4 丁 目 2 番 14 号 103

WordPress 情 報 の 調 べ 方 WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 104

WordPress 情 報 の 調 べ 方 WordCamp Tokyo 2012 2012 年 9 月 15 日 ( 土 ) 10:00-17:00 大 田 区 産 業 プラザ 東 京 都 大 田 区 南 蒲 田 1-20-20 http://2012.tokyo.wordcamp.org/ 105

最 後 に 今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 106

目 次 1. 自 己 紹 介 2.スマートフォン 対 応 サイトとその 方 法 3.Googleの 見 解 4. 5. 質 疑 応 答 107