こんにちは！や～べ～です。
今回は、WordPressブログ初心者がまず覚えておきたいHTMLタグ10選+おまけ、ということで書いて行きたいと思います。
いくら導入が簡単なWordPressと言っても、Webサイトの一種なので記事を思ったように書くためには、HTMLの知識が多少必要になります。
HTMLの書式に則って記事を書くことによって、狙い通りの整ったWebサイトができると思いますし、SEO的にも有利になります。
※SEO有利≒検索順位上昇≒アクセスアップ
でも、あれやこれやと一気にたくさん覚えるのは大変だと思うので、自分の経験をもとに「最初に覚えておくと便利だろうな～」と思うHMTLタグ10選を書き出していきたいと思います。
WordPress初心者がまず覚えておきたいHTMLタグ10選
まずは、HTMLタグについて簡単に説明させてください。
HTMLタグとは？
＜●●＞ここに文字などを記入したもの＜/●●＞
↑のようなものをHTMLタグと呼びます。
●●にはアルファベットが入ります。
＜●●＞を開始タグと呼び、＜/●●＞を終了タグと呼びます。
Webサイトは基本的に、このHTMLタグを並べて表現しています。
ブラウザがこのHTMLタグを色々と変換してくれて、いつも見るWebサイトの表示になっています。
※実際タグを使う時には＜＞は半角で記述します。
それでは、覚えておきたいHTMLタグ10選を書き出していきます。
1.pタグ
＜p＞＜/p＞
このタグで囲まれた文字は、段らくとしてひとまとめになります。
段落間には余白が挿入されます。
使用例↓
「コード」
<p>↓こんな感じで</p> <p>↑余白が挿入されます</p>
「実際の表示」
↓こんな感じで
↑余白が挿入されます
参考サイト：pタグの意味と使い方
2.aタグ
＜a＞＜/a＞
リンクを挿入する時に使います。
使用例↓
「コード」
<a href="https://share-lab.net/wphajime1" target="_blank">さあ始めよう！なせば成る「0から始めるwordpressサイトづくり」のリンク</a>
「実際の表示」
さあ始めよう！なせば成る「0から始めるwordpressサイトづくり」のリンク
3.strongタグ
＜strong＞＜/strong＞
検索アルゴリズムに対して、キーワードを強調する場合に使います。あまり乱用するとSEO的に良くないので、1記事に5か所くらいまでにしておきましょう！
閲覧者に対して強調したい場合は、この後の「spanタグ」で説明するような方法で単語や文を大文字にする方法をオススメします。
WordPressのデフォルトでは、strongタグを使うと太文字表示されてしまう場合が多いと思うのですが、検索アルゴリズムに対しての強調として使う場合、それだと閲覧者にとって読みにくい記事になってしまう可能性があります。
ですので、テーマのstyle.cssなどを編集してstrongタグの太文字表示をキャンセルしておくことをオススメします。
「コード」
<strong></strong>
4.hタグ
＜h1＞＜/h1＞
＜h2＞＜/h2＞
＜h3＞＜/h3＞
＜h4＞＜/h4＞
＜h5＞＜/h5＞
＜h6＞＜/h6＞
見出しに使うタグでSEOにおいて最も重要なタグです。
検索アルゴリズムにとって記事の構造を理解する為の重要な目印になります。
ですので、検索アルゴリズムに記事の構造を正確に伝える為に、正確な使用をする必要があります。
h1～h6まであるのですが、順番に階層を崩さないようにして使う必要があります。
使用例↓
＜h1＞大見出し。h1は1記事に1つにする＜/h1＞
＜h2＞中見出し1＜/h2＞
＜h3＞小見出し1-1＜/h3＞
＜h3＞小見出し1-2＜/h3＞
＜h2＞中見出し2＜/h2＞
＜h3＞小見出し2-1＜/h3＞
＜h3＞小見出し2-2＜/h3＞
※実際タグを使う時には＜＞は半角で記述します。
「実際の表示」
こちらのページに表示させてます。
title（＜title＞＜/title＞）タグも非常に重要ですが、大抵のWordPressテーマでは、タイトル＝titleタグ＝h1タグになっています。
ですので、記事内ではh2～h6までを主に使うことになります。
（titleタグ、h1タグは意識して使う必要は無いと思います）
使用しているテーマでどう出力されているか、一度、ディベロッパーツールなどでWebページのソースを確認してみると良いと思います。
↓ディベロッパーツールについてはこちらの記事を参考にしてみてください
参考記事：サイトの中身が丸分かり！超便利なクロームデベロッパーツールの使い方｜みなラボ
5.spanタグ
＜span＞＜/span＞
単語や文を装飾する際に使います。
＜span style="●●"＞文章を書く＜/span＞
などと、記述すると文字のフォントや太さ、背景色などを個別に設定することができます。
spanタグには前後に改行が入らないので、文字や単語の装飾に向いています。
段落などの広い範囲を装飾する場合は、次に説明するdivタグを使用してみてください。
使用例↓太文字にしてみます。
「コード」
<span style="font-weight: 700">太字にする</span>
「実際の表示」
太字にする
6.divタグ
＜div＞＜/div＞
段落などの広い範囲を装飾する際に使います。
＜div style="●●"＞
＜p＞コンテンツ1＜/p＞
＜p＞コンテンツ2＜/p＞
＜/div＞
などと、記述すると段落内の文字のフォントや太さ、背景色、枠線などを個別に設定することができます。
divタグには前後に改行が入ります。
使用例↓点線で段落を囲んでみます。
「コード」
<div style="border-style:dotted;border-width:3px;padding: 10px 5px 10px 20px;"> <p>コンテンツ1</p> <p>コンテンツ2</p> </div>
「実際の表示」
コンテンツ1
コンテンツ2
7.moreタグ
＜!--more--＞
このタグは開始タグ、終了タグはありません。
挿入した場所より下のコンテンツが非表示になり、moreタグ自体は「→続きを読む」という表示に変わります。
トップページなどの記事一覧を表示している時に、記事の書き出しだけ表示させておきたいという場合などに使われます。
「コード」
<!--more-->
8.hrタグ
＜hr /＞
水平線を挿入するタグです。
このhrタグも開始タグ、終了タグはありません。
挿入した場所に、水平線が表示されます。
文章の区切りなどに使って問題ありません。
使用例↓
「コード」
<p>コンテンツ1</p> <hr /> <p>コンテンツ2</p>
「実際の表示」
コンテンツ1
コンテンツ2
9.scriptタグ
＜script＞＜/script＞
このタグを使うと、JavaScriptなどを使用できます。
※WordPressで良く使われる「jQuery」もこのscriptタグを用いて使用します。
「コード」
<script></script>
参考サイト：Chrono Drive
10.PHPタグ
＜?php 開始タグ
?＞ 終了タグ
ブラウザは開始タグと終了タグの間をPHPとして認識し、それ以外はHTMLと認識します。
使用例はこの後の「HTML内へのコメントの入れ方」を参考にしてください。
参考サイト：PHPを始める前に知りたい、基本的な文法といくつかのタグ
HTML内へのコメントの入れ方
.phpファイルなどを編集する際のコメントの入れ方
＜?php
/*コメント */
?＞
＜!-- コメント --＞
↑ファンクション.phpには使えない
↑この二通りの記述方法があります。
使用例↓
「コード」
<?php /*コメント */ ?> <!-- コメント -->
「実際の表示」
↑コメントなのでブラウザ上には何も表示されません。
HTMLタグで空白文字（スペース）を入れる方法
＆nbsp；
↑このタグを使います。
このタグは開始タグ、終了タグはありません。
空白を挿入することができます。
段落の上下の余白を少しだけ増やす時にも使えます。
使用例↓
「コード」
<p>↓空白増えるコンテンツ1</p> <p>↑空白増えるコンテンツ2</p> <p>普通のコンテンツ1</p> <p>普通のコンテンツ2</p>
「実際の表示」
↓空白増えるコンテンツ1
↑空白増えるコンテンツ2
普通のコンテンツ1
普通のコンテンツ2
参考サイト：Web上で使えるスペース(空白文字)いろいろ
HTMLタグで改行する方法
＜br＞タグを使います。
このタグは終了タグはありません。
使用例↓
「コード」
<p> 株式会社●●<br>tel:0120-12-3456<br>012-3456 愛知県●●市<br> </p>
「実際の表示」
株式会社●●
tel:0120-12-3456
012-3456 愛知県●●市
その他HTMLタグについて参考にさせてもらったサイト
参考サイト1：初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選
参考サイト2：SEOに重要なタグ12個の正しい使い方
おまけ
ブログ記事を書いて行く中で、写真や絵、図を使って説明する場合があると思いますが、その時、挿入する画像の拡張子を適切に選んでますか？
.jpg、.png、.gifと拡張子が違うだけで、使われる色数や圧縮の可逆性、透過の有無が異なるようです。
↓こちらのサイトが参考になります。
参考サイト：“知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、ブログでの使い分け方
例として自分の場合の拡張子の選択方法ですが、
実は「.jpg形式」一択です。
サイト内のメニューなどもデフォルトのもので、特に.png形式にする必要のあるものはありません。
アイキャッチで使う画像、文章内の説明で使う画像や写真、全て.jpg形式を使っています。
（ファイルサイズを極力削減したいので）
適切に選択した方が、無駄に重たいファイルを使わなくてもよいので、サイトの表示速度向上やサーバー容量節約に役立つのではないかと思います。
まとめ
WordPressブログ初心者がまず覚えておきたいHTMLタグ10選+おまけ、ということで記事を書かせていただきましたが、いかがでしたでしょうか？
WordPressでブログを書くといっても、覚えることがたくさんあって大変だと思います。
しかし、どうせ書くのなら大勢の方に読んでもらえた方が良いと思います。
なるべく検索上位に表示されやすい記事の作り方をすることが得策だと思います。
今回紹介したHTMLタグは、初心者の段階で理解しておくと良いと思われるものをピックアップしています。
特に、hタグやstrongタグなどは、記事をたくさん書いた後で修正するとなるととても骨の折れる作業になります。
（自分は40記事ぐらいの時に、全ての記事を見直しました。。。キツかった。。。）
最初はSEOなんてそんな影響あるの？なんて思うかもしれませんが、のちのち気になって色々なSEO対策することになると思うので早めに覚えおく事をオススメします。
じゃあ、今回はここまでっ！！
ではではっ！(´∀｀*)ﾉｼ
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
