【ブログ初心者向け】htmlの文字編集タグが便利

ブログの運営をされている方に知っておいてもらいたい、簡単に文字の形式を変更できる便利なhtmlタグをいくつか紹介したいと思います。

「htmlタグ」って何?難しそう。と思う方もいらっしゃると思いますが、簡単なので安心してください。
下はワードプレスの記事入力欄です。
入力欄の上にある「B(太字)」とか「I(斜体)」はボタン1つでhtmlタグを挿入できる機能になります。

下はワードプレスの記事入力欄です。
入力欄の上にある「B(太字)」とか「I(斜体)」はボタン1つでhtmlタグを挿入できる機能になります。

これが文字形式を変更できるhtmlタグの一種です。
ボタンになっていないだけで他にも便利なhtmlタグがたくさんありますので、ご紹介いたします。

htmlタグの使い方

htmlタグの使い方をワードプレスを例に2パターン紹介します。

1.「カスタムhtml」ブロック内に記述する

記事中にhtmlコードを記述できるブロック「カスタムhtml」を追加し、その中に記述すると「html」として記述することができます。

1つ目は記事入力で使用する「段落」とか「見出し」とかのブロックを使います。

普通の文章と同じように「段落」ブロックにhtmlタグを記述しても、ただの文章として入力されてしまいます。
記事中にhtmlコードを記述できるブロック「カスタムhtml」を追加し、その中に記述すると「html」として記述することができます。

2.入力モードを「コードエディター」に切り替え

ワードプレスではデフォルトの入力モードが「ビジュアルエディター」になっています。
このままではタグ編集ができませんので、これを「コードエディター」に切り替えるとhtmlとして記述することができます。

エディター欄がデフォルトだと「ビジュアルエディター」になっていますので、タグを編集したい時だけ「コードエディター」に切り替えます。

ワードプレス以外の他のブログサービスでも概ね同様で、「html編集」とか「htmlモードへ切り替え」みたいなボタンを押せば切り替わります。

ワードプレスの入力画面の右上に点が3つ縦に並んでいる設定ボタンがあります。こちらをクリックすると、メニューが表示されます。

その中のエディター欄を「ビジュアルエディター」から「コードエディター」に切り替えます。

文字だらけのコード編集が可能なモードに切り替わりますので、この状態でhtmlタグを記述していきます。

すると、文字だらけのコード編集が可能なモードに切り替わりますので、この状態でhtmlタグを記述していきます。

文字の編集ができるhtmlタグ

それでは、実際にタグを記入してみましょう。

htmlタグは「<>」の中に要素を入れ「<要素>」と記述します。
このタグの終了を表す「閉じタグ」には「/(スラッシュ)」を入れ「</要素>」とします。
始まりのタグと終わりの閉じタグを合わせた「<要素></要素>」が1セットになります。

ちょっとややこしく見えますが実際にやってみると簡単です。

文字を大きくする

文字のサイズを他よりも少し大きくしたい場合は、要素に「big」を入れ、<big>というタグで、大きくしたい文字を囲いましょう。

コード↓

普通のテキスト <big>文字を大きくしたい</big>

このコードを「カスタムhtml」ブロックに記述すると、こうなります↓

普通のテキスト 文字を大きくしたい


大きくなりました!すごく単純!

文字を小さくする

では逆に、小さくしたい場合は<small></small>で囲いましょう。

普通のテキスト <small>文字を小さくしたい</small>
普通のテキスト 文字を小さくしたい

文字を太くする

ボタンがあればhtmlで記述する必要はありませんが、念のため太字も。
文字のサイズはそのままで目立たせたい時によく使用する太字は<b></b>で文字をくくります。
ボールドの「b」です。

<b>文字を太くしたい</b>
文字を太くしたい

<strong>でも同じように太字になります。

<strong>文字を太くしたい</strong>
文字を太くしたい

文字の下にアンダーラインを引く

リンクテキストによく見かけるアンダーライン付きの文字は<u></u>で文字をくくります。
アンダーの「u」です。

<u>アンダーラインを引きたい</u>
アンダーラインを引きたい

文字を斜体にする

引用テキストなどによく見かける斜体文字は<i></i>で文字をくくります。
イタリック体の「i」です。

<i>斜体にしたい</i>
斜体にしたい

<em></em>でも同じように斜体にすることができます。

<em>斜体にしたい</em>
斜体にしたい

文字に取り消し線を付ける

文章を訂正する際に使用する打ち消し線をつけるには<s></s>で文字をくくります。

<s>打ち消したい</s>
打ち消したい

<del></del>でも同じように打ち消しにすることができます。
デリートのdelです。

<del>打ち消したい</del>
打ち消したい

上付き文字する

2乗を表す場合や©️をつける場合に使用する上付き文字は<sup></sup>で文字をくくります。

10<sup>2</sup>
102

下付き文字する

下付き文字は<sub></sub>で文字をくくります。

H<sub>2</sub>O
H2O

まとめ

いかがでしたでしょうか。

ブログやホームページの運営をしている方は、すぐにでも使えるhtmlタグをいくつか紹介いたしました。知っていると記事にちょっとしたアクセントを付けれ、表現の幅が広がります。
初めは難しそうと思うかも知れませんが、慣れるとhtmlコードへの抵抗も少なくなってきます。
htmlタグは今回紹介した文字の形式を変えるものだけではなく、知れば便利なタグがまだまだたくさんありますので、ぜひ挑戦してみてください。

最後までご覧いただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top