アフィリエイトでは、コンテンツの制作だけではなく、サイトの運営や改善も大切なポイントのひとつです。
折角上質なコンテンツを制作しても、流入が見込めなかったり、操作性やデザインが悪くてユーザーが離脱してしまったりするのでは意味がないですよね。
そこで今回は、アフィリエイト初心者が覚えておきたいHTMLタグをご紹介します。
より良いサイトを構築するために、ぜひ活用してください。
アフィリエイトでHTMLの知識は必要？
アフィリエイトでは、ブログやワードプレスを使用することが多く、それらを改変するためにHTMLの知識が必要なことがあります。
また、記事の装飾にHTMLを使用することもあります。
そのため、アフィリエイターは、HTMLを学ぶ方が多く、必ずしも必要とはいえませんがあったほうが便利です。
HTMLを覚えるメリットとは
HTMLを覚えることで、自分の好みにサイトをカスタマイズすることができます。
また、サイトデザインを差別化し、よりユーザーが使いやすく見やすいサイトにすることで、ユーザビリティをあげる効果も期待できます。
そしてトラブルが発生した際にも、迅速に対応することができるのもメリットのひとつです。
覚えると便利なHTMLタグ8選
初心者が覚えておきたいHTMLタグを8個ご紹介します。
見出し「h1～h6」
<h1>○○○</h1>大見出し
<h2>○○○</h2>中見出し
<h3>○○○</h3>小見出し
このように、数字が増えていくほど小さい見出しになります。
見出しタグの効果とは
見出しタグを適切に活用することで、以下のふたつのメリットがあります。
見出しごとに段落を分け文章を区切ることで、文の構成がはっきりとしページのユーザビリティを向上させることが可能です。
また、検索エンジンに対してコンテンツの構成を正確に伝えることができ、コンテンツのインデックスが適切に行われるためSEO効果を期待できます。
大見出し（h1）タグはひとつのコンテンツに１回だけ使う
h1タグはそのコンテンツの最も大切なテキストに対して使用するタグです。
つまり、ひとつのコンテンツに１回だけ使うもの。
記事のページであればタイトルに使用しましょう。
タイトル「title」
h1タグはそのコンテンツの最も大切なテキストに使うとご紹介しましたが、ここで気になるのがtitleタグです。
h1タグにタイトルを入力した場合、titleタグはどうすれば良いのでしょうか。
SEOの観点からみると、h1タグとtitleタグには、同じテキストを設定することが多くあります。
h1タグはページ上に表示されるもので、titleタグは検索結果に表示されるものです。
つまり、h1タグはサイト閲覧者に向けたもので、titleタグは検索結果やSNSなどのメディアを閲覧しているユーザーに向けたものなのです。
h1タグとtitleタグは完全に同一のものではなく、必要に応じて適切な記述をするようにs心がけましょう。
太字「strong」
強調した箇所を太字にするときに使用します。
他にもemやbそしてiなど、ほかの文章と区別するために使用されるタグがありますが、googleはタグによる区別をしないと上記の動画で公表しています。
strongタグは特に重要な箇所に使用し、ひとつのコンテンツ内で多くても数回の使用にとどめましょう。
また、見出しにあたるhタグには使用しません。
これは、hタグを使用したテキストは既に強調されており、過度に使用するとスパムの認定を受けてしまうことがあるからです。
改行「br」
<br>
文章を改行する際に使うタグです。
他のタグのように、開始と終わりを指定する必要がなく単独で使用します。
例）
今日は、天気が良いので久しぶりに外出しました。<br />
駅まで歩いただけで息があがってしまい、運動不足を痛感しました。<br />
段落「p」
<p>○○○</p>
文章を段落で区切りたい際に使用するタグです。
例）
<p>
今日は、天気がいいので久しぶりに外出しました。<br />
駅まで歩いただけで息があがってしまい、運動不足を痛感しました。<br />
</p>
フォントの設定を行う「font」
<font 属性=”値”>～</font>
上記の属性にサイズや色、値に数値などを入力することでフォントを変更することができます。
size
<font size=”値”>～</font>
フォントのサイズを１～７の値で設定することで、フォントの大きさを変えることができます。
color
<font color=”色”>～</font>
フォントの色を指定するために使用するタグです。
リンク「a href」
<a href=”http://××.com/”>○○○</a>
リンクを貼る際に使用するタグです。
○○○の部分にリンクを貼りたいテキストを記入して、””の間にURLを挿入します。
遷移先「target」
リンクタグとあわせて活用したいのが「target」タグです。
<a href=”http://××.com/” target=”right”>○○○</a>
target=のあとにフレーム名を指定することで、フレームにページを表示させることができます。
この際、<FRAME>タグにname属性を指定しあらかじめ名前を付けておく必要がありますので注意しましょう。
<a href=”http://××.com/” target=”_top”>○○○</a>
target=のあとに_topを入力することで、フレーム表示を解除しウインドウ全体がリンク先のページ表示になります。
<a href=”http://××.com/” target=”_blank”>○○○</a>
target=のあとに_blankを入力することで、新しいウインドウを開いてリンク先が表示されるようになります。
<a href=”http://××.com/” target=”_self”>○○○</a>
target=のあとに_selfを入力することで、リンクが記述してあるフレームにリンク先のページが表示されるようになります。
<a href=”http://××.com/” target=”_parent”>○○○</a>
target=のあとに_parentを入力することで、<frameset>で定義をしたウインドウにリンク先のページが表示されるようになります。
テーブル設定「table」
<table 属性>
テーブルの枠線を設定することができます。
外枠のサイズを指定する「border」
<table border=”数値”>
数値を入力することで外枠線の幅を指定することができます。
外枠の色を指定する「bordercolor」
<table bordercolor=”色”>
色を入力することで外枠線の色を指定することができます。
この際、枠線の幅が「1」以上ないと色が変わらないので注意しましょう。
画像「img」
<img src=”△△△.jpg”>
画像を設定したいときに使用します。
引用「blockquote」
<blockquote>
引用文
サイト名
</blockquote>
文章を引用したいときに使用します。
WEB上から文章を引用した際には、引用文の下部に引用元のサイト名やURLを記載して出所を明示しましょう。
引用元は公的機関や自治体などの一次情報など、信頼性の高い情報になるように、また著作権上で認められている「引用の範囲」になるように心がけましょう。
引用の範囲とは
引用には、報道、批評、研究その他の目的に照らして、対象となった著作物を引用する必然性があり、引用の範囲にも合理性や必然性があることが必要で、必要最低限の範囲を超えて引用することは認められません。また、通常は質的にも量的にも、引用先が「主」、引用部分が「従」という主従の関係にあるという条件を満たしていなければいけないとされています。
引用は著作権法第32条によって定められています。
著作物の引用は法的に認められていますが、本文と引用部分が分かるだけではなく、書き換えや改変を行わないこと、出所を明示することも大切なポイントです。
また、全てを引用するのではなく、あくまで引用文が従であり、そのほかのコンテンツが主になるように心がけましょう。
独学でHTMLを学べる学習サイト3選
独学でHTMLを学びたいと考えている方のために、初心者でも勉強に取り組みやすい学習サイトを3つご紹介します。
ドットインストール
「3分動画でマスターする初心者向けプログラミング学習サイト」というキャッチコピーを掲げたドットインストール。
プログラミングに特化したレッスン動画の提供を行っており、2017年9月18日現在、「318レッスンを4,714 本の3分動画」で提供しています。
ワードプレスやHTMLなど、アフィリエイターに必要な講座が多くあるだけではなく、PHPやCSSなど初心者から中級・上級を目指す際に学びたいレッスンを提供しているのも魅力のひとつです。
・費用：月額980円
・ジャンル：プログラミング
・公式サイト：http://dotinstall.com/
Schoo
プログラミングだけではなく、Webデザインやビジネススキルなど、多彩なレッスンを受けることが出来るオンライン動画学習サービスです。
ユーザー参加型の生放送授業もあり、分からないことはその場で質問することも可能です。
見逃した授業は録画で学ぶことができ、24時間いつでも好きな時に好きな講座を受けられます。
プログラミングだけではなく、ビジネスやデザインそしてマーケティングに英語など、多彩な講座を提供しています。
講座は1コマ45分～1時間半程度で、集中して勉強したい方にピッタリです。
・費用：生放送授業の参加は無料
全ての授業が受けられるプレミアムプランは月額980円（税込）
より効率的に学べるようになるプレミアムプラスプランは月額 ¥1,980 (税込)
・ジャンル：ITスキルが中心
・公式サイト：https://schoo.jp/guest
Progate
オンラインプログラミング学習サービスで、イラストを中心としたスライドで学んだり、プログラムを書いて学んだりすることができます。
「初心者でも、独学できるレッスンを」をキャッチコピーに掲げており、実践的でわかりやすいレッスンが特徴です。
2017年9月18日現在、「全12コース58レッスン」を提供しており、HTML&CSSやJavaScript、PHPなどのコースがあります。
無料ではじめられるので、勉強を継続することができるか不安をお持ちの方にオススメです。
・費用：基礎レベル15講座の受講は無料
月額980円（税込）で全58レッスンを全て学習できるようになります
・ジャンル：プログラミング
・公式サイト：https://prog-8.com/
まとめ
アフィリエイト初心者の方が覚えておきたいHTMLタグと、独学でHTMLを学べる学習サイトをご紹介しました。
質の高いコンテンツの制作だけではなく、サイトの改善はアフィリエイターにとって、重要なポイントのひとつといえます。
HTML勉強をしたいけれども、どこから手を付けていいか分からない方は、学習サイトを活用して勉強をはじめてみてはいかがでしょうか。
初心者から上級者まで、ステップアップに対応できる学習サイトばかりですので、スキルを磨くのがオススメです！
文章構成の関係でタグの順番を入れ替えてあります
コメントを追加しました
ゴールが書かれていなかったので方向性が違ったら修正いたしますのでお声がけくださいませ
