ブログ・SEOの話

【初心者向け】WordPressブログで100%使うHTMLタグ9選

この記事を読めば、WordPressブログの運営で必要なHTMLタグの基礎知識がわかります。

たくろー
たくろー
どうも。札幌のwebライター、たくろーです。

今日は「HTML」のお話です。

WordPressでブログを書いてたら、いろんなトラブルに遭います。

あれ?段落変えたいのに改行しかできない…
表がめちゃくちゃになって直せないぞ?

こんなときのために、100%使うから意味だけでも理解しておこうっていうHTMLタグをまとめました。

この記事が役に立つ人
  • これからWordPressでブログを始める人
  • HTMLタグの意味がまったく分からない人
  • 段落を変えられなくなった人

基本中の基本だけをまとめましたので、まずは基礎の使い方を理解していって下さい。

WordPressブログで必要なHTMLの基礎知識

WordPressで綺麗なブログを作ろうとおもったら、HTMLの知識は必須です。

僕がいいたいのは、どちらかというと「ブログを書いてたら自然とHTMLのコーディングスキルも身に付くからめっちゃいいじゃん」ってことですね。

今回の記事では、超初心者向けにHTMLを理解するためのお手伝いをしたいと思います。

HTMLを理解しないと、綺麗なブログが作れない

なんでHTMLを理解しておく必要があるかというと、全部このコードで成り立ってるからです。あなたが今見ていただいている画面も、分解すればぜんぶHTMLで書かれてるんですね。(CSSとかも関係しますが)

WordPressでブログを書いてて「ここ、もう少し見やすく装飾できないかなー」ってときは、だいたいHTMLでどうにかできます。

というわけで必ず知っておきましょう。

WordPressブログで100%使うHTMLタグ9選

今回は超・基本編ということで「WordPressでブログ書いてたら、これだけは100%使うだろ!」という最低限のHTML知識タグをまとめました。

実際に自分のブログで手を動かしながら、ぜったいに理解していって下さいね。ここでご紹介するタグは以下の通りです。

ちなみに上の箇条書きは、<ul>と<li>ってタグで作ってます。出てきますよ。

見出しタグ<h1>~<h6>

とても大事な「見出し」をあらわすタグです。ロボットにも人にもわかりやすい記事を書くには、「見出し」を理解しておきましょう。

  • <h1>…そのコンテンツのタイトルを表すタグ
  • <h2>…「大見出し」や「h2(エイチツー)見出し」と呼ぶ。主なトピックス
  • <h3>…「中見出し」や「h3(エイチスリー)見出し」と呼ぶ。h2の中で細かく話題を整理するときに使う
  • <h4>…「小見出し」や「h4(エイチフォー)見出し」と呼ぶ。h3の中でさらに細かく整理するときに使う
  • <h5>…あまりつかわれない
  • <h6>…あまりつかわれない

検索エンジンのクローラーが記事をみたときに、見出しによって綺麗に情報が整理されていた方がわかりやすいってことで、綺麗に見出しを使っていくことが推奨されてます。

たくろー
たくろー
人間が見たときもわかりやすいですよね。

たとえば本を読むときも、目次がないとどこに何が書いてあるのかわかりません。それと一緒で、webコンテンツも見出しをつかって整理しながら記事をかいていくのが親切なんですね。

テキスト単位で装飾する<span>

たとえばこの文字をちょっと大きいサイズにしました。

こんな風に、装飾したい文字を囲ってつかうのが<span>タグです。

<span>の中に、上の文字の場合なら「font-size: 24px;(文字の大きさを24ピクセルに指定しますよ)」という指令をいれておけば、対象のテキストだけがそれに従って装飾されると。

こんな感じで使われます。

ブロック単位で装飾する<div>

たとえばこの文章を真ん中に寄せます。
ついでにこちらも寄せてみました。

上記のように、文章のかたまり(ブロック)ごと装飾するときに使うのが<div>です。WordPressでブログを書いてて困ったことになりがちなのが<div>で、初心者に嫌われるタグNo1ですね。

たとえば段落を変えようと思っても
全然変えれなくて
よくみたら
タグが増殖してた…

上のテキストは、HTMLを見ると下記のようになってます。

エンターを押してもなぜか段落変更じゃなく改行されるようになったら、だいたい<div>が増殖しちゃってるのが理由です。こういうことを理解しておけば、へんにトラブらずに綺麗なブログが作れますね。

段落を表す<p>

divと似てるんですが、ブロックではなく段落を表すのが<p>の役目です。

上記は<p>で囲って真ん中に寄せてみた例です。divが文章のひと塊をあらわすのに対して、<p>は段落を表すときに使うんですね。

たとえばdivのなかに

pをいれることで段落を

表現できます

上の文章は、HTMLでみると以下のようになってます。

divに囲み線の装飾を指定して、その中の段落にpを使って真ん中に寄せてます。

で、僕が初心者のころに困ってたのは「div」とか「p」とかの使い分け方がよくわからんってことです。これは、要するに「入れ子構造」なんですね。

