- まだアメブロ？いますぐワードプレスに移行すべき理由。を追加しました
- アメブロ いいねを100以上にする２つの確実で簡単な方法と2つの裏技を更新しました
- WordPress PVを簡単に倍にする方法を追加しました
- 【アメブロ/wordpress】ブログは毎日書く方がいいの嘘・ホントを追加しました
この記事を読むのに必要な時間は約 22 分です。
- ブログを書くときに覚えておくと便利なHTMLタグを紹介
- タグの使い方次第でブログへのアクセスは大きく変わる
このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。
この記事を開いたという事は、あなたも仕事なり趣味なりでブログを書いているのだろうと思います。
しかし、HTMLタグを自分で入力しながら書いたり、タグの意味を理解してかけていないかもしれません。
最近のブログサービスだと、HTMLタグの意味が解らなくても、書式の効果がお手軽で自動に反映できるので別に知らなくてもいいと思うかもしれません。
ですが、フォントが変ったり、突然文字の大きさが変ったりとストレスを感じたことはありませんか？
HTMLを自動で反映できる仕組みにはやはり限界があります。
その為全てをあなたが思っているように反映させることはできません。
おかしくなったHTMLタグを修正したり、根本的に防ぐには、HTMLの知識というのは必須になります。
それに趣味で書いているのであれば問題はないかもしれませんが、仕事として書いているのであればSEOの観点から考えた場合でも最低限の知識を知るか知らないかで変わってきます。
今回は一人で起業しているメンタルセラピストやメンタルコーチ、ヒーラー、カウンセラーに向けて、ブログでよく使われるHTMLタグとその意味をお伝えします。
そうでない初心者ブロガーさんも、もちろん使えます。
アメブロでHTMLタグを使うには
今回は一人で起業しているメンタルセラピストやメンタルコーチ、ヒーラー、カウンセラーに向けなので、利用者が一番多いアメブロとを中心に書いていきます。
そもそもHTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、タグと呼ばれる命令（マーク)を使ってHTML文書の構造や意味を指定したり、モノ時の大きさや色を変えたり、画像を表示さたりすることができます。
アメブロでHTMLを編集する場合はエディターによって異なります。
旧来のタグ編集エディターを利用されている場合は、そのまま使うことができます。
最新版エディタを利用されている場合は、エディタの左下に通常表示・HTML表示というリンクがあるのでHTML表示をクリックすると切り替わります
スマホで投稿しているのであれば画面右下のプレビューの上にHTML表示と記載されているのでそこをタップすれば画面が切り替わります。
基本的なタグの使い方・書き方
HTMLタグの使用するにあたって次の2つを理解しておいてください。
- タグの入力方法
- タグの持つ意味
タグの入力方法
|
1 2 3 4 |
<p>段落のタグ</p> <strong>文字を太字にして強調します</strong> <a href="http://wordpress.org/">WordPress</a> <img src="../img/image.jpg" /> |
HTMLタグを入力するときは上記のように開始タグと終了タグで要素の内容を挟みます。
pやstrongといったタグを”<>”で囲ったものを開始タグ,タグの前に/(スラッシュ)を入れて<>で囲んだものを終了タグといいます。
タグの中には終了タグが必要のないものもあります。
タグの中に属性を指定する事で情報を付加してさらに細かな役割を与えることができます。
タグの持つ意味
HTMLは常に進化を続けているので書き方のバージョンというものがあります。
現在のバージョンはHTML5というものになります。
HTML5に改定されてから、以前のHTML4.01からタグの持つ意味が変わったものや、重要になったものがあります。
HTMLタグにはそれぞれ意味があり、文字や情報データに意味を持たせてコンピュータに正しい解釈をさせる役割があります。
代表的な使い方として「検索エンジンがサイトを構成するHTMLから意味のある要素を見つけ出し、ユーザーに適切な検索結果を返せるようになる」という事です。
つまり、HTMLタグをしっかりと理解し入力すると、あなたのブログへ検索流入の増加が期待できます。
ブログでよく使うHTMLタグ一覧
ブログを書くのであれば知っておいた方がいいHTMLタグの一覧です。
| 名称 | 役割 | 書き方 | ||
|---|---|---|---|---|
| pタグ | 段落 |
|
||
| brタグ | 改行 |
|
||
| strongタグ | 強調 |
|
||
| delタグ insタグ | 削除と追加 |
|
||
| sタグ | 正確でない |
|
||
| h2〜h4タグ | 見出し |
|
||
| titleタグ | タイトル |
|
||
| ulタグ liタグ |
順序のない箇条書き |
|
||
| olタグ liタグ |
順番のある箇条書き |
|
||
| aタグ | リンク |
|
||
| blockquoteタグ | 引用 |
|
||
| divタグ | デザイン指定 |
|
||
| spanタグ |
|
この14個のタグはあなたがブログを書く上で覚えていた方がいいタグです。
pタグ[段落]
pタグは段落を意味を意味するHTMLタグです。
|
1 |
<p>１つめの段落</p><p>2つめの段落</p> |
1つめの段落
2つめの段落
上記のようにpタグで囲んだテキストが１つの文章のかたまり(段落）として表示されます。
一般的なブラウザではpタグの前後には1行分の改行が入ります。
このpタグはブログで記事を作成する場合、一番使用頻度が高い基本のHTMLタグになります。
僕の場合は、基本的に一文（文頭から「。（読点）」まで）を一段落としてpタグで囲っています。
さらに文章の長さによりますが大体２〜３段落が続けた後は、空白 を使って行間を開けるようにしています。
これは、段落の間の空白が少ないと読み難くなるので、読み易い文章にするために区切りとして入れるようにしています。
とくに最近のブログのアクセスの７〜８割を占めているのはスマホユーザなので、５０文字前後で１段落、話題が変わるところでスペース（改行）を入れるというのが、読みやすいようです。
brタグ[改行]
brタグは改行を意味を意味するHTMLタグです。
|
1 |
<p>ここで改行する<br>ここから行が変わっている</p> |
ここから行が変わる
上記のようにbrタグを入れたところから改行されます。
よくブログの初心者がbrタグを連続して使いますがbrタグを連続して使うのはHTMLのルールでは正しい使い方ではないのでやめましょう。
一行以上の空白を入れたい場合はbrタグを連続で使うのではなくpタグで文章を囲みましょう。
アメブロでもEnterキーを押した場合はbrタグよりもpタグで改行されます。
そう考えた場合brタグを使う機会は今はほとんどないかもしれません。
strongタグ[強調]
strongタグは強調を意味するHTMLタグです。
基本的には太字で表示されます。
読んでくれるユーザーに「ここは重要！」と伝えたいときに使います
|
1 |
<p>テキストで<strong>強調</strong>したいテキストをstrongタグで囲む</p> |
テキストで強調したいテキストをstrongタグで囲む
同じように太字で表示するHTMLタグにbタグというものがありますが、bタグには強調の意味はなく、ただ太字になるだけです。
現在では、文字を装飾する場合（太字、斜体、下線を引く）はHTMLタグではなくCSSを使うことが推奨されています。
一部では「strongタグでキーワードを囲むと、SEO効果が高くなる」と言われていますが真偽のほどはさだかではありません。
あくまで僕の経験上ですが、多少効果があるかな？という程度です。
重要だと思うところを何でもかんでもstrongで囲むより、本当に重要な箇所だけstrongで囲んでそれ以外の目立たせたい場所はCSSなどでマーカー表記のをする方がいいかもしれません。
delタグ[削除]/insタグ[追加]
delタグは削除をinsタグは追加を意味するHTMLタグです。
使用頻度が高いわけではありませんが、記事を修正した場合に削除した部分を表すためのに使用します。
アメブロでは記事をリライトする方がいないので使うことはほとんどありません。
|
1 2 |
<p><del>この文章を削除しました</del></p> <p><ins>新たにこの文章に修正しました</ins></p> |
この文章を削除しました
この文章に修正しました
delタグは囲んだ部分の重要性が下がったことを検索エンジンに伝える役割があるといわれています。
insタグは囲んだ部分の重要性を上がったことを検索エンジンに伝える役割があるといわれています。
この２つをセットで使うことで記事の情報をより正確に検索エンジンに伝えることで表示順位が上がるかもしれません。
今回はdelタグとinsタグを同時に説明しましたが、セットで使わなければならないというルールはありません
sタグ[正確でない]
sタグは正確な情報で無くなった事を意味するHTMLタグです。
delタグと似ていますがsタグは囲った情報が過去の情報であったり、正確で無くなった場合に使用します。
|
1 2 3 |
<p>缶コーヒーがお買い得！</p> <p><s>通常価格: 1本100円</s></p> <p><strong>特別価格：1本59円！！</strong></p> |
缶コーヒーがお買い得！
通常価格: 1本100円
特別価格：1本59円！！
上記の使用例は、商品に新しい特別価格が付けられたという内容です。 通常価格の部分を<s>～</s>で囲んでいますが、 このマークアップは“通常価格がすでに関係無くなっている”という意味を表しています。
hタグ[見出し]
hタグは見出しを意味するHTMLタグです。
hタグはh1からh6まであります。
h1が最も上位の見出しで、数字が大きくなるにつれて下位の見出しになります。
|
1 2 3 |
<h2>大見出し</h2> <h3>中見出し</h3> <h4>小見出し</h4> |
大見出し
中見出し
小見出し
アメブロなどの無料ブログやwordpressでは「記事タイトル=h1タグ」に設定されている場合がほとんどです。
つまりブログの記事内で実際に使うhタグはh2からを使うことになります。
またブラウザの表示上は上位の見出しほど文字が大きくなり見た目が派手になるように設定されていることがほとんどです。
それから文章を構成する上で、注意しなければならないのが見出しの順番を守り、入れ子方式で使うこと。
言葉で説明するよりも下記の例を見ていただいた方が分かりやすいと思います
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<h2>一つめの大見出し</h2> <p>ここから本文テキストです</p> <p>一つめの大見出しの内容が書かれています</p> <h2>二つ目の大見出し</h2> <p>二つ目の大見出しは中見出しや小見出しもある文章です</p> <h3>中見出し1</h3> <p>中見出し1の内容を書きます</p> <h4>小見出し1</h4> <p>小見出し1の内容の文章を書きます</p> <h4>小見出し2</h4> <p>小見出し2の内容の文章を書きます</p> <h3>中見出し2</h3> <p>中見出し2の内容を書きます</p> <h2>三つ目の大見出し</h2> <p>三つ目の大見出しの内容の文章です</p> |
一つめの大見出し
ここから本文テキストです
一つめの大見出しの内容が書かれています
二つ目の大見出し
二つ目の大見出しは中見出しや小見出しもある文章です
中見出し1
中見出し1の内容を書きます
小見出し1
小見出し1の内容の文章を書きます
小見出し2
小見出し2の内容の文章を書きます
中見出し2
中見出し2の内容を書きます
三つ目の大見出し
三つ目の大見出しの内容の文章です
このように、上位の見出しの中に下位の見出しを入れて書くことと、h2のあとにh3を飛ばしてh4を書くのはNGとうことです。
hタグはSEOでも重要なHTMLタグです。
検索されたいキーワードは、でいる限りhタグに含めることをオススメします。
titleタグ[記事のタイトル]
titleタグはブログ記事のタイトルを表すHTMLタグです。
アメブロの場合は直接titleタグを書くことはまずあり得ませんがSEOでとても重要なタグです。
アメブロの場合は記事のタイトル+ブログ名がtitleタグに埋め込まれユーザーのブラウザに表示されます。
そしてgoogleやyahoo!などの検索エンジンの検索結果ページやアメブロの管理画面のフォローフィードなどに表示されます。
これはそのページ・記事の顔になることを意味しています。
あなたのフォロワーやgoogleやyahoo!から流れてくるユーザーはそのタイトルを見てあなたの記事を読むか読まないかを判断しているので、読んでもらうためにはとても重要な要素だと言えます。
当たり前のことですが検索エンジンが「このページが何について書かれているのか？」を判断する根拠にもなっています。
つまり検索結果の上位に表示されたいキーワードは、titleタグの中に入れるようにした方いいということです。
ul/ol/liタグ[箇条書き]
ulタグ、olタグ、そしてliタグは箇条書きを使うためのHTMLタグです。
ulタグを使った箇条書きは特に順序の関係ない箇条書き、olタグを使った箇条書きは順序がある箇条書きに使います。
liタグはその箇条書きの一つ一つを構成するタグです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p>順序の関係ない箇条書き 例）買い物リスト</p> <ul> <li>じゃがいも</li> <li>人参</li> <li>玉ねぎ</li> <li>牛肉</li> <li>カレールー</li> </ul> <p>順序がある箇条書き 例）カレーの作り方</p> <ol> <li>じゃがいも、人参、玉ねぎの皮を剥き食べやすい大きさに切る</li> <li>牛肉を軽く炒める</li> <li>野菜を軽く炒める</li> <li>炒まった牛肉と野菜に水を加え約30分煮込む</li> <li>一旦火を止めてカレールーを入れる</li> <li>とろみがつくまで弱火で煮込む(焦げ付かないようにかき混ぜながら)</li> </ol> |
順序の関係ない箇条書き 例）買い物リスト
- じゃがいも
- 人参
- 玉ねぎ
- 牛肉
- カレールー
順序がある箇条書き 例）カレーの作り方
- じゃがいも、人参、玉ねぎの皮を剥き食べやすい大きさに切る
- 牛肉を軽く炒める
- 野菜を軽く炒める
- 炒まった牛肉と野菜に水を加え約30分煮込む
- 一旦火を止めてカレールーを入れる
- とろみがつくまで弱火で煮込む(焦げ付かないようにかき混ぜながら)
このようにカレーのレシピを例に挙げると材料には順序は必要ないのでulタグで箇条書きにして、カレーの作り方は順序が大事なので番号が自動で振られるolタグの箇条書きとして使います。
アメブロで箇条書きをただのpタグやbrタグの改行で書かれている記事をよく見かけますが不恰好なので今後はあなたはこのように箇条書きのタグを使うと一段上の見栄えの記事が書けます。
aタグ[リンク]
aタグはリンクを指定するHTMLタグです。
基本的にアメブロでも他の無料ブログやwordpressでもエディターにリンクを作るボタンがあるのであなたが直接aタグを書くということはまずありません。
ただ書き方を覚えておいて損はありません。
|
1 |
<p>リンクを張るには<a href="#">表示したいテキスト</a>書きます<p> |
リンクを張るには表示したいテキスト書きます
aタグには属性として リンク先を別のタブで開くtarget=”blank”をつけることもできます。
blockquoteタグ[引用]
blockquoteタグは他のサイトなどからの文章を引用するときに使用するHTMLタグです。
引用タグはblockquoteタグの他にqタグがあります。
違いはblockquoteタグは長い文章を引用するときに使いqタグは短い文章や文章の一部だけを引用するときに使います。
|
1 2 3 4 |
<blockquote cite="https://your-best-partne.jp/for-it-solution/"> <p>長い文章を引用するときはblockquoteタグを使用して使います。</p> <p>その時cite属性を使うことで検索エンジンにも、引用であることを知らせる必要があります</p> </blockquote> |
長い文章を引用するときはblockquoteタグを使用して使います。
その時cite属性を使うことで検索エンジンにも、引用であることを知らせる必要があります
僕も今回の記事を書くまでは知らなかったのですが、引用元をaタグでリンクさせるのではなくcite属性を使って
<blockquote cite=”https://exampledomain.jp/example.html”>引用文章</blockquote>
と記述するのが正しい記述の仕方のようです。
もちろんaタグを使ってユーザーに引用元を知らせることは大事です。
さらにcite属性を使って検索エンジンにもどこから引用しているかを伝えるようにするのが望ましいです。
アメブロを見ていると文章を引用しているわりにblockquoteタグで囲っていないブログがたくさんあります。
あなたもこれからは引用した場合はblockquoteタグで囲ってください。
エディターには引用のためのボタンもあるのでわざわざHTML表記に切り替えなくても使うことができます。
divタグ/spanタグ [デザイン指定]
これらのタグは特に覚えておく必要はありませんが知識と知っっておいた方がいいのがdivタグとspanタグです。
divタグもspanタグもそれ自体には意味もありませんし、ブラウザの表示にも何も影響を与えません。
ただ、ダグで囲むことで文章を一つの塊にして、その部分だけのデザインを指定することができます。
デザインとは文字や背景の色、高さや幅、余白などのことです。
デザインの方法はCSSを記述することでできますが今回はHTMLタグに関する記事なので割愛します。
デザインやCSS関連する記事はまた別の記事で書きたいと思います。
|
1 2 3 4 5 6 |
<p>divタグは記事のワンポイントなどデザインを変えて表示したいときに使用する</ｐ> <div style="margin: 2%; border: solid 1px #00008f; padding: 2%; background-color: #6f6fff; color: #ffffff;"> <p>この記事のポイント</p> <p>divタグで記事のデザイの一部を変更できる</p></div> <p>spanタグは文章中の一部の文字の色や大きさを変更したいときに使用する</p> <p>文字の色を<span style="color:#ff0000;">赤色</span>にして文字を<span style="font-size: 150%;">大きく</span>する</p> |
divタグは記事のワンポイントなどデザインを変えて表示したいときに使用する
この記事のポイント
divタグで記事のデザイの一部を変更できる
spanタグは文章中の一部の文字の色や大きさを変更したいときに使用する
文字の色を赤色にして文字を大きくする
このように一部のデザインを変更する場合にCSSを使うために使用します。
divタグとspanタグの違いはdivは文章の塊に対してデザインを変更するために使用して、spanは文章中の一部の単語などを変化させるのに使用します。
まとめ
ブログを書くなら知っておいた方がいい14個のHTMLタグをお伝えしました。
あなたが趣味でブログを書いているのであれば、今回の内容をあまり氣にしなくても構いません。
しかしあなたがお仕事の為につまりブログを書くことで集客をしようと考えているのであればHTMLタグの使いわけはしっかりとすることをお勧めします。
面倒だとか思うのであればブログ集客などやめて他の方法で集客すればいいだけです。
また今回は画像を表示するimgタグについては敢えて書いていません。
理由は単純です。
今回の主旨はあくまで知っておいたほうがいいタグなので、imgタグはあなたもご存知だと思うので割愛しました。
今回の記事があなたのお役に立ってくれたら嬉しいです。
感謝感謝