Font Awesome

当サイトは、アフィリエイト広告を含みます。私個人が利用して、おすすめしたいと思った商品を紹介しています。

WordPress

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

WordPress
この記事は約5分で読めます。

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

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

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

この記事を書いた人
ナナ

こんにちは、「ねこのライセンス」のサイトを運営しているナナです。

株式投資・資格の勉強・音楽観賞・断捨離・ネコ・ヒゲダンが好きな40代専業主婦です。

【私の資格・投資経歴】

【20代】投資家デビュー
    簿記3級取得

【30代】簿記2級取得

【40代】登録販売者取得
    FP3級・FP2級取得
    宅建取得
    簿記1級取得

何の取り柄もない専業主婦の私が、「自分に自信をつけたい!」という思いで資格の勉強やブログをしています。

私の学んだ知識が、ブログを通じてみなさんの役に立つとうれしいです。

そして、私の夢はいつかブログで稼げるようになること。

私は人見知りで人付き合いが苦手なので、外で働くのは正直怖いです。なので、自宅に居ながら好きなこと(ブログ)で稼げたらいいなと思っています。

詳しい私の自己紹介記事は、こちらのページにあります。

専業主婦限定の初心者向け断捨離・お金の無料相談は、こちらのページからお気軽にどうぞ。

お仕事のご依頼・お問い合わせは、こちらのページからお願いします。

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