Wordpressブログ初心者が覚えておきたいHTMLタグ

HTMLタグ ブログ

HTMLタグを使ってブログを書きましょう

こんにちは。

ブログのテクノロジーの「と」です。

ブログを書くなら便利な機能が備わっているのでなにも知識のない初心者でもその日からブログを作成することは出来ます。

しかし、知識の全くない状態で用意されたものをただ使用しているだけよりも少しでも学ぶことで理解が深まりブログ制作も楽しくなっていくと思います。

今回はブログ初心者が覚えておくと便利なHTMLを解説していきたいと思います。

最初は誰でもHTMLってなに?なんなの?ってちょっと謎すぎて触るのも怖いですよね。

しかし、この記事を読んでHTMLなんて簡単!と思ってもらえたら嬉しいです。

僕はこの本を読んで勉強しました。

この一冊あればブログ作りには困らなくなるでしょう。

スポンサーリンク

HTMLってなんなのか

HTML

まず、HTMLについて解説します。

HTMLとはWebページを作る上で土台となる言語です。

HTMLを使ってそれぞれの文章や文字列が何を表しているのかを、コンピューターがわかるように指定していきます。

HTMLとは「Hyper Text Markup Langurge(ハイパー・テキスト・マークアップ・ランゲージ)」の略で、Webページの土台となるファイルを作成する言語です。

タグ

< >で挟まれた特殊な文字列をタグといいます。

タグには様々な種類があり、それぞれに意味を持っています。タグで文字列を囲むことでコンピューターに指示を出すことが出来ます。

コンピューターがそのページを構造を理解することがHTMLタグの役目です。

覚えておきたいHTMLタグ

よく使用される基本的なHTMLタグを紹介します。

とりあえずこれだけ覚えておけばいいと思います。

見出しを表示させる h1~h6タグ

hタグは見出しです。

<h1>と</h1>で見出し内容を挟むことで見出しを表示させます。

h1~h6までありますが今回はh1とh2を使用しました。

1から6まで数字が大きくなるに従って見出しは小さくなっていきます。

記事では1から順に使うことが望ましいです。見た目が好きだからと2の次に5を使うことは良くありません。

h6まで使うことはほとんどないと思います。
見出し1はひとつの記事に一回だけ使うようにしましょう。

下のように入力すると

<h2>h2の見出し</h2>

<h3>h3の見出し</h3>

<h4>h4の見出し</h4>

<h5>h5の見出し</h5>

<h6>h6の見出し</h6>

ブログには、このように表示されます。

見出しを上手に使い読みやすい記事を作りましょう。

見出しはWordpressに設定してあるものがタグを打つことによって表示されます。

見出しの見た目を自分好みに変えたい場合は設定を変更しましょう。

Wordpressの見出しを簡単にカスタマイズする方法です。
読んでください。

WordPress cocoon 見出しを変更したい コピペでおしゃれにカスタマイズ

段落を表示させる pタグ

pタグは段落を表すタグです。<p></p>の間に文章を挟むことにより段落が表示されます。
段落を使用することにより文章を読みやすくしてくれます。

Wordpressでは<p>タグは表示されませんが基本のタグなので覚えておくといいです。

エンターキーを押すことで自動的に段落が作られます。

<p>pタグを使った時</p><p>使わない時の違い</p>

pタグを使った時

使わない時の違い

pタグで囲んだ部分が段落として扱われるので段落同士が離されて表示されます。

pタグを使わないとこうなります。

pタグを使った時使わない時の違い

改行をする  brタグ

brタグは改行をします。

pタグと似ているようですが段落と改行との違いは見ていただければすぐに分かります。

<p>これはpタグです。</p><p>段落を表示することができます</p>

これはpタグです。

段落を表示することができます

同じ段落内でも文章が長くなってきて読みづらいなと感じたら改行をするといいでしょう。

<p>これはbrタグです。<br>改行をすることができます</p>

