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

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

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

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

こんなときのために、100%使うから意味だけでも理解しておこうっていう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>は段落を表すときに使うんですね。

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

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

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

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

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

文字を強調する<strong>

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

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

引用するときの<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ラ...

公式LINE始めました！

北海道ログの公式LINE始めました！

「あなたの上司が教えてくれないホワイトな働き方」をテーマに、LINEでしか読めないニュースレターを週に一回ほどゆるめに配信しています。

「働き方相談」も募集していますので、何か困ったことがあったり、記事にした内容で聞きたいことがあったりする方は、お気軽にメッセージください。必ず返信させていただきます。

とりあえず、下記のボタンよりお気軽にご登録下さい！

公式LINE特設ページはこちら！