目次 1. WPtouch の欠点 2. 賢威 6.1 はレスポンシブウェブデザインを搭載 ( ア ) メリット1 一括管理によりメンテナンスが楽 ( イ ) メリット2 Google も推奨! 3. 賢威 6.1 でトレンドサイトを運営する 4. レスポンシブウェブデザインをスマホで見ると 5.

Size: px

Start display at page:

Download "目次 1. WPtouch の欠点 2. 賢威 6.1 はレスポンシブウェブデザインを搭載 ( ア ) メリット1 一括管理によりメンテナンスが楽 ( イ ) メリット2 Google も推奨! 3. 賢威 6.1 でトレンドサイトを運営する 4. レスポンシブウェブデザインをスマホで見ると 5."

れれゆきしげ
5 years ago
Views:

1 賢威 6.1 トレンドアフィリエイト広告配置最適化マニュアル ~ レスポンシブ広告ユニットの導入 ~ 作成者スイクン参考資料賢威 6.1 のカスタマイズ基礎当資料でわからないことがありましたら賢威 6.1 のカスタマイズ基礎編を参考にしてください作成者情報 1

2 目次 1. WPtouch の欠点 2. 賢威 6.1 はレスポンシブウェブデザインを搭載 ( ア ) メリット1 一括管理によりメンテナンスが楽 ( イ ) メリット2 Google も推奨! 3. 賢威 6.1 でトレンドサイトを運営する 4. レスポンシブウェブデザインをスマホで見ると 5. では最適なアドセンス広告配置は? 6. レスポンシブウェブデザインへの広告導入失敗例 7. 広告導入成功例コードの最適化 8. 最適化されたコードの単一記事導入 9. 最適化されたコードのトップページ導入作成者情報 2

3 WPTouch の欠点これまでトレンドアフィリエイトをやっていく上で wp-touch というプラグインによってスマホユーザーに対して最適化した状態のサイトを見せてきました例えば Wptouch を使っていないサイトをスマホで閲覧した場合以下のように表示されて文字が見難いだけではなくてアドセンス広告がクリックされづらくクリック率はかなり下がります作成者情報 3

4 だからこそ Wptouch を導入していきました導入すると次のように表示されますこの場合には文字もみやすいですし画像もスマホの横幅に最適化されて表示されますアドセンス広告も画面に適切な大きさで表示されしっかりと目に入るためクリック率が高まりますだいたい Wptouch を使わない場合に比較して Wptouch を利用したほうが 1.5 倍にもクリック率が上昇します作成者情報 4

5 しかし先ほどの後者の画像と今からお見せする画像を見ていただくとわかりますがせっかくきれいに作ったサイト全体の魅せ方が変化してしまいます Wptouch 導入したサイトをスマホで見た場合の画像 1 ヘッダーに魅力なし Wptouch 導入したサイトをスマホで見た場合の画像 2 コンテンツの下の部分がわかりづらい作成者情報 5

6 Wptouch 導入したサイトをスマホで見た場合の画像 3 コメントの下のフッター部分がなくなり別記事への誘導が出来ないこのような欠点が Wptouch にはありますこれではクリック率は上がるのですがサイト独自の部分を魅せられずリピーター化がうまくなされませんではどうしたら良いでしょうか? 実はこの欠点を見事に改善してトレンドアフィリエイトを攻略する方法がありますそれがレスポンシブウェブデザイン対応の賢威 6.1 を利用したトレンドサイト運営です作成者情報 6

7 賢威 6.1 はレスポンシブウェブデザインに対応さてここでレスポンシブウェブデザインという聞きなれない言葉が出てきましたまずはここから解説していきましょうレスポンシブウェブデザインを採用していないサイトは先ほどもお話をしたようにプラグインを使うなどして PC 用スマホ用閲覧者に向けて最適化していかないといけないですしかしレスポンシブウェブデザイン採用テンプレートを使ったサイトであればプラグインを使わなくとも閲覧者のブラウザ横幅サイズを基準にして適切な表示をなしてくれるのですこのレスポンシブウェブデザインのメリットには何があるのかをさらっとまとめてみました!! メリット 1 一括管理によりメンテナンスが楽! 例えば Wptouch を使ったことがあればわかるかと思いますが Wptouch のバージョンアップの度に php の修正を行わないとスマホ表示の際にアドセンス広告が反映されていないという事態が起こりましたこのように PC 用とスマホ用と別々の方法で最適化しているためにサイトのデザインや広告を修正する際には両方の設定を変更していかないといけないのですそれに対してレスポンシブウェブデザインであれば PC 用とスマホ用の表示はどちらも同じ方法で最適化していますから修正が非常に楽なのです作成者情報 7

