新卒フリーランスが月144万円稼ぐまでの全てをまとめました

ライター、ブロガーでもHTMLが必要な理由【コピペOKのサンプルコードあり】

「記事を書くときってHTMLで書いたほうがいいのかな。でも、難しそうだし勉強はしたくない…」

じゃあ、この記事をどうぞ。という内容になってます。

こんにちは、フリーランスとしてWebデザインとWebライティングをしているくろぽん(@ktsuyoc)です。やたらと横文字が多いですが、怪しいものじゃございません。

さて、いきなり結論を申し上げるとライターやブロガーの方はHTMLで記事を書くべきです。なぜなら、単価が上がったり、表現の幅が広がったりといいことずくめだから。

しかし、HTMLって英語ですし、なんかよくわからない記号(</a>とか)を使いますし、なかなか勉強のハードルは高いですよね。

そこで、この記事ではライターやブロガー向けに

  • そもそもHTMLとは。CSSとの違いは？
  • HTMLで記事を書くべき理由
  • 【コピペでOK】ライター、ブロガーが覚えたいHTMLタグまとめ
  • HTMLを書くときにやりがちなミスとは？
  • HTMLが書きやすいテキストエディタ3選

の順でHTMLを解説します。

コピペできるコードを用意しておくので、難しいことは何もありません。まずは大まかにHTMLについて勉強しましょう！

「こっちは忙しいんだ！とりあえずコードだけコピペしたいんだよ！」という方は以下のリンクからどうぞ。

＞＞【コピペでOK】ライター、ブロガーが覚えたいHTMLまとめ

そもそもHTMLとは。CSSとの違いは？

HTMLとは、英語の「HyperText Markup Language」から頭文字を取ったものです。意味はわからなくても大丈夫ですが、カンタンに言うとHTMLの役割は

  • リンクでページとページをつなぐ
  • コンピューターに理解できるように、文章をつくる

の2つ。

よく例えられるのは「HTML=家の骨組み」です。ホームページを作るための構造を作るのがHTMLであります。

では家の壁や屋根、床にあたるものは何かというと、CSSです。HTMLとCSSはセットで語られることが多いですね。

HTMLの「タグ」って何？

HTMLを使っていると「タグ」という言葉をよく目にするかと思います。

タグとは書かれているテキストがHTMLであることを示すしるしみたいなものです。具体的には「 >」で囲まれた半角英数字ですね。

まあ、タグの意味はわからなくてもOKです。ちゃんと書けるほうが100倍重要。

CSSはHTMLで作った骨組みを装飾する言語

HTMLとセットで語られることが多い「CSS」とは、HTMLで作った骨組みに装飾をつける言語です。

例えば、こんなふうに色を赤くしたり、こんなふうに文字を大きくしたり。

HTMLとCSSを組み合わせることで、ホームページ(=インターネット上にある家)を作ることだってできちゃいます。

次に「HTMLでホームページを作れるのはわかったけど、なんで記事を書くときもHTMLを使うべきなの？」という点について解説します。

HTMLで記事を書くべき理由

ライターでもブロガーでもHTMLを使って記事を書くべき理由は以下の通り。

  • ライター：「クライアントが楽になって、単価が上がるから」
  • ブロガー：「表を作ったり文字のスタイルを変えたりでき、表現の幅が広がるから」

ライター：「クライアントが楽になって、単価が上がるから」

ライターがHTMLを書くべき理由は「単価が上がるから」の1点に尽きます。なぜ単価が上がるのかというと、クライアントが楽になるからです。

クライアントにもよるかと思うのですが、あなたがふだんライティングをするときって

h2 見出しタイトルが書かれている

ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。

・これは箇条書き
・これは箇条書き
・これは箇条書き

ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。

って感じで書いてませんか？もしHTMLで書いていない文章を納品しているとしたら、おそらくクライアントはメディアにアップする前に文章をHTML形式へ直しています。

なぜかというと「HTML形式のほうがSEO的に好ましいから」です。

メディアの記事は、検索順位が命。いくらよい文章を書いても、読者に読まれなければ意味がありません。読まれるためには検索順位が少しでも上にある必要があります。

