ブログを始めてアフィリエイト広告を貼るまでの調査検討
先日ブログを始めましたすわんきです。
今回はブログを始めてからやっとこととアフィリエイト広告について調査、検討した流れを紹介します。
アフィリエイトに関する間違いがあればご指摘頂ければと思います。
ブログ開設からやったこと
ブログ開設から以下のような事をまずやりました。
それぞれ個別にやったことを紹介していきます。
ブログのデザインの設定
ブログのデザインはまずテーマストアから人気順に見ていきました。
長くテーマストアを眺めましたが、やはり人気のデザインはレスポンシブに対応(PC画面サイズやスマフォでも同じように表示できる)していたり、細かなデザイン、広告の貼りやすさ等が良く考えられており、人気のものから選ぶほうが良いなと思いました。
今回はMinimal Greenを選択しました。
選定理由は「Googleの広告サイズに合わせた幅取りになっている」「 "利用中のブログ” を見る限り拡張性が高そう」「デフォルトの色が好み」です。色合い等はCSSが書ければ後々変更できますが、デフォルトが良いというのは手間が省けて良いなと思いました。
Minimal Green - テーマ ストア
柔らかさもあって素敵です。
SNSボタンの設定とサイドバーの固定
まずアフィリエイトブログを運営するにあたって、SNSのシェアボタンが必要だなと考えました。
SNSでシェアされる事による人の流入を狙うためです。
こういうやつです。
以下のブログ記事の内容を参考にさせて頂きました。
おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん
少しCSSを書き直し横に伸ばしています。
上記ブログの通り、「ダッシュボード -> 設定 ->詳細設定 -> head要素を追加」に以下を追加。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
その後デザイン編集で以下を「記事上」にのみ追加しています。
<style type="text/css"> .clearfix{zoom:1}.clearfix:after{content:"";display:block;clear:both;height:0;visibility:hidden}.sns_circle{position:relative;width:100px;height:35px;margin:0 3px;background-color:#999;float:left;list-style:none}.sns_circle span{position:absolute;font-size:30px;color:#FFF}.sns_circle.hatebu.sns_circle span{position:absolute;color:#FFF;padding:0 0 0 5px;font-size:30px}.sns_circle.facebook.sns_circle span,.sns_circle.twitter.sns_circle span{position:absolute;color:#FFF;padding:0 0 0 5px}.sns_circle.googleplus.sns_circle span{position:absolute;color:#FFF;font-size:27px;padding:2px 0 0 5px}.sns_circle.pocket.sns_circle span{position:absolute;font-size:28px;color:#FFF;padding:0 0 0 5px}.sns_circle a{position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-999px;color:#FFF}.sns_circle a:hover{background-color:#FFF;opacity:.5}ul.circle_group{width:550px;list-style:none;padding:0}.fa-hatena:before{content:"B!";font-family:Verdana;font-weight:700}.sns_circle.hatebu{background-color:#006fbb}.sns_circle.twitter{background-color:#00acec}.sns_circle.facebook{background-color:#265a96}.sns_circle.googleplus{background-color:#dd4b39}.sns_circle.pocket{background-color:#EE4256} </style> <ul class="circle_group clearfix"> <li class="sns_circle hatebu"><span><i class="fa fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple"></a></li> <li class="sns_circle twitter"><span><i class="fa fa-twitter"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li> <li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"></a></li> <li class="sns_circle googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"></a></li> <li class="sns_circle pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li> </ul>
記事の下のシェアボタンは、はてなブログのデフォルトのものを利用しています。
記事下も変更しても良かったですが、割と見慣れたデザインもブログ内にあったほうがシェアの障壁が下がると思い残しました。
右のサイドバーを固定するために以下を参考にしました。
【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法 - 明日こそ、定時
右のサイドバーの一番下に広告を設置し、スライドするのはどうかと考えてのことです。
これは上記記事内のコードをそのまま「フッタ」に設定する形で使わせて頂き簡単に設定しました。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(window).load(function() { var sideLast = $(".hatena-module").filter(":last"); var sideLastTop = sideLast.offset().top + 450; var sideLastWidth = sideLast.width(); var win = $(window); win.scroll(function(){ if(win.scrollTop() > sideLastTop) { sideLast.css("position",'fixed'); sideLast.css("top",'20px'); sideLast.css("width",sideLastWidth); }else{ sideLast.css("position",'relative'); };});}); </script>
アフィリエイトの方法の調査検討
いくつかアフィリエイトの方法の比較サイトを見て回りました。
アフィリエイトをブログではじめるには「広告型」と「商品紹介型」があるようです。
広告型は見ている人に合わせて表示される画像で、ブログに設置しておけばクリック数等に応じて報酬を得られる形。
商品紹介型はAmazonや楽天、Yahooといったショッピングサイトや特定の企業の商品をブログで紹介する事で紹介料を得る形。
基本的には広告型、商品紹介型どちらもやるのが定番のようです。
広告型では、どの紹介サイトや報酬比較を見てもダントツでGoogle Adsenseが良いとのことだったので迷わずGoogleへ申請を進めました。
オンライン ビジネス - ウェブサイトの収益化 | Google AdSense – Google
申請方法については以下のブログ記事が最も分かりやすかったです。
画像も丁寧ですぐに申請する事ができました。
【2017年更新】グーグルアドセンスの登録申請方法は？無料ブログは設定不可能？
以下の記事でも紹介されていますが、Googleは1ページに表示できる広告数に制限がなくなったため、Google一本で大丈夫かと思われます。
アドセンスで広告の数が3つ以上貼れるようになったので詳しい内容を紹介してみる - MUTANT
商品紹介としてはAmazonや楽天、Yahooがそれぞれアフィリエイトサービスをやっています。
ひとまずAmazonのアフィリエイトに申し込みました。理由としては他サービスが「楽天アソシエイトは報酬支払に楽天カードか楽天口座が必要である」事や「報酬が低い」といった事が理由です。
バナーという商品紹介のブログのパーツを作成する事ができ、それを広告型のようにブログに貼ることでアフィリエイトが始められます。
また、「商品紹介」といった内容の記事を書き、アフィリエイトリンクと呼ばれるリンクを貼る事でも報酬を得られます。
以下を参考にしながら申請を進めました。
Amazonアフィリエイトの登録から使い方まで | アフィリエイトで稼ぐ方法を全部話そうと思う
その他ASPと呼ばれる「特定企業の商品を特集する記事を買いて報酬をもらう」タイプの商品紹介の方法があります。
ASPサービスはいくつかありますが、最も報酬が良く、良い条件が多いとされる「A8.net」というサービスを選択しアカウントを作りました。
アフィリエイトのA8.net
これからしばらく記事を書きながら以下でアフィリエイトブログを進めていくことになります。
その他にやった細かな内容
Googleの広告を記事の中間にも表示できるよう以下のコードを追加した
【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
サイドバーの広告やフッタの広告をセンタリングするために以下のCSSを「デザインCSS」に追加
/*サイドバーの広告をセンタリング*/ .hatena-module-body{text-ailgn: center;} /*フッターの広告をセンタリング*/ #bottom-editarea{text-ailgn: center;}
デザインでサイドバーに出てくるコンテンツを変更
設定画面から画像を設定したり詳細設定を変更
