Font Awesome
WordPress

ブログ初心者向け!覚えておくと便利なよく使うHTMLタグ7選

WordPress
この記事は約5分で読めます。
記事を書いた人
プロフィールナナ
ねこ好きの40代専業主婦
【保有資格】FP2級、簿記2級、宅建、登録販売者
簿記1級勉強中!

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タグを紹介しました。

ブログの文章を書くときにタグを覚えておくと、調べなくてもすぐに入力出来て便利です。

かんたんなので、ぜひ試してみてくださいね。

この記事を書いた人
ナナ

このサイトを運営しているナナです。

ねこ・株式投資・節約・資格取得・音楽鑑賞・断捨離が好きです。
何でもやりたいことはやってみる!
というチャレンジ精神でブログを始めました。

1度きりの人生楽しまなきゃ損!がモットーです。

お問い合わせやご意見はこちらからお願いします。

ナナをフォローする
ナナをフォローする
ねこのライセンス
error:Content is protected !!
タイトルとURLをコピーしました