参考：検索順位によるクリック率
  • 1位：20%くらい
  • 2位：10%くらい
  • 3位：7%くらい

参考：https://www.internetmarketingninjas.com/

1位から2位に下がるだけで読まれる確率が半減するんですよ。ゆえにクライアントはHTML形式に文章を直してでも、検索順位を上げたいわけです。

で、HTML形式で記事が納品されるとどうなるか。HTML形式に直す手間がないので「このライターさんは単価を上げてでも離したくないな…」となります。

単価を上げるコツについては「note「ノンスキル・文系・コネなし新卒フリーランスが、独立8ヶ月で月144万円を達成するまでの全て」をつくりました」にも書いているので、詳しく知りたい方はどうぞ。有料ですが単価アップできれはすぐに元を取れるはずです。

次はブロガー向けにHTMLを使うべきメリットを紹介します。

ブロガー：「表を作ったり文字のスタイルを変えたりでき、表現の幅が広がるから」

ブロガーがHTMLを使えると「表を作ったり文字のスタイルを変えたりでき、表現の幅が広がる」メリットがあります。

「え？ビジュアルエディタでもじゅうぶん表現できるけど…」と思うかもしれませんが、ビジュアルエディタには限界があるんです。どうがんばっても表示が崩れてたり、作れない表現があったり、意外と自由度は低いんですよね。

崩れている表現を直すにはHTMLの知識が必要ですし、どうせなら最初からHTMLを書いたほうが早くてキレイです。

それに、SEOを意識した記事を書くならなおさらHTMLで書くべき。いざというときはライティングで稼ぐこともできますし…。

「そうは言ってもイチからHTMLを勉強するのは厳しい！」という方は次にまとめたコードをコピペしてHTMLに慣れていきましょう。

【コピペでOK】ライター、ブロガーが覚えたいHTMLタグまとめ

ここからはライター、ブロガーが覚えたいHTMLタグ(コード)について、

  • 記事を書くには欠かせないレベルのHTML
  • 存在は知っておいたほうがいいHTML

の順に解説します。

記事を書くには欠かせないレベルのHTML

ここからは必須レベルのHTMLを

  • h：見出しを作る
  • a：リンクを入れる
  • strong：太字で強調する
  • blockquote：文章を引用、転載する
  • ul、ol、li：箇条書きのリストを作る

の順に紹介します。

h：見出しを作る

hタグは見出しを作ります。見出しはGoogleに対して「ここはこんなことを書いてるよー」と伝える目的もあり、SEO対策をするさいは無視できないタグの1つです。

コピペでOKなコードと反映例
コピペでOKなコード
<h2>ここに見出し2が入ります<h2>
反映例
見出しのキャプチャ
hタグはh2から始めるのが一般的

hタグはh2からはじめて、以下のような入れ子構造にします。

h2
ーh3
ーーh4
h2
ーh3
h2

h1はどこにあるのかというと、記事タイトルに使われています。
見出し1のキャプチャ
とりあえず「記事を書くときはh2からはじめる」と覚えておけばOKです。

a：リンクを入れる

aタグはリンクを入れることができるタグです。リンクはGoogleに対して「この記事はリンク先と関係があるよー」と伝える効果があり、関連する情報を伝える意味だとサイトの訪問者にとって利便性がアップします。

コピペでOKなコードと反映例
コピペでOKなコード
<a href="ここにURLを入れる" target="_blank">ここにテキストや画像(imgタグ)が入ります</a>
反映例
ここにテキストや画像(imgタグ)が入ります

リンクはブログのトップページに設定しています。aタグの中に入れるのはテキストでも画像でもOKです。

リンク先を別タブで開きたいなら「target=”_blank”」

サンプルコードにもある「target=”_blank”」は、リンク先を別タブで開きたいときに使います。

ぼくは「他のページを参照したあとに元のページに戻りたい」ので基本的につけてます。が、調べてみるとわりと賛否あるようです…。

strong：太字で強調する

strongタグは文字を太くすることができます。読者は忙しいので、記事をちゃんと読まないことが多いです。「ここだけは見て欲しい！」という重要なポイントは、太字にして強調しましょう。

