HTMLタグは、ブログを書いている人なら、日ごろから使う機会が多いですよね。
初心者向けのものから、上級者向けまで、HTMLタグはたくさんの種類があります。
今回は、ブログ初心者向けに、覚えておくと便利な、よく使うHTMLタグを厳選して、7つ紹介したいと思います。
覚えておくと便利なよく使うHTMLタグ一覧
難しいHTMLタグは一切なしで、ブログ初心者の私が、普段から利用する機会の多いものを選びました。
簡単なものばかりなので、使いたいHTMLタグがあれば利用してみて下さい。
ブログに文字のリンクを貼りたいとき
ブログの文章に、文字のリンクを貼りたいときがありますよね。
そういうときは、以下のタグを入力すれば、文字のリンクになります。
リンク先のURLには、アドレスをhttp://～そのまま入力して、アンカーテキストには、リンクの文字を入力します。
<a href="リンク先のURL">アンカーテキスト</a>たとえば、わたしのブログ(ねこのライセンスhttps://nekolicense.com/)のアドレスのリンクを貼りたいときは、こんな風に入力します。
<a href="https://nekolicense.com/">ねこのライセンス</a>
文字のリンクになりましたね。
文章を改行する
文章を改行したい場合は、<br>を入力します。
文字を入力<br>改行される改行される
文字が改行されましたね。
画像や文字を好きな位置に表示する
文字や画像を好きな位置に表示するには、左の場合はleft、中央の場合はcenter、右の場合はright、と入力します。
文字の場合は、文字を入力、画像や広告の場合は、アドレスを入力します。
アフィリエイトのバナーを貼ると、初期のままだと左寄せで表示されますよね。
アフィリエイトの広告を貼るとき、いつも左寄せで表示されるけど、中央に表示するにはどうすればいいの？
アフィリエイトの広告のコードを、<center>と</center>で挟むだけですよ。
アフィリエイトのリンクURLを、<center>コードで挟めば、広告が中央に表示されます。
中央寄せ
2種類表示してますが、どちらで入力しても中央に表示されますよ。
①<center>文字・画像又はアフィリエイトリンクURL</center>
②<div align="center">文字・画像又はアフィリエイトリンクURL</div>たとえば”文字”という言葉を、中央寄せする場合は、以下のように入力します。
<center>文字</center>文字という言葉が、中央寄せになりましたね。
もう一つの方法だとこんな感じです。
<div align="center">文字</div>左寄せ
<div align="left">文字</div>”文字”という言葉を左寄せする場合は、以下のように入力します。
<div align="left">文字</div>右寄せ
<div align="right">文字を入力又はリンクURL</div>”文字”という言葉を右寄せする場合は、以下のように入力します。
<div align="right">文字</div>見出し
見出しを入力するには、<h1～6>と</h1～6>のタグで、見出しをはさみます。
h1が一番大きい見出しで、数値が大きくなるほど、見出しが小さくなります。
文字の大きさも見出しとともに、徐々に小さくなっていきます。
ワードプレスでCocoonを利用している人は、見出しを設定すると自動で目次が表示されます。
1番大きい見出し <h1>見出し</h1>
2番目に大きい見出し <h2>見出し</h2>
3番目に大きい見出し <h3>見出し</h3>
4番目に大きい見出し <h4>見出し</h4>
5番目に大きい見出し <h5>見出し</h5>
6番目に大きい見出し <h6>見出し</h6>文字の大きさを変える
<font size="3">文字を入力</font>font size の後ろの数字を大きくするにつれて、文字が大きくなります。
たとえば、”文字”という言葉の大きさを6にする場合は、以下のように入力します。
<font size="6">文字</font>文字が大きくなりましたね。
逆に小さくしたい場合は、こんな感じです。
<font size="1">文字</font>文字が小さくなりましたね。
文字の色を変える
文字の色を変えたい場合は、”色を入力”の部分に、赤ならred、青ならblue、ピンクならpinkなど、色を英語で入力します。
<font color="色を入力">文字を入力</font>例えば”文字”という言葉を、”ピンク色”にしたいときは、以下のように入力します。
<font color="pink">文字</font>”文字”という言葉がピンク色になりましたね。
文字を太字にする
文字を太字にしたい場合は、bタグで挟みます。
<b>文字を入力</b>たとえば、”文字”という言葉を太字にしたい場合は、以下のように入力します。
<b>文字</b>文字が太字になりましたね。
まとめ
今回は、よく使う覚えておくと便利なHTMLタグを紹介しました。
ブログの文章を書くときにタグを覚えておくと、調べなくてもすぐに入力出来て便利です。
かんたんなので、ぜひ試してみてくださいね。