8 メリット 2 Google が推奨! サイト運営者にとって味方に付けたい Google はこのレスポンシブウェブデザインを推奨しています理由は以下のとおりです PC 用のページとモバイル用のページを単一の ( 同一の ) URL とすることができるため ( 中略 )Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになりますユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができますというわけで実際にレスポンシブウェブデザインを搭載した賢威 6.1 でトレンドサイトを作成してみましょう作成者情報 8

9 賢威 6.1 でトレンドサイトを運営するでは実際にレスポンシブウェブデザインを搭載した賢威 6.1 でトレンドサイトを運営してみましょう一応ですが基礎から解説をしていきますトレンドサイト運営事前準備 1. テンプレートのインストールまずはテンプレートのインストールから 2. その他の基本設定その他のタイトルディスクリプションメタキーワード設定そしてプラグインの導入などは MBA にて配布されたトレンドサイトアフィリエイト資料で設定をしてみてください ( パスワードは MBA 通信にてお知らせしたのでそちらを御覧ください ) 3. 賢威 6.1 のカスタマイズサイトへ賢威 6.1 を導入したら次はこの資料を参考にカスタマイズしていきましょうそして以上の操作を完了しましたら実際にレスポンシブウェブデザインを導入します 4. レスポンシブウェブデザイン導入のチェック賢威 6.1 であれば標準で導入されていますがこちらの方法でしっかりと導入されているかを確認してみてください作成者情報 9

10 管理画面賢威の設定レスポンシブウェブデザイン有効にするにチェックが入っていれば OK です作成者情報 10

レスポンシブウェブデザイン搭載サイトをスマホで見るとでは実際に以上の方法でレスポンシブウエブデザインを搭載したサイトをスマホで見てみましょうスマホで見てみるとヘッダー部分はしっかりと表示されておりどのようなサイトなのかがはっきりとスマホからでもわかりますそして

11 レスポンシブウェブデザイン搭載サイトをスマホで見るとでは実際に以上の方法でレスポンシブウエブデザインを搭載したサイトをスマホで見てみましょうスマホで見てみるとヘッダー部分はしっかりと表示されておりどのようなサイトなのかがはっきりとスマホからでもわかりますそしてコンテンツ部分もスマホの画面に最適化されているのがわかりますさてちょっと見てみるとわかりますがこの状態ではグローバルメニューが表示されておりませんどうやって表示するのかといいますとヘッダーの下にあるメニューをクリックしますそうすると作成者情報 11

このように下に向かって表示されますこの事からわかるのはグローバルメニューに表示されている項目はスマホから閲覧された場合にはわかりづらいということですつまりクリックしてもらいたいコンテンツはグローバルメニューに載せないほうがよりよい事がわかります

12 このように下に向かって表示されますこの事からわかるのはグローバルメニューに表示されている項目はスマホから閲覧された場合にはわかりづらいということですつまりクリックしてもらいたいコンテンツはグローバルメニューに載せないほうがよりよい事がわかりますさて上の画像を見てもらえればわかりますがコンテンツ部分は表示されてますがサイドバーの部分が表示されていませんどこに表示されているのでしょうか? それで下の方にスクロールしてみると作成者情報 12

サブコンテンツサイドバーのように並んでいましたこの部分のサイドバーをクリックするとようやくサイドバーの中身が表示されていきますこのようにスマホユーザーにとってクリックしないと表示されないということは目につくのはコンテンツ部分 ( 本文 ) のみであり

13 サブコンテンツサイドバーのように並んでいましたこの部分のサイドバーをクリックするとようやくサイドバーの中身が表示されていきますこのようにスマホユーザーにとってクリックしないと表示されないということは目につくのはコンテンツ部分 ( 本文 ) のみでありサイドバーが目に触れる可能性がほとんどないということですこの事からサイドバーにアドセンス広告を仕込んでおいてももちろんサブコンテンツ部分にアドセンス広告を仕込んでおいても意味が無いということがわかります作成者情報 13