コピペでOKなコードと反映例
コピペでOKなコード
<strong>ここに太くしたい文字が入ります</strong>
反映例
ここに太くしたい文字が入ります

blockquote：文章を引用、転載する

書籍や他サイトから文章を引用するときはblockquoteタグを使います。「長くて覚えられないな…」と思うかもしれませんが、大丈夫。コピペすればOKです。

コピペでOKなコードと反映例
コピペでOKなコード
<blockquote>ここに引用した文章を入れます</blockquote>
反映例

ここに引用した文章を入れます

引用は「本文の20%以下」がベター

「引用ってどれくらいまでしていいんだろう…」と思うかもしれませんが、個人的にはどんなに多くても本文の20%以下ってところですね。そうじゃないとあなたが書いた記事じゃなくなるので…。

ul、ol、li：箇条書きのリストを作る

箇条書きのリストはul、ol、liのタグで作ることができます。ulは「点(・)」の箇条書き、olは「数字」の箇条書きです。

「コードが多くて難しい」と感じるかもしれませんが、ここもコピペでいきましょう。項目を増やしたいときは<li></li>を追記してください。

コピペでOKなコードと反映例
コピペでOKなコード
<ul>
    <li>点の箇条書きリスト1です</li>
    <li>点の箇条書きリスト2です</li>
    <li>点の箇条書きリスト3です</li>
</ul>
反映例
  • 点の箇条書きリスト1です
  • 点の箇条書きリスト2です
  • 点の箇条書きリスト3です
コピペでOKなコード
<ol>
    <li>数字の箇条書きリスト1です</li>
    <li>数字の箇条書きリスト2です</li>
    <li>数字の箇条書きリスト3です</li>
</ol>
反映例
  1. 数字の箇条書きリスト1です
  2. 数字の箇条書きリスト2です
  3. 数字の箇条書きリスト3です

存在は知っておいたほうがいいHTML

ここからは存在は知っておいたほうがいいHTMLとして、

  • p：段落を入れる
  • br：改行する
  • table、tr、th、td：表を作る

を説明します。

p：段落を入れる

文章の段落を入れるタグです。Googleやブラウザに対して「ここに文章があるよー」と伝える役割があります。なんならこの文章も全てpタグで囲まれてるという。

ですが、ぶっちゃけ使い所はありません。というのも、ほとんどのブログサービス(WordPress、はてなブログなど)では自動でpタグが入るようになっています。入れても入れなくてもOKなので、つまり入れなくてOKです。

コピペでOKなコードと反映例

まあ、念のためコードを書いておきます。

コピペでOKなコード
<p>ここに文章が入ります</p>
反映例

ここに文章が入ります

br：改行する

改行するためのタグがbrです。文章の改行したいポイントに、閉じタグ(スラッシュが入ってるタグ)なしで入れます。

とはいえ、ふつうのブログサービスなら編集画面で1行あければ段落(pタグ)ができるので、わざわざbrタグを使う場面は多くないかなと。

コピペでOKなコードと反映例
コピペでOKなコード
ここで<br>改行されます
反映例
ここで
改行されます
brタグは重ねて使わない

余白を作りたいからといってbrタグを連続して使うのはNGです。なぜならbrタグは「改行」に使うタグだから。

brタグが連続してるとGoogleは「ん？文章がないのに改行が無数にある…なんだこれ…変なページだな…」と認識してしまいます。するとSEOの順位が下がることも。

余白はデザイン分野で扱うことなのでちゃんとやるならCSSを使いたいところですが、記事を書くだけならpタグだけでOKかなと。

table、tr、th、td：表を作る

表を作るためのタグがtableです。これはちょっとややこしいので、コピペでどうぞ。ライターでこれができると「おっ、やるじゃん」ってなると思います。(まあ、中身ありきなのでやたらとtable使いまくっても意味ないですが…)

表を作れると商品を比較したり情報をまとめたりしやすいので、文章だとなんだか長ったらしくなるなというときにも使えます。

