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

(1)

作成者情報 http://yakugakusuikun.com/ 1

賢威 6.1×トレンドアフィリエイト

広告配置最適化マニュアル

～レスポンシブ広告ユニットの導入～

作成者スイクン【参考資料】賢威 6.1 のカスタマイズ基礎 http://yakugakusuikun.com/8283.html 当資料でわからないことがありましたら賢威 6.1 のカスタマイズ基礎編を参考にしてください。

(2)

１． WPtouch の欠点

２．賢威 6.1 はレスポンシブウェブデザインを搭載

(ア)

メリット１一括管理によりメンテナンスが楽

(イ)

メリット２ Google も推奨！

３．賢威 6.1 でトレンドサイトを運営する

４．レスポンシブウェブデザインをスマホで見ると・・・

５．では、最適なアドセンス広告配置は？

６．レスポンシブウェブデザインへの広告導入失敗例

７．広告導入成功例コードの最適化

８．最適化されたコードの単一記事導入

９．最適化されたコードのトップページ導入

(3)

WPTouch の欠点

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

(4)

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

(5)

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

(6)

作成者情報 http://yakugakusuikun.com/ 6 Wptouch 導入したサイトをスマホで見た場合の画像３コメントの下のフッター部分がなくなり別記事への誘導が出来ないこのような欠点が Wptouch にはあります。これでは、クリック率は上がるのですが、サイト独自の部分を魅せられずリピーター化がうまくなされません。では、どうしたら良いでしょうか？

実は、この欠点を見事に改善して、

トレンドアフィリエイトを攻略する方法があります。

それが、レスポンシブウェブデザイン対応の賢威 6.1 を利用したトレンドサイト運営です。

(7)

賢威 6.1 はレスポンシブウェブデザインに対応

さて、ここでレスポンシブウェブデザインという聞きなれない言葉が出てきました。まずはここから解説していきましょう。レスポンシブウェブデザインを採用していないサイトは先ほどもお話をしたように、プラグインを使うなどして PC 用、スマホ用閲覧者に向けて最適化していかないといけないです。しかし、レスポンシブウェブデザイン採用テンプレートを使ったサイトであればプラグインを使わなくとも閲覧者のブラウザ横幅サイズを基準にして、適切な表示をなしてくれるのです。このレスポンシブウェブデザインのメリットには何があるのかをさらっとまとめてみました！！

メリット１一括管理によりメンテナンスが楽！

例えば、Wptouch を使ったことがあればわかるかと思いますが Wptouch のバージョンアップの度に、php の修正を行わないとスマホ表示の際にアドセンス広告が反映されていないという事態が起こりました。このように、PC 用とスマホ用と別々の方法で最適化しているために、サイトのデザインや広告を修正する際には、両方の設定を変更していかないといけないのです。それに対して、

レスポンシブウェブデザインであれば

PC 用とスマホ用の表示はどちらも同じ方法で最適化していますから

修正が非常に楽なのです。

(8)

メリット２ Google が推奨

！

サイト運営者にとって味方に付けたい

Google は、このレスポンシブウェブデザインを推奨

しています。理由は以下のとおりです。  PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、（中略）Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。  ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。というわけで、実際にレスポンシブウェブデザインを搭載した賢威 6.１でトレンドサイトを作成してみましょう。

(9)

賢威 6.1 でトレンドサイトを運営する

では、実際にレスポンシブウェブデザインを搭載した賢威 6.1 でトレンドサイトを運営してみましょう。一応ですが、基礎から解説をしていきます。

トレンドサイト運営事前準備

１．テンプレートのインストールまずはテンプレートのインストールから → http://yakugakusuikun.com/6201.html ２．その他の基本設定その他のタイトル、ディスクリプション、メタキーワード設定、そしてプラグインの導入などは MBA にて配布されたトレンド・サイトアフィリエイト資料で設定をしてみてください。 → http://xy1-suikun.com/mba2/mba03.pdf （パスワードは MBA 通信にてお知らせしたのでそちらを御覧ください。）３．賢威 6.1 のカスタマイズサイトへ賢威 6.1 を導入したら、次はこの資料を参考にカスタマイズしていきましょう。 → http://xy1-suikun.com/report/keni6kiso.pdf そして、以上の操作を完了しましたら実際にレスポンシブウェブデザインを導入します。４．レスポンシブウェブデザイン導入のチェック賢威 6.1 であれば、標準で導入されていますがこちらの方法でしっかりと導入されているかを確認してみてください。

(10)

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

(11)

レスポンシブウェブデザイン搭載サイトをスマホで見ると・・・

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

(12)

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

(13)

作成者情報 http://yakugakusuikun.com/ 13 「サブコンテンツ」「サイドバー」のように並んでいました。この部分のサイドバーをクリックするとようやくサイドバーの中身が表示されていきます。このように、スマホユーザーにとってクリックしないと表示されないということは目につくのはコンテンツ部分（本文）のみであり、サイドバーが目に触れる可能性がほとんどないということです。この事から、

サイドバーにアドセンス広告を仕込んでおいても

