プログラミングや動画編集の勉強ならCANIT (キャニット)

WordPress初心者が最低限知っておきたいhtmlタグを9個紹介

ワードプレス 言語・WordPress

仕事や個人のブログでWordpressを使っている人は多いです。でも……

WordPressを使ってるんだけど文字の装飾がうまくいかない

いまいちWordPressのエディターが使いこなせない

多くの方がこのような悩みを持っていますよね。

実は、これらの悩みは、HTMLタグの知識を身に付けることで解決することが多いのです。

実は、これらの悩みはHTMLタグの知識を身に付ければ解決できることが多いのです

HTMLタグには難しいイメージがあったり、そもそもHTMLタグってなに?という方もいらっしゃるでしょう。そのような方にもわかりやすいように、本記事ではWordPress初心者の方に向けて最低限知っておきたいHTMLタグを9個紹介します。ぜひ、参考にしてみてください。

すぐに理解できる:HTMLタグの基礎知識

プログラマー

HTMLタグとは、HTMLというマークアップ言語をコンピュータに文書の意味を理解してもらうために、タグ付けをしたものです。HTMLタグは< >(大なり小なり)の記号で囲んで使用します。

HTMLタグの存在があることで、文章構造や役割をコンピューターに正確に伝えることが出来ます。基本的に、HTMLタグは、指定したい範囲をタグで囲みます。

例:<◯◯>テキスト</◯◯>

なお、「<◯◯>」のことを開始タグ、「</◯◯>」のことを終了タグと呼びます

HTMLタグはWordPressの「テキスト投稿」に使用

WordPressのエディター(編集画面)は、以下の2種類があります。

  • ビジュアル投稿の画面
  • テキスト投稿の画面

ビジュアル投稿の画面にはHTMLタグがなく、直感的な操作が可能です。一方、テキスト投稿の画面はHTMLで囲まれています。

コンテンツの編集には、基本的にビジュアル投稿の画面を使用しますが、細かい設定にはテキスト投稿の画面を使用します。その際に、HTMLタグが必要になります。

##WordPressをプレス初心者が最低限知っておきたいHTMLタグ9選

チェック

1. 見出しタグ(h1~h6タグ)

見出しタグは、コンテンツ内の階層構造を表すタグで、「h(heading)」で表します。見出しタグは、h1~h6タグの順番に使用します。

WordPressでは、基本的にh1タグは本文の記事タイトル部分に設定されており、投稿ではh2タグから設定することになります。

例えば、タイトルの次に大きな見出しは、

<h2>テキスト</h2>

と表します。

見出しタグの注意点

見出しタグの注意点は、「使用する順番を守ること」です。具体的な話をすると、h2タグの直下にh4タグがあったり、h3タグの直下にh6があるのは間違った使い方ですね。

<h1>記事タイトル</h1>

 <h2>テキスト</h2>

  <h3>テキスト</h3>

 <h2>テキスト</h2>

 <h2>テキスト</h2>

  <h3>テキスト</h3>

   <h4>テキスト</h4>

    <h5>テキスト</h5>

     <h6>テキスト</h6>

   <h4>テキスト</h4>

    <h5>テキスト</h5>

     <h6>テキスト</h6>

このように使用しましょう。

2. pタグ

pタグは、文章の区切りごとに設定されます。pは「paragraph」の頭文字です。Wordpressでは、ビジュアル入力で改行をした場合に、それぞれの文が<p></p>で囲われるようになっています。

上の文章をpタグで囲むと、以下のようになります。

<p>pタグは、文章の区切りごとに設定されます。pは「paragraph」の頭文字です。</p>

<p>WordPressでは、ビジュアル入力で改行をした場合に、それぞれの文が<p></p>で囲われるようになっています。</p>

3. brタグ

男性 勉強

brタグは、テキストの改行をしたい箇所に設置をします。brは「break」の頭文字です。文章の途中で改行をしたいけど、段落では分けたくないという場合に使用します。