コピペでOKなコードと反映例
コピペでOKなコード
<table>
    <tr>
    <th>ここに見出し1</th>
    <th>ここに見出し2</th>
    <th>ここに見出し3</th>
    </tr>
    <tr>
    <td>ここに内容1</td>
    <td>ここに内容2</td>
    <td>ここに内容3</td>
    </tr>
    <tr>
    <td>ここに内容a</td>
    <td>ここに内容b</td>
    <td>ここに内容c</td>
    </tr>
    </table>
反映例
ここに見出し1 ここに見出し2 ここに見出し3
ここに内容1 ここに内容2 ここに内容3
ここに内容a ここに内容b ここに内容c

ここまでライティングやブログでよく使うHTMLタグについて紹介しました。続いては自分でHTMLを書くときに気をつけたいポイントを説明します。

HTMLを書くときにやりがちなミスとは？

基本的なHTMLに関しては上記で紹介したものをコピペすればOKです。が、あなたが自分でHTMLを書くときには、思わぬミスが起こらないように注意する必要があります。

ここでは、HTMLでやりがちなミスとして

  • 全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)
  • 閉じタグを忘れてしまう
  • 別のタグとクロスしてしまう

を紹介します。「なんだかうまくいかないな…」とならないためにも、チェックしていきましょう。

全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)

HTMLは半角で書きます。じゃないと反映されません。

例えば、

＜ｕｌ＞
＜ｌｉ＞全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)＜／ｌｉ＞
＜ｌｉ＞閉じタグを忘れてしまう＜／ｌｉ＞
＜ｌｉ＞別のタグとクロスしてしまう＜／ｌｉ＞
＜／ｕｌ＞

と書くと、反映されずにタグがそのまま出てしまいます。

閉じタグを忘れてしまう

タグはちゃんと閉じましょう。閉じタグとは</a>のようにスラッシュ(/)がついたタグのことです。

遠足は家に帰るまでが遠足ですが、HTMLは閉じタグをつけるまでがHTMLなのであります。

別のタグとクロスしてしまう

別のタグとはさまってぐちゃぐちゃになるのも、はじめてだとやりがちなミスの1つです。例えば、こんな感じ↓に書くと

<ul>
<li>全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)
<li>閉じタグを忘れてしまう</li></li>
<li></ul>別のタグとクロスしてしまう</li>

こう↓なります。3つ目の項目が箇条書きの下に出ちゃいました。

  • 全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)
  • 閉じタグを忘れてしまう

別のタグとクロスしてしまう

このようなミスをしないためには、

  • よく使うHTMLのテンプレを用意する(このページをコピペでOK)
  • メモ帳ではなく、ちゃんとしたテキストエディタを使う

という方法がおすすめです。次は、おすすめのテキストエディタを軽く紹介します。

HTMLが書きやすいテキストエディタ3選

HTMLが書きやすいテキストエディタは、

  1. Brackets：起動が早い。サクサク使える
  2. SublimeText：コード補完など、プラグインが豊富
  3. Atom：起動は遅めだが、定番のエディタ

の3つかなと。よくわからなければBracketsを使っておけばOKです。ぼくもよく使います。

とはいえ、これらのエディタはファイルを管理する必要があるので、Googleドキュメントで執筆しながらコードを書くときだけエディタを開き、コピペするって感じがおすすめです。

HTMLを理解して単価アップ&望みの記事レイアウトを！

ここまで、ライターやブロガーが使いたいHTMLについて解説しました。HTMLについておさらいすると、以下の7つを紹介しました。

【記事を書くには欠かせないレベルのHTML】

  • h：見出しを作る
  • a：リンクを入れる
  • strong：太字で強調する
  • blockquote：文章を引用、転載する
  • ul、ol、li：箇条書きのリストを作る

【存在は知っておいたほうがいいHTML】

  • p：段落を入れる
  • br：改行する
  • table、tr、th、td：表を作る

HTMLは英語っぽくてとっつきにくく感じるかもしれませんが、覚えるべきことはそこまで多くありません。まずはこのページを参考にしつつ、記事をHTMLで書いてみることからはじめてみてください。

前の記事

reservation-yakiniku-onoda05
「小野田商店」はネット予約が必須の激ウマ焼き肉店です【予約方法…

次の記事

バンコクでおいしいコーヒーが飲めるカフェまとめ【注文のコツも紹…