divの中にpを入れることができて、pの中にはspanが入ります。でも逆はダメで、pの中にdivは入らず、spanの中にもpは入りません。

なので、とりあえずテキスト単位で装飾したいときは<span>を、段落単位で装飾したいときは<p>を、文章のかたまりごと装飾したいときは<div>を使えば良いんじゃないかなと思います。

文字を強調する<strong>

なにか強調して伝えたいことがあるなら、strongを使いましょう。

デバイスによっても見え方が変わりますが、太字にするためのタグが<strong>です。

たくろー
たくろー
スマホだとクッキリと太字になりますが、例えばMacで見るとあまり太字感がなかったりします

引用するときの<blockqoute>

金も人間も裏切る。その点筋肉は良い。筋肉が一夜にして消滅する事なんてないし、仮に10年筋トレを怠り筋肉が激減してもマッスルメモリーにより筋肉は短時間で復活する。

Testosterone・久保孝史著(2018)超筋トレが最強のソリューションである 筋肉が人生を変える超科学的な理由 文嚮社 より引用

引用したい文章があるときは、<blockquute>で囲むことで「これは引用した文ですよ~」とクローラーや読者につたえるしるしになります。

箇条書きするときの<ol><ul><li>

  • これは
  • よく
  • 使いますよね?

上記のように、箇条書きでリスト表示するための「リストタグ」と呼ばれるものです。

  1. このように
  2. 順番を
  3. 表す事もできます

<ul>で囲むことで普通の箇条書きに、<ol>で囲めば数字の連番の箇条書きになります。うまく使い分けてみて下さいね。

表を作る<table><tr><th><td>

表組み 見出しA 見出しB
見出し 情報1 情報2
見出し2 情報3 情報4

テーブルは階層構造になってまして、表全体を<table>、横の1行を<tr>、マス目ひとつひとつを<td>、見出しのマスを<th>で囲います。

慣れてきたら思い通りの表を作れるようになってきますので、いろいろ試して練習してみて下さい。

リンクを貼る<a>

北海道ログのトップページを見る。

どこかにリンクを貼るときは<a>タグを使います。これは超基本ですね。

まとめ

今回は、超カンタンにHTMLタグについて解説しました。WordPressでブログを書いていく上での基礎の基礎の基礎知識です。

ガンガン練習して、思い通りに装飾できるようになりましょう。

下記の記事では「職務経歴書に書けるレベルのブログの作り方」も解説していますので、合わせて参考にしてみて下さい。

職務経歴書に書けるブログの作り方。書き方から転職方法まで完全ガイドどうも、たくろーです。 企業メディアで編集長をしています。元々アパレル業界にいましたが、ブログ運営経験を職務経歴書に書いてwebラ...
ABOUT ME
たくろー(WEBライター)
ブログ飯を達成しましたが、好きでサラリーマンをしています。 家ではブロガーをしつつ、企業オウンドメディアの編集長やwebライティング講師として活動。以前はブラックなアパレル企業で「人事」や「エリアマネージャー」を経験。「一つの会社とか収入源に依存しない働き方がいいよね」というスタンスです。下記URLより詳しいプロフィールもご覧ください。
30秒でOK!退職代行診断チャート

30秒診断

あなたにピッタリな退職代行は?

簡単な質問に答えるだけで、あなたの状況に合った退職代行がわかります。

Q3:有給は使いたいですか?

Q3:パワハラやセクハラを受けていますか?

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。24時間365日対応で、有給も全て使って即日退職できます。
25,000円ポッキリ相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。会社と交渉する法的な権利があるので、安心して即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。有給も全て使って即日退職できます。
実はパワハラやセクハラなどの具体的な被害が無い場合は、弁護士に頼んでも賠償請求は難しいかもしれません。
そんな会社に時間を割くくらいなら、弁護士よりリーズナブルな「労働組合」のサービスでスッキリ辞めましょう。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給が全部使えるように交渉してもらえて、とにかく安心して辞められます。
料金は50,000円ポッキリと労働組合のサービスより高くはなりますが、その分「弁護士」というネームでトラブルのリスクなく辞められるでしょう。

お金よりも「安心」を取りたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給だって全て消化できるのはもちろん、損害賠償請求までお願いできます。
退職代行自体の料金は50,000円ポッキリ。それに加えて賠償請求は「成果の20%」の成果報酬でお願いできるシステム。

損害賠償請求までお願いしたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

診断結果

あなたにおすすめの退職代行は

「退職代行J-NEXT」です。

J-NEXTは普通の会社が運営する退職代行なので、有休消化などはお願いできません。
とにかく20,000円ポッキリという料金が魅力で、退職代行業界の中でもトップクラスの格安サービスです。

安心よりも「料金」を取りたいあなたは、退職代行J-NEXTに相談してみて下さい。

\CHECK NOW/

J-NEXTならとにかく安く辞められる
さっそく無料相談する

退職代行J-NEXTの口コミ・評判。20,000円ポッキリで即日退職!退職代行J-NEXTは、退職代行業界最安水準の20,000円ポッキリの価格がウリ。さらに、同価格帯のサービスと比べると圧倒的にサポートが...

もう一度診断する