こんにちは!めいこです。

いよいよ、ブログアフィリエイトで必要なHTMLタグを紹介していきます。

これまでHTMLのことや基本的なルールなどをお伝えしたので

前回までの内容を読んでくれていると覚えやすいと思います。

<HTML講座関連記事>

第1回目:HTMLって何?~アフィリエイトに必要なHTML講座1~

第2回目:HTMLを覚える理由~アフィリエイトに必要なHTML講座2~

第3回目:HTMLの基本的な形~アフィリエイトに必要なHTML講座3~

それではさっそくいってみましょう!

HTMLタグは必要最低限のものだけを覚えよう

ブログやサイトはHTMLタグによって構成されています。
HTML講座の1回目でお見せしたややこしいこんなやつ↓

HTMLって何?

こんなに長くて、数も多いし覚えられないって思うかもしれませんが
ブログアフィリエイトでよく使うHTMLタグは決まっています。

HTMLタグが長くなっているのは
複数のHTMLタグが組み合わさっているだけで
使っているタグ一つ一つはたいてい決まっています。

そこまで多くないので1つずつ見ていきましょう。
先に、紹介するHTMLタグを並べますね。

<HTMLタグ一覧>

  • <h1>テスト</h1>
    (<h1>から<h6>まである)
  • <strong>テスト</strong>
  • <span style=”background-color: #ffff00;”>テスト</span>
  • <span style=”color: #800000;”>テスト</span>
  • <span style=”font-size: 16px;”>テスト</span>
  • <p>段落</p>
  • テスト<br />
  • <a href=”https://free-lifebusiness225.com/” target=”_blank”>リンク</a>

1個ずつ意味を説明していくので見ていきましょう。

<h1>見出しタグ</h1>

これは見出しタグです。

文字を<h1></h1>タグで挟むと
挟まれた文字は見出しとして認識されます。

ワードプレスではここに見出しタグのボタンがあります。↓ワードプレス見出しタグ

見出しタグは6種類あって、タグも
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
とあります。
ワードプレスでは記事更新の上に
見出しタグを表記されるボタンがあるので
好きなのを選択すると6つの見出しが出てきます。

これを使うとこのように表示されます。↓

見出しタグ

見出しのデザインはお使いのテンプレートによって少し変わります。

めいこは賢威のヘルシー版というテンプレートを使っています。

<span style=”background-color: #ffff00;”>マーカータグ</span>

これは文字の後ろに色をつけるタグです。
使っているとまるで文字にマーカーを引いたように
見えることからマーカータグなんて呼ばれることもあります。
こういうやつです。↓

マーカータグ

めいこは黄色を使うことが多いですが
このマーカーの色は変えることもできます。

色を変えたい場合は

background-color: #ffff00;

の部分の

#ffff00

を変えたらOKです。

これはパソコンに色を認識させるための文字です。

例えば、赤いマーカーを使いたい場合は

background-color: #ff0000;

というようになります。

実際のタグは

<p><span style=”background-color: #ff0000;”>マーカータグ</span></p>

となりネット上の表示は

マーカータグ

のようになります。

記事を書いてて強調させたいことや
気持ちを表現するときに使うことが多いです。

<span style=”color: #800000;”>文字色変える</span>

これは文字に色をつけたいときに使うタグです。
例えばこういうの。↓

文字の色変える

文字が赤い色に変わっていますよね。
これも記事の中で強調させたいことを書くときに使います。

赤文字だとブログを読んでいる人の目を惹きますね。

マーカータグ同様、文字の色も変えることができます。

color: #800000;

の部分の

#800000

が色を表す文字なのでこれを変えることで
文字の色を変えることができます。

<p><span style=”color: #ff6600;”>文字の色変える</span></p>

とすれば

文字の色変える

のように先ほどの赤文字からオレンジ色に文字を変えることができます。

ちなみに色を示す文字は、色ごとにたくさんあるので
下記のサイトを参考にしてみてください。