14 ですからアドセンス広告を仕込むのであれば必ず記事上本文中記事下の 3 箇所に仕込むのが最もクリック率が高くなりますそして更に下の方にスクロールしていくとフッター部分が表示されていますこの部分は標準でそのまま表示されていますそしてそこから更に下に行くと一番上に表示されているトップメニューの部分が表示されていますここらで以上の事をまとめてみましょう作成者情報 14

15 PC で見た際の次の 1~7 の部分はスマホでは次のように配列されます 1 トップメニュー 2 ヘッダー 3 グローバルナビ 4 コンテンツ ( 本文 ) 5 サブコンテンツ 6 サイドバー 7 フッター PC の場合作成者情報 15

16 スマホの場合以上の事から最適な広告配置を考えていきましょう作成者情報 16

17 では最適なアドセンス広告配置は? さて先ほどまでわかったことから実際にどういった広告配置を利用していけばいいのか考えて行きましょうまずはダメな例からです!!!! これまでの方法でレスポンシブウェブデザイン搭載サイトに広告を貼ると失敗します一応ですが失敗例を見ておいてください作成者情報 17

18 レスポンシブウェブデザインへの広告導入失敗例失敗例として以下の種類の広告を取得してみましょうそして記事上記事中記事下に以下の方法で配置していきます作成者情報 18

19 賢威 6.1 へのアドセンス広告記事上設置管理画面外観テーマ編集 single.php の以下の部分に太文字部分を挿入  <div id="main-and-sub">  <div id="main-contents"> <center>sponsored Link</br> アドセンス広告コード </center> <?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> そうするとこのように表示されます PC での閲覧 ( 広告を付けたばかりなのでまだ非表示状態です ) 作成者情報 19

20 賢威 6.1 へのアドセンス広告記事中設置プラグインで Master Post Advert を導入しましょう参考はこちらの資料の 53P 辺り ( パスワードは MBA 通信にて配信されています ) そうすると MORE タグの次に表示されます PC での閲覧 ( 広告を付けたばかりなので広告は非表示状態です ) 作成者情報 20

21 賢威 6.1 へのアドセンス広告記事下設置管理画面外観テーマ編集 single.php の以下の部分に太文字部分を挿入 <div class="contents clearfix"> <div class="article">  <?php the_content();?>  </div>  <center>sponsored Link</br> アドセンス広告コード </center> <?php wp_link_pages();?> <?php if(get_the_tags()){?> <div class="post-tag"> <p> タグ :<?php the_tags('', ', ');?></p> </div> <?php }?> そうするとこのように表示されます PC での閲覧 ( 広告を付けたばかりなのでまだ非表示状態です ) 作成者情報 21

22 さてこの状態でスマホ表示してみるとどう表示されるでしょうか? ちょっと見てみましょうそうするとこのように枠線をはみだして表示されていましたもちろん細かいところを気にしないのであればこの表示でも OK です PC でもしっかりと表示されていますしスマホでもそこまで気にするほどの状態ではありませんただちょっと気になるというのであれば次の方法を試してみてください作成者情報 22

23 広告導入成功例レスポンシブ広告ユニットを作成しようレスポンシブウェブデザイン対応サイトではレスポンシブ広告ユニットを作成する必要がありますそれではやり方を解説しましょう 1. 広告コードの生成通常通りに広告を生成するのですが広告サイズの部分でレスポンシブ広告ユニット ( ベータ版 ) を選択しますそして保存してコードを取得します作成者情報 23

24 2. 生成したコードの最適化先ほどの失敗例で解説した方法と同様に配置していきますが生成したコードをそのまま配置してはいけませんそのまま配置するとこのようになっています PC 表示 ( 広告のはみ出し ) スマホ表示 ( 広告が小さくてクリック率が小さくなる ) これはまだ最適化されていませんので次の方法で最適化をしましょう作成者情報 24