注意点として、brタグは、閉じタグが必要ありません。

今回扱うタグの中では、このbrタグと次のimgタグが閉じタグを必要としません。

4. imgタグ

imgタグは、ページに画像を設置する場合に用います。imgは画像を意味する「image」の頭文字です。imgタグも、閉じタグが不要です。

「src=””」の「””」の中に画像のURLを入れ、「alt=””」の中には画像の説明文を入れます。

「<img src=”画像URL” alt=”画像説明”>」という形になります。

5. aタグ

aタグは、リンクを設定するために用いられるタグです。aは「anchor」の頭文字です。「href=””」の「””」の中に、遷移したいページのURLを入力します。

「<a href=”遷移したいリンク先のURL”>テキスト</a>」という形で使います。

6.spanタグ

パソコン

spanタグは、テキストの一部を囲うことで、spanタグにスタイルを充てることができるようになります。

使い方の一例として、「WordPress初心者は<span style=”color:#008000;”>HTMLタグ</span>を覚えておきましょう。」とすることで、「HTMLタグ」というテキストの部分だけ、緑色に変えることが出来ます。

7. bタグ

bタグはただ文字を太くしたい場合に用います。bは「bold」の頭文字です。文字を太くしたい部分を<b></b>で囲んで使用します。

「WordPress初心者は<b>HTMLタグ</b>を覚えておきましょう。」という形で使います。

この場合、「HTMLタグ」というテキスト部分が太字になります。

なお、同じ効果がある「strongタグ(強調タグ)」もありますが、bタグを使っておいた方が無難です。

8.リストタグ(<ul>、<ol>、<li>)

リストタグは、コンテンツ内に箇条書きしたい要素がある場合に使用します。リストタグには<ul><ol><li>の3種類のタグがあり、以下のような使い方をします。ulは番号がついていない箇条書きリストで、olは番号つきの箇条書きリストです。

<ul>

<li>リスト</li>

<li>リスト</li>

<li>リスト</li>

</ul>

<ol>

<li>リスト</li>

<li>リスト</li>

<li>リスト</li>

</ol>

このように記述すると、ブラウザ上では、以下のように表示されます。

・リスト

・リスト

・リスト

1.リスト

2.リスト

3.リスト

9.テーブルタグ(<table>、<tr>、<th>、<td>)

プログラミング

tableタグは、表を作成するためのタグです。データなどを表として表示させたい場合に用います。

それぞれのタグには、以下の役割があります。

  • tableタグ:テーブルの開始と終わり
  • trタグ:テーブルの行
  • thタグ:テーブルの列の見出し
  • tdタグ:列の内容

テーブルタグは、以下のように使用します。

<table>

<tr>

<th>列の項目1</th>

<td>列の内容1</td>

</tr>

<tr>

<th>列の項目2</th>

<td>列の内容2</td>

</tr>

<tr>

<th>列の項目3</th>

<td>列の内容3</td>

</tr>

<tr>

<th>列の項目4</th>

<td>列の内容4</td>

</tr>

</table>

ブラウザ上では、以下のように表示されます。

列の項目1 列の内容1

列の項目2 列の内容2

列の項目3 列の内容3

列の項目4 列の内容4

trタグ、thタグ、tdタグは閉じタグを省略することも可能ですが、ミスを防ぐために、閉じタグは設置しておくことをおすすめします。

まとめ:WordPressでHTMLタグを活用しよう

パソコン 女性

本記事では、WordPress初心者が最低限知っておきたいHTMLタグを11個、使い方と合わせて紹介しました。

HTMLタグを上手に活用することで、WordPressでできることの幅が広がります。ぜひ、HTMLタグをマスターして、WordPressを使いこないていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

言語・WordPress
【この記事を書いた人】
nagamon

プログラミングスクール「テックキャンプ 」にてWEBアプリの開発を学習。現在はフリーランスWebライターとしてプログラミングや副業の記事を中心に執筆しています。

CANIT
タイトルとURLをコピーしました