2017年3月25日土曜日

アフィリエイトブログ初心者のHTML基礎知識

アフィリエイトブログ初心者のHTML基礎知識



ブログを使ったアフィリエイトは、簡単な副収入を手に入れる手段として、とても人気があります。


人気の理由は、パソコンやスマホの簡単な知識があればすぐにはじめられて、初期投資などのリスクが少ないこと、インターネットを利用できる環境があればどこでも出来る、趣味を生かせるなど、たくさんの取っつきやすいポイントがあるからだと考えられます。



実際に、一般の主婦の方がブログでアフィリエイトを始めたらいつの間にか高収入を得ていた、なんて話もよく耳にしますね。



多くの人が、パソコンやスマホを所持し、街の中や公共施設であってもインターネットがつながり、無料のWiFiが利用できる施設も急速に増えた現在、ブログを使ったアフィリエイトが、とても注目を集めているのも納得できる話です。



では、何故「ブログ」を使ったアフィリエイトが人気なのでしょうか。





アフィリエイトを「ブログ」でやるメリット


アフィリエイトで収入を得るには、もちろんブログだけではなく、自身で作成したホームページなどでも良いはずです。


しかし、これからアフィリエイトを始めるという人には、ブログを使ったアフィリエイトがとりわけ人気を集めているのです。


それはずばり、ホームページ作成に比べて、サイト作成が簡単だからでしょう。


ホームページを自力で作るとなると、HTML言語をはじめ、ファイルのアップロードの仕方や記事(ページ)の管理、メールフォームやコメント、掲示板などのアディショナルな部分も、全て自分でセッティングする必要があります。



それに比べブログなら、ブログサーバーの機能だけで、簡単にサイトを作成することが可能です。



最近の無料ブログのサービスは、充実しているところがかなり多く、ページのデザインは豊富なテンプレートから選べ、記事の作成はHTMLが分からなくとも、ワードに文章を書く感覚で作成出来る投稿画面のところが多く、記事にリンクを貼ることも、画像を挿入することも簡単なクリック操作のみで出来てしまうほど。


そのため、アフィリエイトサイトを作るのも簡単、広告を貼るのも簡単、というわけで多くの人が利用していると思われます。何を隠そう、このブログもその一つです。




HTMLを知っておくとブログ作成にも活躍!




まだHTMLを使ったサイト作成をしたことがない方、HTMLは本格的にホームページを作成する人が使えれば良い、なんて思っていませんか?


とても充実した編集機能の備わったブログサービスを利用していると、HTMLを使うことは非常に少ないかも知れません。



しかし、元々ブログの記事投稿ページに備わっている機能だけに頼るばかりでは、

思うように広告が貼れない!

広告コードが増えてきて訳が分からなくなった!

なんてこともあるかと思います。



そんな時、ほんの少しのHTMLの知識があるだけで、アフィリエイト用ブログの記事の作成が、簡単に、思うようにカスタマイズ出来るようになり、記事作成の作業も楽しくなります。


ブログでのアフィリエイトはなかなか続かない人も多くいらっしゃるようですが、やはり継続していくためには楽しみながら取り組むことが一番だと、実際にブログをやっていて感じました。


これから始めようと思っていらっしゃる方は、ぜひ、難しく考えるよりも楽しみながら、ブログの作成に取り組んでみて下さい。




ほんの少し知っておくだけで、記事作成に生かせる!HTMLの知識



 HTMLの基礎知識 

HTMLとはHyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ)のことで、HTMLで書かれた文章(HTMLソース)は、タグを使って記述します。


タグとは、< > で囲まれた半角英数字のもので、<HTML>のように記述します。


タグには、「開始タグ」と「終了タグ」があり、

 
 開始タグは< >で囲まれた<HTML>の形、

 終了タグは、</  > で囲まれた</HTML>の形 


のものを言います。



この開始タグと終了タグの間に内容となる部分を書いていくのです。

 <HTML>ここに内容を記述する</HTML> 




「ここらへんの話しはなんとなく分かってる、雰囲気はつかめる。」という方は、このまま続けて読んでいって下さい。


