読者にも検索エンジンにも好かれるブログの作り方【番外編】 HTMLタグ

こんにちは、IT+（アイティプラス）からECコンサルを受けたネットショップ店長のミキです。

前回まででご紹介してきた、「ブログを更新していく上で是非実践していただきたい8つのポイント」について、「HTMLタグ」というものが何度か登場しました。 前回までの記事ではご説明しきれなかった部分もありますので、今日はこの「HTMLタグ」について、はじめての方でもわかりやすくご紹介してみたいと思います。

タグとは？

初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑥～キーワードの強調～や、初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑧～見出しタグの活用～でも少しタグについて触れましたが、タグとは<（タグ名）>の記号で囲まれた半角の英数字のことで、このタグを使ってWebページは作られています。 使い方はとてもシンプルで、 <●>吾輩は猫である 上記のように開始タグと終了タグで任意の文字を挟むことで、その文字に対してタグの効果が表れます。 命令分（●の部分）を<>で囲んだものが開始タグ、命令分の前に”/（スラッシュ）”を入れて<>で囲んだものが終了タグとなり、必ずこの2つが1セットとなります。（一部のタグは終了タグを必要としないものもあります。）

タグを理解するメリット

今回いくつかのタグをご紹介しますが、実際にタグを入力しながらブログを書くことをお勧めしているのではなく、このタグにはどのような意味・効果があるのかを知っていただければと思います。 最近の無料ブログサービスではHTMLタグが全くわからなくても、タグ入力と同じような効果が手軽にボタン一つで反映できるようになり、とても便利になりました。 ですがブログを書いていると時々、下書きでは問題ないのに記事を公開すると改行が崩れていたり、意図していない部分が全て太字になってしまったりと、表示が崩れてしまうことも実は多々あるのです。 そんな時にタグやHTMLの知識が少しでもあると、どこを修正すればよいかをいとも簡単に見つけて対処することが可能になります。

特にアメブロで多いのが、終了タグの位置の間違いです。 例えば、 吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 このように「吾輩は猫である」だけを太字にしたつもりが、 吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 このように全てが太字になってしまっているとします。 こんな時には記事の編集画面を「HTML表示」に切り替えて問題の箇所を見てみると、 吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 このように、終了タグの位置が間違っている場合があります。 HTMLの知識が少しあれば、 吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 このようにをカット＆ペーストで簡単に正しい位置に戻すことができるようになります。

このようなエラーはHTMLを書式に自動で反映する仕組みに限界があり、全てを正確に反映できるわけではないことが原因で起こります。ですがタグについて最低限のルールや意味を知っておくことでいとも簡単に修正できますので、嫌悪感をもたずに徐々にタグに慣れていってほしいと思います。 またブログサービスによっては設定できないタグも、HTML画面で直接入力することでタグの設定が可能になります。 （例えばアメブロでは

などのタグは利用できませんが、直接入力は可能です） さらには適切なタグを用いることでブログを正しく構成することができ、検索エンジンもより正確にブログの内容を読み取れるようになります。

初心者でも使えるタグの種類

ここではブログを書いていて、HTML表示にするとよく見かけるであろうタグをいくつかご紹介します。 実際にこれらを入力することはなくても、各書式を設定したあとにHTML表示画面でタグを確認したり、修正の際などに是非役立てて下さい。 ※については初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑥～キーワードの強調～でご紹介しています。

1、

段落を意味する文字列に使用します。 【使用例】

ここからここまでが1つの段落です。

ここから次の段落です。