これはbrタグです。
改行をすることができます

改行をうまく使うことで文章はさらに読みやすくなりますね。

文字を太くする bタグ

bタグは太字です。

文章の中で強調したい部分に使うことでアピールできますね。

<p>bタグは<b>太字</b>です。</p>

bタグは太字です。

スタイルシートを適用させる spanタグ

spanタグはそれ自身は特に意味を持っていませんが、<span>~</span>で囲んだ範囲をひとかたまりとしてスタイルシートを適用するのに用います。

こう書かれるとちょっと難しいんじゃないの?って敬遠されがちですがこのタグによってもたらされる効果を見ればアーってなります。

みんな大好きなあれです。

<p>みんな大好きな<span style=”color:#ff0000;”>あれ</span>です。</p>

みんな大好きなあれです。

文字の色を変えたり、背景色を変える装飾を行うことが出来ます。

<p>background-colorとは<span style=”background-color:#ff0000;”>背景色</span>です。

background-colorとは背景色です。

画像を表示させる  imgタグ

画像には<img>タグを使います。終了の</>タグを使わず単独で使います。

画像を表示するには属性を指定しなければいけません。

src属性を指定することで画像が表示されます。

alt属性も必要で、うまく画像を表示できない時に画像を説明する役割があります。

<img src=”使用したい画像” alt=”説明”>

画像を挿入するためにはこのようなタグを入力します。

実際にやってみあしょう。

<img src=“huidasi.gif” alt=”“>

男

うまく表示されませんでした。

画像が出ない時にはalt属性が説明をしているのがわかります。

画像が表示されない理由はHTMLファイルと同じフォルダーに画像がないからです。

今回はワードプレス内にアップロードされているファイルを表示させますので画像のURLを入力します。

こんな感じです。

リンクを貼る  aタグ

aタグはリンクを貼るために使います。

href=””の中にリンク先のURLを入力します。

<a href=”https://the-technorogy.com/“>トップページへ</a>

トップページへ

画像にリンクを貼ります。

<a href=”https://the-technorogy.com/“><img src=”https://the-technorogy.com/wp-content/uploads/2019/07/huidasi.gif”></a>

 

 

 

リストを作る  リストタグ

箇条書きのリストを作ります。

箇条書きリストを表示するには<ul>タグを使います。<ul>は順番の決まっていないリストを意味します。

リスト内に<li>「List item」タグを入れてあげることでリストが表示されます。

<ul>
<li>たたかう</li>
<li>じゅもん</li>
<li>
どうぐ</li>
<li>
にげる</li>
</ul>

  • たたかう
  • じゅもん
  • どうぐ
  • にげる

番号付きのリストを作る時は<ol></ol>を使います。

<ol>
<li>フタを開ける</li>
<li>お湯を注ぐ</li>
<li>食べる</li>
</ol>

  1. フタを開ける
  2. お湯を注ぐ
  3. 食べる

表を作る  tableタグ

表を作成するのは少し複雑ですが理解してしまえば作業自体は簡単ですので覚えましょう。

<table>
 <tr> 
  <th>タグ</th>
  <th>目的</th>
 </tr>
 <tr>
  <td>table</td>
  <td>表を表すタグ。表全体を囲む。</td>
 </tr>
 <tr>
  <td>tr</td>
  <td>表の一行を囲む</td>
 </tr>
 <tr>
  <td>th</td>
  <td>表の見出しとなるセルを作成</td>
 </tr>
 <tr>
  <td>td</td>
  <td>表のデータをとなるセルを作成</td>
 </tr>
</table>

タグ目的
table表を表すタグ。表全体を囲む。
tr表の一行を囲む
th表の見出しとなるセルを作成
td表のデータをとなるセルを作成

まとめ

HTMLと基本的なHTMLタグの説明をしてみました。

これでもうHTML意味わからん!という状態からは抜け出せているはずです。

次は実際に使ってみてください。

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

コメント

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