「ちょっと待って!なんのこっちゃ!?」という方は、先に過去の記事基本】HTMLとは【サクッと理解】をご覧ください。初心者向けに、HTMLについて簡単に説明しております。


関連記事:【基本】HTMLとは【サクッと理解】






それでは、いよいよアフィリエイトを始めるにあたって、広告を掲載するために必要な最低限の知識を抑えていきましょう。



以下、基本について2つと、応用が1つ、計3つの内容です。


  • 広告を掲載する方法[基本]      
  • 広告コードのタグについて       
  • 広告を掲載する方法[応用]       






1.広告を掲載する方法[基本]



アフィリエイトは、自分のサイトに広告を掲載し、それをブログを見にきてくれた人がクリックする、またはクリックしたリンク先で、商品の購入など、ある条件を満たすと、自分に報酬が入る仕組みです。




アフィリエイトをはじめるにあたって、まず、出来るようになる必要があるのが、自分のサイトに広告を貼ること


一般的な広告の貼り方は、まずASP(アフィリエイト・サービス・プロバイダ)という広告主とアフィリエイターの仲介業者となるサービスに登録するところから始まります。


登録後、「あなたのサイトに広告を掲載しても良いよ」という審査を通過すると、ASPから広告コードというものを取得できるようになるので、


そのコードを取得(HTMLのソースをコピー)し、それを自分のサイト内に貼り付ける(ペースト)という作業になります。




「コピー&ペーストで貼れるなら誰でも出来そうだし簡単!」と思われるかも知れません。


しかし、コピーして貼り付けるのは、半角英数字や記号で書かれた「HTMLソース」なので、

貼り付ける時も、ブログの記事投稿画面で、

"プレビュー状態で直接編集できるモード"ではなく、"HTML編集モード"の方で開き、

広告を貼り付けるべき場所を見つけ出し、広告コードをペーストする必要があります。



HTMLを使ったことが無い方は、まずここで一度戸惑うかも知れません。

つまり、ここでもHTMLの基礎知識が役に立つ、という事になります。





HTML編集画面に慣れよう!  


ブログの記事作成画面では、HTML編集モードにしていても、

<HTML></HTML>や<head></head>、

<body></body>といった、

ページの基本となるタグは記入しなくて良い場合がほとんどだと思います。


多くの場合、このようなページの基本となるタグは、ブログのテンプレートの方に記述されているはずです。


記事作成画面で編集するのは、

あなたのブログのテンプレートにある<body></body>間で、

「記事を表示させるのはここだよ!」と指定されている場所に表示される部分であり、

<HTML>から始まる、ページ全てのHTMLソースを記述しなくてはいけない訳ではありません。


<HTML>~から始まるHTMLソースに埋め込む一部分のパーツを作成しているイメージです。なんとなくイメージして頂けたでしょうか?




広告掲載手順   


実際に、ASPから広告コードを取得し、自分のサイトに掲載する手順です。

まだ、ASPに登録出来てない!まだ自分のサイトが完成していない、またはサイトを持っていない!という方は、急いで登録&作成してきましょう。


ASPに登録してからも、広告主から「あなたのサイトに広告を掲載しても良いよ」という承認を得るまでに、意外と時間がかかる場合があります。実際、広告によっては、申請から承認まで数日間かかることもありました。


自分のやる気が無くならないうちに登録、申請を済ませておいた方がベターです。





アフィリエイトサイトへの登録、申請、広告を掲載する自分のサイトの準備が整ったら、さっそく広告を掲載してみましょう。


まず、アフィリエイトサイトにログインし、各サイトの手順に従い広告コードというものを取得出来るページへといきます。


広告コードとはHTMLで記述された<a herf=  で始まる半角英数字のことです。



おそらく、アフィリエイトサイトではその広告コードを選択、右クリックでコピーが可能になっていると思うので、コピーしてください。


コピーした広告コードを、自分のサイトの広告を掲載したい記事をHTML編集モードで開き、表示させたい場所にペーストします。

以上です。