もちろん、サブコンテンツ部分にアドセンス広告を仕込んでおいても

意味が無い

ということがわかります。

(14)

作成者情報 http://yakugakusuikun.com/ 14 ですから、

アドセンス広告を仕込むのであれば

必ず記事上、本文中、記事下の３箇所に仕込むのが

最もクリック率が高く

なります。そして、更に下の方にスクロールしていくと・・・フッター部分が表示されています。この部分は標準でそのまま表示されています。そして、そこから更に下に行くと、一番上に表示されているトップメニューの部分が表示されています。ここらで以上の事をまとめてみましょう。

(15)

作成者情報 http://yakugakusuikun.com/ 15 PC で見た際の次の①～⑦の部分はスマホでは次のように配列されます。 ① トップメニュー ② ヘッダー ③ グローバルナビ ④ コンテンツ（本文） ⑤ サブコンテンツ ⑥ サイドバー ⑦ フッター PC の場合

(16)

スマホの場合

(17)

では、最適なアドセンス広告配置は？

さて、先ほどまでわかったことから、実際にどういった広告配置を利用していけばいいのか考えて行きましょう。まずは

ダメな例

からです！！！！

これまでの方法でレスポンシブウェブデザイン搭載サイトに

広告を貼ると失敗

します。一応ですが、失敗例を見ておいてください。

(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 での閲覧（広告を付けたばかりなのでまだ非表示状態です。）

(20)

【賢威 6.1 へのアドセンス広告記事中設置】

プラグインで Master Post Advert を導入しましょう。

参考はこちらの資料の 53P 辺り http://xy1-suikun.com/mba2/mba03.pdf

（パスワードは MBA 通信にて配信されています。）

そうすると、MORE タグの次に表示されます。PC での閲覧（広告を付けたばかりなので広告は非表示状態です。）

(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 での閲覧（広告を付けたばかりなのでまだ非表示状態です。）

(22)

作成者情報 http://yakugakusuikun.com/ 22 さて、この状態でスマホ表示してみるとどう表示されるでしょうか？ちょっと見てみましょう。そうすると、このように

枠線をはみだして

表示されていました。もちろん、細かいところを気にしないのであればこの表示でも OK です。 PC でもしっかりと表示されていますしスマホでもそこまで気にするほどの状態ではありません。ただ、ちょっと気になる・・・というのであれば、次の方法を試してみてください。

(23)

広告導入成功例レスポンシブ広告ユニットを作成しよう

レスポンシブウェブデザイン対応サイトでは

レスポンシブ広告ユニットを作成する必要

があります。それでは、やり方を解説しましょう。

１．広告コードの生成

通常通りに広告を生成するのですが広告サイズの部分でレスポンシブ広告ユニット（ベータ版）を選択します。そして、保存してコードを取得します。

(24)

２．生成したコードの最適化

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

次の方法で最適化をしましょう。

(25)

生成されたコード <style>

.my_adslot { width: 320px; height: 50px; }

@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } } @media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } } </style>

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

そうして、サイトに貼り付けていきましょう。貼り付け箇所は以下の部分です。

(26)

最適化されたコード

単一記事への広告導入

【賢威 6.1 へのアドセンス広告記事上設置方法】管理画面→外観→テーマ編集→single.php の以下の部分に太文字部分を挿入  <div id="main-and-sub">  <div id="main-contents"> <center>Sponsored Link</br> アドセンス広告コード </center> <?php if (have_posts()) : ?>

(27)

【賢威 6.1 へのアドセンス広告記事中設置方法】プラグインで Master Post Advert を導入しましょう。

参考はこちらの資料の 53P 辺り http://xy1-suikun.com/mba2/mba03.pdf

(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 } ?>

(29)

さて、以上の操作を終えるとどのように表示されているかみてみましょう。

PC からの表示レクタングル大と同じ表示に

(30)

作成者情報 http://yakugakusuikun.com/ 30 このように設定をすると、非常にきれいに表示がなされて

Wptouch によりアドセンス広告を設置するよりも

はるかに良いサイト表示が出来ます。

これだけきれいに表示がなされるのでトレンドサイトでアドセンス攻略するのであればレスポンシブウェブデザイン搭載されたテンプレートが必須とも言えるくらい素晴らしいです。さて、最後に、単一記事だけではなくて、トップページにも広告を貼っていきましょう。

(31)

最適化された広告コード

トップページへの導入

これで最終仕上げです。先ほどと同様に最適化された以下のコードをトップページにも導入していきます。 <style>

導入方法は

(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 表示スマホ表示

(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 表示スマホ表示

(34)

【コンテンツとフッターの間】

<?php endif ?> </div>  <center>Sponsored Link</br> 最適化されたコード </center> </div>  <?php get_footer(); ?> PC 表示スマホ表示

(35)

作成者情報 http://yakugakusuikun.com/ 35 以上の方法で広告を導入するとアドセンス広告のクリック率を最大限まで高めてくれます。これにより、Wptouch を導入するよりもはるかに素晴らしい結果が出せるようになるでしょう。