ATステップアップセミナー 初 心 者 でも 簡 単 にできる WordPressでスマートフォン 最 適 化 株 式 会 社 コミュニティコム 星 野 邦 敏 330-0802 埼 玉 県 さいたま 市 大 宮 区 宮 町 1-5 銀 座 ビル7 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
はじめに 今 日 のスライドは 株 式 会 社 コミュニティコムの Webサイトに 載 せます! http://www.communitycom.jp/ 2
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 3
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 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 2013 年 1 月 に 出 版 WordPressプラグイン & WebAPI 活 用 ガイドブック 10
自 己 紹 介 最 近 の 関 心 事 は コワーキングスペースの 運 営 です コワーキングスペース7F http://office7f.com/ 埼 玉 県 さいたま 市 大 宮 駅 東 口 徒 歩 1 分 65 坪 215 平 米 11
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 12
参 考 サイト A List Apart 日 本 語 サイト http://all-web.org/ala/ 13
参 考 サイト OpenCU http://www.opencu.com/ 14
CSS3のMedia Queriesによって WordPressテーマ 側 で レスポンシブ ウェブデザインにして 画 面 サイズに 応 じて 表 示 を 振 り 分 けることができます 15
参 考 サイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 16
同 一 URLで ユーザーエージェントで 振 り 分 けることにより PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けることができます 17
方 法 (ⅰ)レスポンシブ ウェブデザインによる 画 面 切 り 替 え (ⅱ)ユーザーエージェントによる 振 り 分 け メリット ATステップアップセミナー (1) 各 端 末 ごとに 自 動 で 最 適 な 表 示 ユーザーも 見 やすい 収 益 の 機 会 損 失 が 無 くなる (2) 同 一 URLで 自 動 で 振 り 分 け コンテンツを 複 数 書 く 手 間 が 無 い ミラーサイトにならないので 被 リンク 分 散 が 無 くSEOにも 合 う 18
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 19
始 めに 結 局 何 が 良 いの? 20
要 は 同 じHTMLが 良 いと 言 ってる 他 の 方 法 を 否 定 はしていない Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 21
Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 22
Googleウェブマスター 向 け 公 式 ブログ: タブレット 端 末 ユーザーには フルサイズのウェブを 表 示 しましょう http://googlewebmastercentralja.blogspot.jp/2012/11/givin g-tablet-users-full-sizedweb.html 23
まとめ ATステップアップセミナー レスポンシブ ウェブデザインを 推 奨 するGoogleの 公 式 見 解 ( 方 法 1) 各 種 バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う ( 方 法 2) とは 言 え レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもある ( 既 存 サイトにスマホサイト 追 加 等 ) ( 方 法 2) 簡 易 的 に 対 応 するなら プラグインを 入 れて 完 了 ( 方 法 4) 24
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 25
( 方 法 1) ATステップアップセミナー CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? ( 引 用 元 : http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html ) 26
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? 要 は 画 面 サイズによってレイアウトを 変 えること 27
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 WordPress3.2からの デフォルトテーマ Twenty Eleven テーマや WordPress3.5からの 新 デフォルトテーマ Twenty Twelve テーマは Media Queriesに 対 応 した テーマですので このテーマをベースに カスタマイズすることもできます 28
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 header.php meta 情 報 として viewportを 設 定 する <meta name="viewport" content="width=device-width" /> Viewportとは? 一 言 で 言 うと 表 示 領 域 のこと 29
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 viewportの 属 性 device-width デバイスの 幅 (ピクセル 値 )に 応 じる width 可 視 領 域 の 幅 (ピクセル 値 ) (デフォルトは 980px ) 例 : Appleのサイトはviewport 固 定 iphoneでの 見 え 方 <meta name="viewport" content="width=1024" /> 30
( 方 法 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) { } 31
( 方 法 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) { } ATステップアップセミナー CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 ブレークポイント ビューエリアの 最 大 幅 横 幅 800pxより 小 さい 場 合 に 適 用 横 幅 650pxより 小 さい 場 合 に 適 用 横 幅 450pxより 小 さい 場 合 に 適 用 ビューエリアが320px~480pxの 場 合 に 適 用 (iphone3g/3gsを 意 識 している) 32
( 方 法 1) ATステップアップセミナー 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) デバイスサイズの 幅 で 適 用 33
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザイン(Media Queries)に 対 応 した WordPressのテーマは たくさん 登 録 されています Whiteboard Hatch PageLines 34
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザイン(Media Queries)に 対 応 した WordPressのテーマは たくさん 登 録 されています Response Responsive BizVektor ( 日 本 人 作 成 ) 35
レスポンシブ ウェブ デザイン メディアクエリで 横 幅 に 応 じて サイトを 最 適 化 8bitodyssey.com http://8bitodyssey.com/ デフォルトテーマ Twenty Eleven を 子 テーマ で カスタマイズ 36
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 37
( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? ユーザーエージェント (User agent 略 称 UA)とは 利 用 者 があるプロトコルに 基 づいてデータを 利 用 する 際 に 用 いるソフトウェアまたはハードウェアを 指 す 利 用 者 エージェント とも 言 う (Wikipediaより) 38
( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? どの 端 末 から 訪 れたか 端 末 のヘッダー 情 報 から 分 かるということ ( 逆 に ユーザーエージェントの 偽 装 もできる ) 例 : ios5.1.1 ATステップアップセミナー 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 39
スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Chromeの 場 合 > デフォルトの 機 能 右 クリックで 要 素 の 検 証 から User agentを 設 定 できます 40
スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Firefoxの 場 合 > Firefoxのアドオン FireMobileSimulator を 使 いましょう 有 効 後 ツール > FireMobileSimulator にて スマートフォンや 携 帯 サイトのように ユーザーエージェントを 切 り 替 えられます 41
( 方 法 2) ATステップアップセミナー ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 42
( 方 法 2) ATステップアップセミナー ユーザーエージェントで 振 り 分 けて 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プラグインで スマホ&ガラケーの 両 方 に 対 応 してみます 43
Ktai Style プラグイン ( 手 順 1) スマートフォンサイトに 対 応 したテーマや ガラケーサイトに 対 応 したテーマを 作 る ( 手 順 2) ktai-themesフォルダに 作 ったテーマを 入 れる ( 手 順 3) 管 理 画 面 のKtai Styleの[テーマ]をクリックして 各 端 末 ごとで 使 うテーマを 振 り 分 ける 44
Ktai Styleプラグイン [いますぐインストール]を クリックして 有 効 化 します 45
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 / ココに 作 った テーマフォルダ を 入 れる! 46
Ktai Styleプラグイン Ktai Style プラグインを 有 効 化 すると 管 理 画 面 のメニューに 左 のような 項 目 が 追 加 されるので スマートフォンや 携 帯 表 示 の 設 定 ができます [テーマ]をクリックして 各 端 末 で 使 う テーマを 振 り 分 けます 47
Ktai Styleプラグイン Ktai Style プラグインを インストールすれば 各 端 末 のユーザーエージェント に 応 じて 同 一 URLで サイトを 振 り 分 けることが できます 48
( 方 法 2) ATステップアップセミナー ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 49
Mobile Theme Switcherプラグイン iphone&ipod 用 ipad 用 Android 用 それぞれのテーマを 設 定 できる 50
WordPressのコアファイルの 条 件 分 岐 を 前 提 に プラグインを 作 って 端 末 ごとに 振 り 分 けることもできます WordPressテーマとして style.cssに Theme Name: smartphone と 書 いてあるモノを スマートフォンの 時 に 読 み 込 むプラグイン if (wp_is_mobile()) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; } 51
( 方 法 2) ATステップアップセミナー ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 52
コアファイルを 確 認 こうなっているというイメージだけで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 53
$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 ); 54
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; 55
WordPressのコアファイルの 条 件 分 岐 を 前 提 に パソコン 用 コンテンツと スマートフォン 用 コンテツを 振 り 分 けることも 出 来 ます WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン 用 コンテンツ <?php else:?> パソコン 用 コンテンツ <?php endif;?> WordPressのバージョン3.4 以 上 が 必 須 です 56
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 57
各 種 バナー 広 告 など 可 変 サイズに 対 応 できない PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えます レスポンシブWebデザイン にしても バナーは 切 れる CSSで display:noneで 対 応 しても Google AdSenseなどは リスクも 考 えられる 58
各 種 バナー 広 告 など 可 変 サイズに 対 応 できない PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えます <?php if (wp_is_mobile()) :?> スマートフォン 用 バナーコード <?php else:?> パソコン 用 バナーコード <?php endif;?> 59
ウィジェット 用 のプラグインも 後 藤 賢 司 さん @428design プラグイン ytbd change the display in PC and smartphone スマホサイトとPCサイトの 表 示 を 分 けて 入 力 出 来 る プラグイン 60
ウィジェット 用 のプラグインも PC 表 示 用 スマホ 表 示 用 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
(コラム) スマホ 専 用 のバナーもあります( 例 :アクセストレード) 1[リンク 作 成 ]をクリック 2[スマートフォン]をチェック 3[ 検 索 ]をクリック 65
(コラム) スマホ 専 用 のバナーもあります( 例 :アクセストレード) 1[iSmad/iListing+]をクリック 66
(コラム) スマホ 専 用 のバナーもあります( 例 :アクセストレード) ismad 広 告 1つのiSmad 広 告 に 20 個 までバナー 登 録 できます 同 じ 広 告 主 でも 異 なるバナー 画 像 であれば 組 みこむことが 可 能 です 67
(コラム) スマホ 専 用 のバナーもあります( 例 :アクセストレード) オーバーレイ 広 告 インライン 広 告 詳 しい 設 置 方 法 は 以 下 のアクセストレードさんのURLに 書 かれています https://member.accesstrade.net/partner/manual/help_ismad/ismad_ilisting.html 68
(コラム) スマホ 専 用 のバナーもあります オーバーレイ 広 告 スマートフォン 専 用 の バナーが 表 示 される 69
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 70
( 方 法 4)スマートフォンに 自 動 対 応 するプラグイン WPtouch プラグインを インストールして 有 効 化 すると スマートフォン 対 応 が 自 動 でされた 上 に デザインも スマートフォンっぽく なっています 71
プラグイン 管 理 画 面 からも 選 べます! WPtouch で 検 索! 検 索 できます! WordPress.orgからも 選 べます! http://wordpress.org/extend/plugins/ 72
プラグインフォルダの 確 認 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 ココに プラグインフォルダ を 入 れる! 73
WPtouchは 日 本 語 にも 対 応 しています ( 一 部 翻 訳 が 微 妙 ) ATステップアップセミナー WPtouch Languageを Japanese に 選 択 して Saveする 74
WPtouchには 有 料 版 があります 基 本 的 に Developer を 選 ばざるを 得 ない ライセンスキーを 各 サイトごとに 入 力 して 管 理 する 方 法 を 取 っている 1 回 199ドルを 支 払 えば その 後 は 無 制 限 無 期 限 で 使 える PayPalかクレジットカード 決 済 http://www.bravenewcode.com/store/plugins/wptouch-pro/ 75
WPtouch 有 料 版 は 色 々できます ipadに 対 応 76
WPtouch 有 料 版 は 色 々できます ipad 対 応 Enabled を 選 択 77
WPtouch 有 料 版 は 色 々できます その 他 にも アイコン 変 更 メニュー 変 更 広 告 削 除 広 告 設 定 複 数 テーマ 設 定 デザイン 色 変 更 など 78
で 結 局 WordPressでは どう 実 装 するの? 79
レスポンシブ ウェブデザイン 対 応 のWordPressテーマを 作 成 して 各 種 バナーなど 可 変 サイズに 対 応 できない 部 分 の 振 り 分 けは WordPressの 条 件 分 岐 タグ wp_is_mobile 関 数 を 使 いましょう ただ レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもあります その 場 合 は ユーザーエージェントによって テーマ 自 体 を 切 り 替 えて 対 応 しましょう 工 数 を 掛 けられない 時 は プラグインで! 80
(コラム)3Gなど 回 線 が 細 い 場 合 は? レスポンシブWebデザイン(Media Queries)に 対 応 した 上 で ページ 下 にスクロールしたら ページ 送 りをして ソースコードが 新 たに 出 るようにする ページを 開 いただけの 時 点 は 全 HMTLソースコードは 出 ないので 軽 い HTMLソースが 出 ないということはSEO 的 にはどうだろう? 81
(コラム)3Gなど 回 線 が 細 い 場 合 は? WordPress + jquery での 実 装 方 法 <WordPress> wp_link_pages テンプレートタグで テーマ 実 装 投 稿 本 文 に <!--nextpage--> で 区 切 る <jquery> jquery.autopager プラグインをheaderまたはfooterに 入 れる http://lagoscript.org/jquery/autopager 82
(コラム) グリッドレイアウト 均 等 なカラムと 隙 間 から 成 り 立 っているCSSのレイアウト (CSSフレームワーク) を 使 うと レスポンシブ ウェブデザインがしやすい 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 83
(コラム) 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 84
最 後 に WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 85
最 後 に 今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 86