PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

ゆゆこてっちがわら
7 years ago
Views:

1 ATステップアップセミナー初心者でも簡単にできる WordPressでスマートフォン最適化株式会社コミュニティコム星野邦敏埼玉県さいたま市大宮区宮町 1-5 銀座ビル7 階 URL: 1

2 はじめに今日のスライドは株式会社コミュニティコムの Webサイトに載せます! 2

3 目次 0. 自己紹介質疑応答 3

4 目次 0. 自己紹介質疑応答 4

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

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

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

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

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

10 自己紹介 WordPressに関して書籍や雑誌で執筆をしたり今も執筆中です 2012 年 7 月に出版 web creators 特別号スマートフォンソーシャルメディア WordPress 2013 年 1 月に出版 WordPressプラグイン & WebAPI 活用ガイドブック 10

11 自己紹介最近の関心事はコワーキングスペースの運営ですコワーキングスペース7F 埼玉県さいたま市大宮駅東口徒歩 1 分 65 坪 215 平米 11

12 目次 0. 自己紹介質疑応答 12

13 参考サイト A List Apart 日本語サイト 13

14 参考サイト OpenCU 14

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

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

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

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

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

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

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

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

23 Googleウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう g-tablet-users-full-sizedweb.html 23

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

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

26 ( 方法 1) ATステップアップセミナー CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブウェブデザインって? ( 引用元 : ) 26

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

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

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

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

31 ( 方法 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) { } 31

32 ( 方法 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) { } ATステップアップセミナー CSS3のメディアクエリ(Media Queries)を使ってテーマで対応ブレークポイントビューエリアの最大幅横幅 800pxより小さい場合に適用横幅 650pxより小さい場合に適用横幅 450pxより小さい場合に適用ビューエリアが320px~480pxの場合に適用 (iphone3g/3gsを意識している) 32

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

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

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

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

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

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

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

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

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

42 ( 方法 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

43 ( 方法 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

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

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

46 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

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

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

49 ( 方法 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

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

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

52 ( 方法 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

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

54 $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

55 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

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

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

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

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

60 ウィジェット用のプラグインも後藤賢司プラグイン ytbd change the display in PC and smartphone スマホサイトとPCサイトの表示を分けて入力出来るプラグイン 60

61 ウィジェット用のプラグインも PC 表示用スマホ表示用 61

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

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

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

65 (コラム) スマホ専用のバナーもあります( 例 :アクセストレード) 1[リンク作成 ]をクリック 2[スマートフォン]をチェック 3[ 検索 ]をクリック 65

66 (コラム) スマホ専用のバナーもあります( 例 :アクセストレード) 1[iSmad/iListing+]をクリック 66

67 (コラム) スマホ専用のバナーもあります( 例 :アクセストレード) ismad 広告 1つのiSmad 広告に 20 個までバナー登録できます同じ広告主でも異なるバナー画像であれば組みこむことが可能です 67

68 (コラム) スマホ専用のバナーもあります( 例 :アクセストレード) オーバーレイ広告インライン広告詳しい設置方法は以下のアクセストレードさんのURLに書かれています 68

69 (コラム) スマホ専用のバナーもありますオーバーレイ広告スマートフォン専用のバナーが表示される 69

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

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

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

73 プラグインフォルダの確認 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

74 WPtouchは日本語にも対応しています ( 一部翻訳が微妙 ) ATステップアップセミナー WPtouch Languageを Japanese に選択して Saveする 74

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

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

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

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

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

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

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

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

83 (コラム) グリッドレイアウト均等なカラムと隙間から成り立っているCSSのレイアウト (CSSフレームワーク) を使うとレスポンシブウェブデザインがしやすい例 :Twitter Bootstrap 83

84 (コラム) 例 :Twitter Bootstrap 84

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

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

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

目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2 Google ウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法の記事を受けて WordPressでのテーマカスタマイズ方法株式会社コミュニティコム星野邦敏 116-0013 東京都荒川区西日暮里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/