2018/11/03「記事を書くときってHTMLで書いたほうがいいのかな。難しそうだし勉強はしたくない...」じゃあ、この記事をどうぞ。いう内容になってます。こんにちは、フリーランスとしてWebデザインとWebライティングをしているくろぽん(@ktsuyoc)です。横文字が多いですが、怪しいものじゃございません。結論を申し上げるとライターやブロガーの方はHTMLで記事を書くべきです。単価が上がったり、表現の幅が広がったりといいことずくめだから。HTMLって英語ですし、なんかよくわからない記号(</a>とか)を使いますし、なかなか勉強のハードルは高いですよね。そこで、この記事ではライターやブロガー向けにそもそもHTMLとは。【コピペでOK】ライター、ブロガーが覚えたいHTMLタグまとめHTMLを書くときにやりがちなミスとは?HTMLが書きやすいテキストエディタ3選の順でHTMLを解説します。コピペできるコードを用意しておくので、難しいことは何もありません。大まかにHTMLについて勉強しましょう!「こっちは忙しいんだ!とりあえずコードだけコピペしたいんだよ!」という方は以下のリンクからどうぞ。>>【コピペでOK】ライター、ブロガーが覚えたいHTMLまとめ目次そもそもHTMLとは。【コピペでOK】ライター、ブロガーが覚えたいHTMLタグまとめ記事を書くには欠かせないレベルのHTML存在は知っておいたほうがいいHTMLHTMLを書くときにやりがちなミスとは?全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)閉じタグを忘れてしまう別のタグとクロスしてしまうHTMLが書きやすいテキストエディタ3選HTMLを理解して単価アップ&望みの記事レイアウトを!そもそもHTMLとは。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点に尽きます。単価が上がるのかというと、クライアントが楽になるからです。見出しタイトルが書かれているここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。・これは箇条書き・これは箇条書き・これは箇条書きここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。ここに文章が書かれている。感じで書いてませんか?もし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に慣れていきましょう。記事を書くには欠かせないレベルの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ーーh4h2ーh3h2h1はどこにあるのかというと、記事タイトルに使われています。「記事を書くときはh2からはじめる」と覚えておけばOKです。a:リンクを入れるaタグはリンクを入れることができるタグです。リンクはGoogleに対して「この記事はリンク先と関係があるよー」と伝える効果があり、関連する情報を伝える意味だとサイトの訪問者にとって利便性がアップします。target="_blank">ここにテキストや画像(imgタグ)が入ります</a>反映例ここにテキストや画像(imgタグ)が入りますリンクはブログのトップページに設定しています。aタグの中に入れるのはテキストでも画像でもOKです。リンク先を別タブで開きたいなら「target="_blank"」サンプルコードにもある「target="_blank"」は、リンク先を別タブで開きたいときに使います。ぼくは「他のページを参照したあとに元のページに戻りたい」ので基本的につけてます。調べてみるとわりと賛否あるようです...。strong:太字で強調するstrongタグは文字を太くすることができます。読者は忙しいので、記事をちゃんと読まないことが多いです。「ここだけは見て欲しい!」という重要なポイントは、太字にして強調しましょう。コピペでOKなコードと反映例コピペでOKなコード<strong>ここに太くしたい文字が入ります</strong>反映例ここに太くしたい文字が入りますblockquote:文章を引用、転載する書籍や他サイトから文章を引用するときはblockquoteタグを使います。「長くて覚えられないな...」と思うかもしれませんが、大丈夫。コピペすればOKです。「引用ってどれくらいまでしていいんだろう...」と思うかもしれませんが、個人的にはどんなに多くても本文の20%以下ってところですね。ないとあなたが書いた記事じゃなくなるので...。ul、ol、li:箇条書きのリストを作る箇条書きのリストはul、ol、liのタグで作ることができます。ulは「点(・)」の箇条書き、olは「数字」の箇条書きです。「コードが多くて難しい」と感じるかもしれませんが、ここもコピペでいきましょう。項目を増やしたいときは<li></li>を追記してください。数字の箇条書きリスト1です数字の箇条書きリスト2です数字の箇条書きリスト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使いまくっても意味ないですが...)表を作れると商品を比較したり情報をまとめたりしやすいので、文章だとなんだか長ったらしくなるなというときにも使えます。ここに内容cここまでライティングやブログでよく使うHTMLタグについて紹介しました。続いては自分でHTMLを書くときに気をつけたいポイントを説明します。HTMLを書くときにやりがちなミスとは?基本的なHTMLに関しては上記で紹介したものをコピペすればOKです。あなたが自分でHTMLを書くときには、思わぬミスが起こらないように注意する必要があります。ここでは、HTMLでやりがちなミスとして全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)閉じタグを忘れてしまう別のタグとクロスしてしまうを紹介します。「なんだかうまくいかないな...」とならないためにも、チェックしていきましょう。全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)HTMLは半角で書きます。ないと反映されません。<ul><li>全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)</li><li>閉じタグを忘れてしまう</li><li>別のタグとクロスしてしまう</li></ul>と書くと、反映されずにタグがそのまま出てしまいます。閉じタグを忘れてしまうタグはちゃんと閉じましょう。閉じタグとは</a>のようにスラッシュ(/)がついたタグのことです。遠足は家に帰るまでが遠足ですが、HTMLは閉じタグをつけるまでがHTMLなのであります。別のタグとクロスしてしまう別のタグとはさまってぐちゃぐちゃになるのも、はじめてだとやりがちなミスの1つです。こんな感じ↓に書くと<ul><li>全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)<li>閉じタグを忘れてしまう</li></li><li></ul>別のタグとクロスしてしまう</li>こう↓なります。3つ目の項目が箇条書きの下に出ちゃいました。全角で書いてしまい、HTMLがちゃんと反映されない(とくにスペースは注意すべき)閉じタグを忘れてしまう別のタグとクロスしてしまうこのようなミスをしないためには、よく使うHTMLのテンプレを用意する(このページをコピペでOK)メモ帳ではなく、ちゃんとしたテキストエディタを使うという方法がおすすめです。次は、おすすめのテキストエディタを軽く紹介します。HTMLが書きやすいテキストエディタ3選HTMLが書きやすいテキストエディタは、Brackets:起動が早い。使えるSublimeText:コード補完など、プラグインが豊富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で書いてみることからはじめてみてください。ネット予約が必須の激ウマ焼き肉店です【予約方法...次の記事バンコクでおいしいコーヒーが飲めるカフェまとめ【注文のコツも紹...黒田剛司WebデザイナーとWebライターをしています。新卒でフリーランスになり、8ヶ月で月収144万円を達成。ブログ「くろろーぐ」ではお金や仕事、ライフスタイルについて発信します。nano」購入レビュー&口コミ。他機種との違いや使い方も紹介フリーランスの自己管理術まとめ。成果を出し続けるセルフコントロール方法とはフリーランスは簿記3級の知識があれば確定申告で詰まない【2級所持者が解説】フリーランスのタスク管理。