25 生成されたコード <style>.my_adslot { width: 320px; height: 50px; 500px) {.my_adslot { width: 468px; height: 60px; } 800px) {.my_adslot { width: 728px; height: 90px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle []).push({}); </script> このコードを以下のように最適化してください最適化したコード ( 数値を黄色マーカーと同様に設定しなおしてください ) <style>.my_adslot { width: 250px; height: 250px; 500px) {.my_adslot { width: 336px; height: 280px; } 800px) {.my_adslot { width: 336px; height: 280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle []).push({}); </script> そうしてサイトに貼り付けていきましょう貼り付け箇所は以下の部分です作成者情報 25

26 最適化されたコード単一記事への広告導入賢威 6.1 へのアドセンス広告記事上設置方法管理画面外観テーマ編集 single.php の以下の部分に太文字部分を挿入  <div id="main-and-sub">  <div id="main-contents"> <center>sponsored Link</br> アドセンス広告コード </center> <?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> 作成者情報 26

27 賢威 6.1 へのアドセンス広告記事中設置方法プラグインで Master Post Advert を導入しましょう参考はこちらの資料の 53P 辺り ( パスワードは MBA 通信にて配信されています ) 作成者情報 27

28 賢威 6.1 へのアドセンス広告記事下設置方法管理画面外観テーマ編集 single.php の以下の部分に太文字部分を挿入 <div class="contents clearfix"> <div class="article">  <?php the_content();?>  </div>  <center>sponsored Link</br> アドセンス広告コード </center> <?php wp_link_pages();?> <?php if(get_the_tags()){?> <div class="post-tag"> <p> タグ :<?php the_tags('', ', ');?></p> </div> <?php }?> 作成者情報 28

29 さて以上の操作を終えるとどのように表示されているかみてみましょう PC からの表示レクタングル大と同じ表示にスマホからの表示スクエアと同様の表示に作成者情報 29

30 このように設定をすると非常にきれいに表示がなされて Wptouch によりアドセンス広告を設置するよりもはるかに良いサイト表示が出来ますこれだけきれいに表示がなされるのでトレンドサイトでアドセンス攻略するのであればレスポンシブウェブデザイン搭載されたテンプレートが必須とも言えるくらい素晴らしいですさて最後に単一記事だけではなくてトップページにも広告を貼っていきましょう作成者情報 30

31 最適化された広告コードトップページへの導入これで最終仕上げです先ほどと同様に最適化された以下のコードをトップページにも導入していきます <style>.my_adslot { width: 250px; height: 250px; 500px) {.my_adslot { width: 336px; height: 280px; } 800px) {.my_adslot { width: 336px; height: 280px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle []).push({}); </script> 導入方法は外観テーマ編集 index.php です作成者情報 31

32 トップぺージ最新情報上  <div id="main-contents"> <?php if (the_keni('new_info') > 0):?> <?php if(is_home() and get_query_var('paged') <= 1):?> <center>sponsored Link</br> 最適化されたコード </center>  <h2><?php _e('latest Info','keni') ;?></h2> <div class="contents"> このように表示されます PC 表示スマホ表示作成者情報 32

33 トップページ最新情報下 <?php get_template_part('social-button');?> </div>  <center>sponsored Link</br> 最適化されたコード </center> <?php endif;?> <?php else:?> <div class="contents"> <?php get_template_part('social-button');?> </div> PC 表示スマホ表示作成者情報 33

34 コンテンツとフッターの間  <?php endif?> </div>  <center>sponsored Link</br> 最適化されたコード </center> </div>  <?php get_footer();?> PC 表示スマホ表示作成者情報 34

35 以上の方法で広告を導入するとアドセンス広告のクリック率を最大限まで高めてくれますこれにより Wptouch を導入するよりもはるかに素晴らしい結果が出せるようになるでしょう当資料を適用した場合には Wptouch というプラグインは利用しないでください!! 作成者情報 35

プラグイン導入プラグインとは何かと言うと簡単に言えば拡張機能のことですワードプレスを多くの人が推奨する理由はこのプラグインの存在が大きいと言えるでしょう普通のワードプレスはその辺のブログと何も変わらないようなものですがプラグインを導入することでかなり便利になります

プラグイン導入プラグインとは何かと言うと簡単に言えば拡張機能のことですワードプレスを多くの人が推奨する理由はこのプラグインの存在が大きいと言えるでしょう普通のワードプレスはその辺のブログと何も変わらないようなものですがプラグインを導入することでかなり便利になりますプラグイン導入プラグインとは何かと言うと簡単に言えば拡張機能のことですワードプレスを多くの人が推奨する理由はこのプラグインの存在が大きいと言えるでしょう普通のワードプレスはその辺のブログと何も変わらないようなものですがプラグインを導入することでかなり便利になります 1. 少し設定が必要なプラグイン Akismet スパムコメントを防止してくれるプラグインですこれは必ず導入しておきましょう