この記事を読めば、WordPressブログの運営で必要なHTMLタグの基礎知識がわかります。
今日は「HTML」のお話です。
WordPressでブログを書いてたら、いろんなトラブルに遭います。
こんなときのために、100%使うから意味だけでも理解しておこうっていうHTMLタグをまとめました。
- これからWordPressでブログを始める人
- HTMLタグの意味がまったく分からない人
- 段落を変えられなくなった人
基本中の基本だけをまとめましたので、まずは基礎の使い方を理解していって下さい。
※下記「職務経歴書に書けるブログの作り方3週間講座」にて「6日目」に触れる内容です。
WordPressブログで必要なHTMLの基礎知識
WordPressで綺麗なブログを作ろうとおもったら、HTMLの知識は必須です。
僕がいいたいのは、どちらかというと「ブログを書いてたら自然とHTMLのコーディングスキルも身に付くからめっちゃいいじゃん」ってことですね。
今回の記事では、超初心者向けにHTMLを理解するためのお手伝いをしたいと思います。
HTMLを理解しないと、綺麗なブログが作れない
なんでHTMLを理解しておく必要があるかというと、全部このコードで成り立ってるからです。あなたが今見ていただいている画面も、分解すればぜんぶHTMLで書かれてるんですね。(CSSとかも関係しますが)
WordPressでブログを書いてて「ここ、もう少し見やすく装飾できないかなー」ってときは、だいたいHTMLでどうにかできます。
というわけで必ず知っておきましょう。
WordPressブログで100%使うHTMLタグ9選
今回は超・基本編ということで「WordPressでブログ書いてたら、これだけは100%使うだろ！」という最低限のHTML知識タグをまとめました。
実際に自分のブログで手を動かしながら、ぜったいに理解していって下さいね。ここでご紹介するタグは以下の通りです。
- 見出しタグ<h1>～<h6>
- テキスト単位で装飾する<span>
- ブロック単位で装飾する<div>
- 段落を表す<p>
- 文字を強調する<strong>
- 引用するときの<blockqoute>
- 箇条書きするときの<ol><ul><li>
- 表を作る<table><tr><th><td>
- リンクを貼る<a>
ちなみに上の箇条書きは、<ul>と<li>ってタグで作ってます。出てきますよ。
見出しタグ<h1>～<h6>
とても大事な「見出し」をあらわすタグです。ロボットにも人にもわかりやすい記事を書くには、「見出し」を理解しておきましょう。
- <h1>…そのコンテンツのタイトルを表すタグ
- <h2>…「大見出し」や「h2（エイチツー）見出し」と呼ぶ。主なトピックス
- <h3>…「中見出し」や「h3（エイチスリー）見出し」と呼ぶ。h2の中で細かく話題を整理するときに使う
- <h4>…「小見出し」や「h4（エイチフォー）見出し」と呼ぶ。h3の中でさらに細かく整理するときに使う
- <h5>…あまりつかわれない
- <h6>…あまりつかわれない
検索エンジンのクローラーが記事をみたときに、見出しによって綺麗に情報が整理されていた方がわかりやすいってことで、綺麗に見出しを使っていくことが推奨されてます。
たとえば本を読むときも、目次がないとどこに何が書いてあるのかわかりません。それと一緒で、webコンテンツも見出しをつかって整理しながら記事をかいていくのが親切なんですね。
テキスト単位で装飾する<span>
たとえばこの文字をちょっと大きいサイズにしました。
たとえば<span style=”font-size: 24px;”>この文字をちょっと大きいサイズに</span>しました。
こんな風に、装飾したい文字を囲ってつかうのが<span>タグです。
<span>の中に、上の文字の場合なら「font-size: 24px;（文字の大きさを24ピクセルに指定しますよ）」という指令をいれておけば、対象のテキストだけがそれに従って装飾されると。
こんな感じで使われます。
ブロック単位で装飾する<div>
ついでにこちらも寄せてみました。
<div style=”text-align: center;”>たとえばこの文章を真ん中に寄せます。
ついでにこちらも寄せてみました。</div>
上記のように、文章のかたまり（ブロック）ごと装飾するときに使うのが<div>です。WordPressでブログを書いてて困ったことになりがちなのが<div>で、初心者に嫌われるタグNo1ですね。
上のテキストは、HTMLを見ると下記のようになってます。
<div>たとえば段落を変えようと思っても</div>
<div>全然変えれなくて</div>
<div>よくみたら</div>
<div>タグが増殖してた…</div>
<div></div>
エンターを押してもなぜか段落変更じゃなく改行されるようになったら、だいたい<div>が増殖しちゃってるのが理由です。こういうことを理解しておけば、へんにトラブらずに綺麗なブログが作れますね。
段落を表す<p>
divと似てるんですが、ブロックではなく段落を表すのが<p>の役目です。
<p style=”text-align: center;”>divと似てるんですが、ブロックではなく段落を表すのが<p>の役目です。</p>
上記は<p>で囲って真ん中に寄せてみた例です。divが文章のひと塊をあらわすのに対して、<p>は段落を表すときに使うんですね。
たとえばdivのなかに
pをいれることで段落を
表現できます
上の文章は、HTMLでみると以下のようになってます。
<div class=”simple-box1″>
たとえばdivのなかに
<p style=”text-align: center;”>pをいれることで段落を</p>
表現できます
</div>
divに囲み線の装飾を指定して、その中の段落にpを使って真ん中に寄せてます。
で、僕が初心者のころに困ってたのは「div」とか「p」とかの使い分け方がよくわからんってことです。これは、要するに「入れ子構造」なんですね。
div > p > span
divの中にpを入れることができて、pの中にはspanが入ります。でも逆はダメで、pの中にdivは入らず、spanの中にもpは入りません。
なので、とりあえずテキスト単位で装飾したいときは<span>を、段落単位で装飾したいときは<p>を、文章のかたまりごと装飾したいときは<div>を使えば良いんじゃないかなと思います。
文字を強調する<strong>
なにか強調して伝えたいことがあるなら、strongを使いましょう。
なにか<strong>強調して伝えたいこと</strong>があるなら、strongを使いましょう。
デバイスによっても見え方が変わりますが、太字にするためのタグが<strong>です。
引用するときの<blockqoute>
金も人間も裏切る。その点筋肉は良い。筋肉が一夜にして消滅する事なんてないし、仮に10年筋トレを怠り筋肉が激減してもマッスルメモリーにより筋肉は短時間で復活する。
Testosterone・久保孝史著（2018）超筋トレが最強のソリューションである 筋肉が人生を変える超科学的な理由 文嚮社 より引用
引用したい文章があるときは、<blockquute>で囲むことで「これは引用した文ですよ～」とクローラーや読者につたえるしるしになります。
<blockquote>～</blockquote>
箇条書きするときの<ol><ul><li>
- これは
- よく
- 使いますよね？
<ul>
<li>これは</li>
<li>よく</li>
<li>使いますよね？</li>
</ul>
上記のように、箇条書きでリスト表示するための「リストタグ」と呼ばれるものです。
- このように
- 順番を
- 表す事もできます
<ol>
<li>このように</li>
<li>順番を</li>
<li>表す事もできます</li>
</ol>
<ul>で囲むことで普通の箇条書きに、<ol>で囲めば数字の連番の箇条書きになります。うまく使い分けてみて下さいね。
表を作る<table><tr><th><td>
| 表組み | 見出しA | 見出しB |
|---|---|---|
| 見出し | 情報1 | 情報2 |
| 見出し2 | 情報3 | 情報4 |
<table>
<tbody>
<tr>
<th>表組み</th>
<th>見出しA</th>
<th>見出しB</th>
</tr>
<tr>
<th>見出し</th>
<td>情報1</td>
<td>情報2</td>
</tr>
<tr>
<th>見出し2</th>
<td>情報3</td>
<td>情報4</td>
</tr>
</tbody>
</table>
テーブルは階層構造になってまして、表全体を<table>、横の1行を<tr>、マス目ひとつひとつを<td>、見出しのマスを<th>で囲います。
慣れてきたら思い通りの表を作れるようになってきますので、いろいろ試して練習してみて下さい。
リンクを貼る<a>
北海道ログのトップページを見る。
<a href=”https://tklandphoto.com”>北海道ログのトップページ</a>を見る。
どこかにリンクを貼るときは<a>タグを使います。これは超基本ですね。
まとめ
今回は、超カンタンにHTMLタグについて解説しました。WordPressでブログを書いていく上での基礎の基礎の基礎知識です。
ガンガン練習して、思い通りに装飾できるようになりましょう。
では。
【速報】ブログを始めて未経験から超ホワイトなwebマーケ企業に転職した僕がお届けする「3週間講座」を無料で用意しました。
こんなあなたにオススメです。
- お店で毎日消耗しながら働いて、いつか転職しようとは思うけれど踏ん切りがつかない27歳のアパレル店長
- それなりに出世したものの、先が見えてしまって絶望している35歳・人事部の中間管理職
- もしも40歳をすぎて今の会社が潰れたら…と想像すると、どうやって暮らしていけば良いのかわからない営業マン
3週間で学び、ブログを書き、1年後にはwebマーケティング企業に転職できるスキルを身に付けましょう。