あとは、保存して、実際に広告を掲載したページを開いて確認してみて下さい。



リンク確認のための自分での広告クリックは禁止されているアフィリエイトサイトもありますので、クリックはしないようにしましょう。


また、その他にも色々な決まりごとがあったりするので、各自アフィリエイトサイトの規約をよく確認しておいて下さい。




と、ここまではコピー&ペーストしかない大変簡単な作業なのですが、初心者だときっと「HTMLソースの中のどこにペーストしていいかわからない!」状態だと思います。


プレビューモードで編集していた記事も、HTML編集モードでみると、自分の書いた文章意外にたくさんの半角英数字が出現していて、何処にどうペーストしていいか迷うと思います。


なので、そんな初心者におすすめの方法をご紹介します。


実際に、私が初めたばかりのころ取っていた方法です。今でも、たまにこの方法を取ります。



HTMLが分からなくても大丈夫!

【超かんたん広告掲載方法】   

①プレビュー編集モードで見ながら、記事の中で広告を掲載したい位置に、分かりやすい記号を適当にダーッと羅列しておく。記号はなんでも構いません。文字でも良いです。ただの目印なので、自分のわかりやすいもので結構です。
 
 例)○○○○○○○○
     ☆☆☆☆☆☆☆☆
     ああああああああ


②アフィリエイトサイトから広告コードをコピーする。

③編集している記事をHTML編集モードにする。

④複雑なHTMLソースの中から、先ほど記述した目印の記号の羅列を見つける。

⑤その記号群の中に、広告コードをペーストする。

  例)○○○○<~~~広告コード~~~>○○○○

⑥プレビュー編集モードに戻し、広告を挿入出来ていることを確認。
 広告の前後に記号の羅列が残っているので、いつも通り文字を消すように消す。

⑦広告掲載完了!




この方法を取れば、以下のような利点があります。


  • HTMLソースの中の広告を掲載したい場所が分かりやすい
  • 目印用の記号の中に広告コードを貼るので、周りにある必要なHTMLソースを誤って消してしまったり、改変してしまう恐れが少ない


HTML初心者のうちは、この方法が便利だと思います。是非、一度お試しください。






2.広告コードのタグについて



広告コードは、一般的に <a href="  から始まるHTMLタグで構成されています。

これはリンクを表示させるためのタグです。



広告コード意外でも、ブログやホームページなどでは多様されているタグです。


アフィリエイトの広告は、クリックすると広告主サイトへジャンプするリンクということです。



そして、そのリンク先で商品の購入、会員登録など、広告主の定めたある条件を満たすと、リンク元のアフィリエイターあなたのところへ報酬が入るという仕組み。


簡単でいて奥が深いこのアフィリエイトの仕組み。



広告コードで<a href="リンク先のURL"  ○○○ ○○○>のように、"リンク先のURL"のあとに、さらに属性が記述されていたりもします。
 


例えば、 target="_blank" などかよく使われていますが、これは「新しいウィンドウで開く」という指定をしている属性です。




また、広告コードの中に<a href=""></a>意外に<img src="アドレス…略  のようなタグが記述されているものが多いのてすが、これは画像を表示させるタグです。


リンクを表示させるタグ<a href="…略 と、画像を表示させるタグ<img src="アドレス…略 を組み合わせて、画像をクリックするとリンクするという広告が作られているのです。


画像をクリックでリンクするというタグは、自分でも作ることが可能で、ブログやホームページ作成では、広告掲載意外でも使い道の多いタグです。



クリックでリンクする画像のタグについては、関連記事で紹介しています。

関連記事:【リンクを貼る



自分のサイトのバナーなども、このタグで作ることが出来ますので、バナーを作りたいと思っている方は参考になさってください。



3.広告を掲載する方法[応用]



アフィリエイトの仕組み、広告の掲載方法、広告コードに使われているタグの意味について分かってきたら、そろそろHTMLの知識を使いながら、広告を掲載してみましょう。


と、言っても難しいものではありません。



そもそも、広告主が提供している広告コードは書き換えたり、書き加えたりすることが禁止されているものがほとんどです。


