こんにちは!めいこです。
いよいよ、ブログアフィリエイトで必要なHTMLタグを紹介していきます。
これまでHTMLのことや基本的なルールなどをお伝えしたので
前回までの内容を読んでくれていると覚えやすいと思います。
<HTML講座関連記事>
第1回目:HTMLって何?~アフィリエイトに必要なHTML講座1~
第2回目:HTMLを覚える理由~アフィリエイトに必要なHTML講座2~
第3回目:HTMLの基本的な形~アフィリエイトに必要なHTML講座3~
それではさっそくいってみましょう!
HTMLタグは必要最低限のものだけを覚えよう
ブログやサイトはHTMLタグによって構成されています。
HTML講座の1回目でお見せしたややこしいこんなやつ↓
こんなに長くて、数も多いし覚えられないって思うかもしれませんが
ブログアフィリエイトでよく使う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タグを紹介します。
引き続きお付き合いくださいね。
めいこ様 おはようございす。
いつもお世話になっています。
HTMLもこれくらい覚えておけば
大抵のことは間に合うと思います。
後は必要に応じて調べながら
加えていくようにすれば良いと思います。
大変参考になりました。
今後とも宜しくお願いします。
Toshikinuyo
Toshikinuyoさん、こんにちは
そうですね。
ブログアフィリエイトをするなら
特別複雑なものはあまり必要ないかなと思うので
最低限のものだけお伝えしようと思っています。
コメントと応援ありがとうございます。
めいこさん、こんにちは。
智直です。
いつもありがとうございます。
ワードプレスやブログの更新であれば、
これだけで十分ですよね。
HTMLも覚えてしまえば便利ですからね。
カスタマイズの自由度も上がりますしね。
次の記事も楽しみにしています。
応援しておきました。
智直さん、こんにちは。
そうですね。
ひとまず、ブログの更新なら
これだけでいいです。
ブログの簡単なカスタマイズにも役立ちます。
残り2回HTML講座があるので
また楽しみにしててください^^
コメントと応援ありがとうございます。
めいこ様
いつもお世話になっております。
ルナクスです。
今日のめいこ様のブログはとても
役立ちました。
お気に入りに登録して、今後
私のブログでも導入できればと
思います。
とても分かり易い説明感謝です。
応援押しておきますね。ポチ☆
これからも宜しくお願い申し上げます。
ルナクスさん、こんにちは。
ありがとうございます!
お気に入りまで登録してくれて嬉しいです!
あと2回HTML講座をやるので
よりわかりやすい内容を最後までお届けできるように頑張ります。
応援とコメントありがとうございます。
めいこさん、こんばんは♪
今回のタグの記事もとてもお役立ちですね!
いつも丁寧な情報をありがとうございます。
タグの一覧表を使っていますが、
こうして解説していただくと
あ!そういうことだったのかと思います(笑)
まだまだ勉強です~( ;∀;)
応援させていただきました♪
またお邪魔いたします( ^^)
むつきさん、こんにちは。
タグの一覧表ってあるんですね!
便利そうです^^
参考になってのであれば嬉しいです。
コメントと応援ありがとうございます。
めいこさん!
こんばんは、五平太です!
ブログへお越し下さり
コメントまでいただき
ありがとうございます^^
さけては通れないタグですが
さけていました・・
コピペでやってきていましたが
やっぱり
基本はわかっていないと
いけませんね!
基本をマスターしてこその
発展になりますから
いままでコピペで
さけてきた道を
回れ右して
さけて通らないようにしていきます!
すてきなきっかけを
ありがとうございます!
めいこさんとの
出会いに感謝です!
ありがとうございます!
応援完了です^^
五平太さん、こんにちは。
たしかに、今はネットを見れば
タグは出てきてコピペできますし、
ワードプレスでもボタンで出てくるものもありますが
ちゃんと意味が分かっていないと今後
ブログのカスタマイズがしたくなったときにわかんないってなるかなぁと思って
今回伝えてみました^^
私もこうしてブログを通じて出会えて
やりとりができること嬉しく思いますヽ(´▽`)/
コメントと応援ありがとうございます。
こんにちは。
メモなどで書いた文章をブログサイトに載せて編集しだすと改行幅が同じにならない。どうしてかわからなかったのですが、pとbrの違いでした。
ありがとうございます。
ちゅんしーままさん、こんにちは。
pタグとbrタグって使い分けが難しいですよね。
私も最初は思い通りに行間が空かなくて苦労しました^^;
コメントありがとうございます。