ブログ・サイト運営の話

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

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

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

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

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

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

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

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

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

※下記「職務経歴書に書けるブログの作り方3週間講座」にて「6日目」に触れる内容です。

【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座
【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座この記事は「職務経歴書に書けるブログの作り方&webライティングスキル」を3週間(21日)で学べる講座です。 さっそく申し...

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でブログを書いていく上での基礎の基礎の基礎知識です。

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

では。

ABOUT ME
アバター
たくろー(WEBライター)
これまでにアパレル業界のエリアマネージャー職や人事・総務の仕事を経験。現在は企業メディアで編集・ライティング・SEO対策を担当する副編集長として働きつつ、ブロガー・webライターとしてパラレルワーク中。筋トレとザンギが好きです。詳しくはPROFILEもご覧ください。
3週間で転職できるスキルが身に付く「ブログ講座」を用意しました

【速報】ブログを始めて未経験から超ホワイトなwebマーケ企業に転職した僕がお届けする「3週間講座」を無料で用意しました。

職務経歴書に書けるブログの作り方
こんなあなたにオススメです。

  • お店で毎日消耗しながら働いて、いつか転職しようとは思うけれど踏ん切りがつかない27歳のアパレル店長
  • それなりに出世したものの、先が見えてしまって絶望している35歳・人事部の中間管理職
  • もしも40歳をすぎて今の会社が潰れたら…と想像すると、どうやって暮らしていけば良いのかわからない営業マン

3週間で学び、ブログを書き、1年後にはwebマーケティング企業に転職できるスキルを身に付けましょう。

【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座
【3週間で学ぼう】職務経歴書に書ける、最高のブログの作り方講座この記事は「職務経歴書に書けるブログの作り方&webライティングスキル」を3週間(21日)で学べる講座です。 さっそく申し...