なので、広告コードに手を加えるのはやめておきましょう。




では、それ以外に何ができるのか?というと、次のようなことが出来ます。



  1. 広告の位置を指定する
  2. 表、枠の中に広告を配置する  
  3. 複数の広告を並べて表示する
  4. 広告の位置を揃える




1.広告の位置を指定する

広告をブログの記事内などに掲載する際に、そのまま貼り付けると左寄せで配置されますよね。


これを中央配置、右寄せ配置にしたい場合に使えるタグがあります。


それが、このタグです。


<div align="位置">広告コード</div>

 [位置]左寄せ:left、中央:center、右寄せ:right



「広告コード」のところに、位置の指定をしたい広告のコードをペーストします。



<div>タグについては、関連記事でも触れています。

関連記事:【style属性でデザインの指定】-div要素



広告だけではなく、画像や文字など、色々な対象に使えます。





2.表、枠の中に広告を配置する

広告をただ記事の中に挿入するだけではなく、表や枠などと組み合わせて効果的にアピール出来たら良いですよね。
例)


この黄色の枠はタグをつかって表示させています。

なんだかゴージャスな感じ?



このような表や枠は、<table>というタグを使用してつくります。


詳しくは、関連記事で紹介しています。

関連記事:【表をつくる】-tableタグ



表の作り方は、そちらを読んで頂ければ分かると思います。

とりあえずコピペで使いたい、という方は、以下にサンプルを掲載していますので、コピペして使ってください。

 【テーブルタグ [サンプル] コピペ用 タグ素材









3.複数の広告を並べて表示する


大きさの違うバナー広告を複数個並べて配置するときなど、思ったように整列してくれなかったりしませんか?


高さがちぐはぐで揃わなかったり、広告と広告の間に一定の間隔を空けたい…など。


そんな時も、HTMLタグを使って並べてみましょう。




これにも、<table>タグを使用します。

例)


 
<table>
<tr>
  <td>広告</td>
  <td>広告</td>
  <td>広告</td>
</tr>
</table>  



       ↓





表を作って、表のセルの中に広告を配置していくのですが、

もしかしたら環境によっては、表の枠線が表示される場合があるので、

気になる人は枠線無しの指定をすることをおすすめしす。

表の枠線を無しにするには、<table>タグにborder="0"、またはstyle="border-style:hidden"という属性で指定します。


 
 <table border="0">  または  <table style="border-style:hidden">  






4.広告の位置を揃える
広告の上下の高さを揃えるには、<table>タグ内の<td の後に、valign="位置"属性を使用して、位置をtop、middle、bottomで指定します。

例)
 <td valign="top">広告</td>


また、<table>を使用せずに広告を並べて高さを揃えたい場合には、

ブロック要素であるタグ<div valign="位置"></div>を使用し、

位置をtop、middle、bottomで指定することにより高さを揃えることが出来ます。


例1)
 
<table border="0">
<tr>
  <td valign="top">広告</td>
  <td valign="top">広告</td>
  <td valign="top">広告</td>
</tr>
</table>  



       ↓



上にそろえることが出来ます。






例2)
 
<table border="0">
<tr>
  <td valign="bottom">広告</td>
  <td valign="bottom">広告</td>
  <td valign="bottom">広告</td>
</tr>
</table> 



       ↓


下にそろえることが出来ます。




例3)
 
<table border="0">
<tr>
  <td valign="middle">広告</td>
  <td valign="middle">広告</td>
  <td valign="middle">広告</td>
</tr>
</table> 



       ↓


真ん中にも、そろえることが出来ます。





例4)
 
<table border="0">
<tr>
  <td valign="top">広告</td>
  <td valign="bottom">広告</td>
  <td valign="middle">広告</td>
</tr>
</table> 



       ↓


上にも中にも下にも、そろえることが出来ます。







HTMLの活用法は、たくさんある!


以上、簡単なHTMLタグを使った、アフィリエイト広告の貼り方でした。

慣れてきたら、もっといろんなことにHTMLを活用してみてください。