色の見本とカラーコードがひと目でわかるWEB色見本『原色大辞典』

<span style=”font-size: 16px;”>文字の大きさ変える</span>

これは文字を大きくするコードです。
文字を大きくしたい時は

<span style=”font-size: 20px;”>文字の大きさ変える</span>

とするとこうなります。↓

文字の大きさ変える

という感じに文字を大きくすることができます。

文字の大きさを変えるには

font-size: 16px;

の部分の

16px

この数字を変えることで文字の大きさを変えることができます。

<p>段落</p>

これは、段落分けするタグです。
ワードプレスでブログの記事を作成していると
このタグは自動的に入っています。↓

タグ

赤い四角で囲っているやつが<p>タグです。

パソコンのエンターキーを押して改行すると
空白の行が空いていることがありますがこれは
<p>タグが自動的に段落分けをしてくれているためです。

これは文章を入力する上で楽なんですが
場合によっては空白の行をあけずに改行をしたい時もありますよね。

そんな時は次に紹介するタグを使ってみましょう。

改行タグ<br />

空白を開けずに改行するときは
タグを使います。 実際のタグ表示はこんな感じです。↓

<p>テストテストテスト テストテストテスト</p>
<p>テストテストテスト テストテストテスト テストテストテスト <br />
テストテストテスト テストテストテスト テストテストテスト <br />
テストテストテスト テストテストテスト テストテストテストテスト。</p>
テストテストテスト テストテストテスト<br />
テストテストテスト テストテストテストテスト<br />
テストテストテスト テストテストテストテストテスト<br />

タグとの変化がわかるように一緒に使ってみました。 これがネットで表示されるとこうなります。↓

テストテストテスト テストテストテスト

テストテストテスト テストテストテスト テストテストテスト
テストテストテスト テストテストテスト テストテストテスト
テストテストテスト テストテストテスト テストテストテストテスト。

テストテストテスト テストテストテスト
テストテストテスト テストテストテストテスト
テストテストテスト テストテストテストテストテスト

1行目のタグと2行目との間は
空白が1行分空いていますが
改行タグを入れた2行目と3行目は
空白が空かずに改行がされていますね。

このように
同じ改行でも行を空けるか
空けないかという使い分けをすることができます。

文章は続いているけど、横に長くなりすぎると
読みくくなるので改行をしたほうがいいです。

ただ、改行する文章の内容が
続いているものであれば
行の空白を開けないで改行をしましょう。

あと、お気づきの方もいるかもしれませんが
この改行タグの場合は</br>が正しい形です。

本来のHTMLタグの形は<></>だと言いましたが
改行タグは</br>一つだけで機能する
特殊なタグなのでこれが正しい形となります。

<a href=”【URL】” target=”_blank”>リンク</a>

これは、文字にURLのリンクを載せるタグです。

文字をクリックすると別のページが表示される場合がありますが
それはこの<a href~>タグを使用しています。 a href=”【URL】” 

この部分に飛ばしたいページのURLを載せます。
ネットではこのように表示されます。↓

ここ押すとめいこのブログへ飛びます。
青い色で下線が入った文字になりますね。
これは文字にリンクが載ってあるのでクリックすると
リンク先のページに飛びます。
(今回は例として、めいこのブログページのURLを載せています。) どれもよく使うタグなので覚えておいてください。
あまり難しく考えずに

「あ、このタグは文字が大きくなるんだぁ~」

ぐらいに思っておいてくれたらいいです。

次回も引き続き
よく使うHTMLタグを紹介します。
引き続きお付き合いくださいね。

テントウムシライン

170

最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら 下のランキングバナーを一回押していただけますと嬉しいです。 みなさんのひとポチが励みになります!

にほんブログ村 小遣いブログ アフィリエイトへ

外注化×アドセンスメルマガやっています。無料プレゼント実施中!!

めいこおすすめアドセンス外注化の教科書