s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

トップ > ブログ > 【総集編】Markdown記法の全て！初心者のうちからマークダウンと正しいHTMLでブログを書く！

【総集編】Markdown記法の全て！初心者のうちからマークダウンと正しいHTMLでブログを書く！

ブログ

Markdown記法とは

文章を記述するための軽量マークアップ言語のひとつで、本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものです。私たちがWordPressやブログサービスなどを使って記事投稿の画面で文字を入力して投稿すると文章には自動的にHTMLタグが付与され、Webページに最適と思われる形に変換されて出力されます。

Markdownでは自動的に付与されるHTMLタグを自分でコントロールすることが可能になります。余計なタグが排出されないことやサービスの中ではSEOに繋がらないHTMLが付与されることもあります。ブログの今後を考えるのであれば、特にこのページにアクセスして興味を持ったのであれば従来の書き方はもう辞めましょう。Markdownでは簡単な記号や書き方で書式を指定することができるのです。

従来の一般的なWYSIWYGエディタ

はてなブログで言うところの「見たまま」という編集モードがそれに当たります。WordPressであればビジュアルエディタです。
WYSIWYG(ウィジウィグ)とは、ディスプレイに現れるものと処理内容(印刷結果)が一致するように表現する技術のことで、書いた文章の大きさや色、画像やリンクなどはそのままブログ記事になりますよね。

コアな人は直書き

HTMLはタグを書いて文章の書式を記述しています。つまり最初からエディタを使わずにメモで直接タグを打ち込むという方もおられます。硬派な方ですね。私もどちらかといえばそう言う人間です。しかしながらHTMLタグで文章を書くと言うのはどう言うことかというと

<p>こんにちは</p>

このようにWebページへ表示させたい文字に最適なタグも記述する必要があります。この場合は<p>タグと呼ばれるものになります。もちろんただの文章であればタグは書かずとも表示されます。これはHTML側で無指定の場合はどう表示するのかが定義されているからです。CSS(カスケーディング・スタイル・シート)という記事とは別にスタイルシートと呼ばれるものを用意してこの<p>タグに文字の大きさなどを指定することも出来ます。皆様はブログ運営をする時にブログの「テーマ」と言うものを設定しますね。文章を表示させるのに必要最低限なことはもちろんですが、ブログ全体の構成などもHTMLとCSSを元に作らなければなりません。これら面倒なものを全て一つに纏めているのが「テーマ」です。

HTMLを覚えるのに越したことはありませんが、私は記事作りに集中したいのです。昔はHTMLで一からサイトを作って個人的に運営をしていました。しかしそんなことをする必要はありません。世の中には優れたテーマが沢山あるのです。記事作りにとことん集中できる環境になりました。更にSEOを踏まえて一歩先に進んでみましょう。

はてなブログに焦点を当てたビジュアルエディタの欠点

はてなブログでは「見たまま」という編集モードがあります。どのブログサービスにもこのようなビジュアルエディタは存在します。ユーザーには直感的に記事作成を促すことができます。初心者でも分かりやすく一番多く採用されて馴染みのあるものでしょう。ブログといえばこれの使い勝手が命です。

さて、はてなブログのビジュアルエディタは致命的な欠点があることをご存知でしょうか？

はてなブログには「見たまま」「はてな記法」「Markdown」「HTML」の編集モードがあります。知らない方もせっかくなので覚えておいて下さい。私は初心者以外の方にはてなブログをオススメしたりはしません。

「見たまま」モードがはてなブログの標準になるブログエディタです。私はWordPressよりも使い勝手が良いと感じていました。過去形です。Markdownを使えるようになればどのブログサービスでもシステムでも関係がないので、どのエディタが最高か？という悩みからは解放されます。但しMarkdownに対応している必要はありますが「HTML」という編集モードが存在するのであれば問題ありません。

必要のないHTMLタグが作られる

これは空の<p></p>タグが生成されているのが原因です。問題はありません。しかしこの<p>タグの間には半角スペースが入力されています。つまり改行してから消すと不要な半角スペースが生まれ「プレビュー」では気付きにくいので「HTML」で見直す必要があります。

ビジュアルエディタでは<p>タグを代表として色を変えたり大きさを変えたり画像やリンクを表示させる度に不要なHTMLタグがわんさか出力されています。検索エンジン側に間違った使い方と認識されることは稀ですが、検索エンジンはHTMLでしかページを見ることが出来ません。とても汚いHTML構造を記録してインデックスします。あまりにも酷い場合にはペナルティが与えられるでしょう。その代表格が<br>タグです。連続して使うとペナルティになるのは有名です。WordPressのビジュアルエディタは最悪で、

タグと
タグがこれでもかと排出されゴミのように蓄積されていきます。WordPressが初心者向けではないというのはこういう所にもあり、これらは自分たちでカスタマイズして抑制するかビジュアルエディタ上での最適な書き方を模索するしかありません。

はてなブログの「見たまま」モードでは見出しがh3から始まる

最大の欠点がこれです。もはやSEO対策的には致命的と呼べる欠落でしょう。はてなブログで見出しを設定する時にはプルダウンメニューから「大見出し」「中見出し」「小見出し」という形で順次選ぶことが可能です。肝心の「大見出し」がh3タグであったのはご存知でしょうか？

hタグとは？

<h1>から<h6>までのタグが見出しとして定義されています。本来の正しい書き方はh1ときたのであればh2に行くべきで、h3はその後になります。h1は最も重要な記事のキーワードという側面が強く、タイトルに採用されることが多いです。このh1が重要であれば沢山使えば良いのではないかと言えばそうではありません。使えば使うほど重要性は薄れます。本来の大見出しに来るのはh2であって然るべきです。これは沢山使ってもh1ほど役割を損なうことはありません。タイトルの次に重要なh2ですが、はてなブログではh3から始まります。根本的な問題としてh2がありません。気付かず記事を作成し続けていたとあれば大変もったいないことです。hタグは検索結果にも表示されるほど重要なタグです。何を差し置いても使いこなさなければなりません。

h1から正しく使用する場合はMarkdownを選択するしかない

ビジュアルエディタで大見出しを使った後にHTMLプレビューに切り替えてh3をh2に直すことで対策は可能です。私もこれまでそうしてきました。しかしどうにも直感的に入力することが出来ません。見出しにしたいと思ったらマウスを手に取り、あるいはパッドに手を当てプルダウンまでカーソルを伸ばすという作業が煩わしいのです。Markdownではどうでしょう。文章を入力するついでの過程で簡単に記述することが出来るのです。はてなブロガーはもちろん、WordPressでブログを書いている方もそれ以外の方も、この記法を覚えることで必ず楽になるはずです。

Markdownのメリット

Markdownでははてなブログでお馴染みの「はてな記法」も使えるので、はてなブログの全機能が扱えます。「見たまま」だけでは出来なかった「表」の作成も出来るのです。どのような表示にできるのか自分で全て制御することが出来るのは大変魅力的でしょう。更にMarkdownに飽き足らずHTMLまで詳しくなればCSSでスタイリングし易いので読み易くすることも可能です。

Markdown自体はあくまで記法です。簡易的なマークアップ言語に過ぎません。ですから記述段階ではプレーンテキストなので、簡単にテンプレートなども用意することが出来ます。まとめ記事などの書式テンプレートを用意して簡単に記事作成が出来るようになります。凄く簡単で文章を書くのに問題がない表現が可能で、あらゆるプラットフォームでも使用されているので一度覚えると便利です。PDFにも変換できるのでWordよりMarkdownで文章を書く方が多くなるでしょう。

Markdown記法一覧(ブログ作成に必要な記法は全て網羅しました)

この記事ははてなブログを利用してMarkdownで書いています。どのように表示されるか確かめて下さい。そして記述の仕方やMarkdownには対応していないタグなども集めています。「見たまま」モードを卒業する為に「見たまま」で使われるタグも寄せ集めましたので、Markdownと一緒に自分に必要だと感じるHTMLタグも覚えてください。ブログの作成に関してはこの一覧で完結するようになっています。覚えてしまえばウェブを開いて書かなくてもメモで作成したり、メールで投稿することも可能です。

「はてなブログ」のみのタグ

  • 目次

hタグを使用していればページ上部の目次が自動生成される。

[:contents]

  • 続きを読む

<!-- more -->

改行と段落

  • 改行

行の末尾に[半角スペース]+[半角スペース]+[改行(Enter)]
<br/>が生成されます。

  • 段落

空白行に囲まれた文章が段落として扱われます。

見出し

行頭に[#]+[半角スペース] 半角スペースの後にタイトルを書きます。 h1~h6まで対応しており、#の数で階層を表します。

# h1見出し
## h2見出し
### h3見出し
#### h4見出し
##### h5見出し
###### h6見出し

見やすさの為に行末に[#]をつけても良いです。

# 見出し ##########

文字修飾(テキストスタイリング)

装飾には意外と間違ってタグを使われている方が多いので、こちらで見直してみて下さい。はてなブログではSEOに関係無く単なる装飾としてのタグが生成され、Markdown記法ではSEOに重要なタグが生成されます。デザイン的に文字を太くしたいときは<b>タグを使い、論理的にも意味を強調したいときには<strong>タグを使うなど分けて考える必要があります。どちらを使用しても見かけ上の違いはありませんがSEOでは<strong>を多用しすぎるとペナルティーを受けます。

はてなブログのメニューバーにある項目(SEOには関係ない装飾)

斜体 (イタリック)

斜体で描写します。

<i></i>
  • 実際の表示

    斜体(イタリック)

太字

太字体で描写します。

<b></b>
  • 実際の表示

    太字

打消 (取り消し線)
<s></s>
  • 実際の表示

    打ち消し線

Markdown記法の文字装飾(SEOに関係)

使い過ぎるとペナルティを受けてしまう要素があります。単に装飾したいだけであれば使用するのは控えるべきでしょう。

斜体

アスタリスクで囲み「重点を強調」します。
生成されるタグは<em></em>です。

*斜体*
  • 実際の表示

    斜体

太字

アスタリスク二つで囲み「強調表示」します。
生成されるタグは<strong></strong>です。

**太文字**
  • 実際の表示

    太文字

太字+イタリック

アスタリスク三つで囲み「強調表示より強い強調表記」に使用します。
生成されるタグは<strong></strong>と<em></em>です。

***強調表記***
**_強調表示_** ←このような表記も可能
  • 実際の表示

    強調表記

打消 (取り消し線)

ハイフン二つで囲み「削除された箇所」という意味を示します。
生成されるタグは<del></del>です。

~~打消~~
  • 実際の表示

    打消

markdownでは書けない文字装飾

アンダーライン
<u></u>
  • 実際の表示

    アンダーライン

文字色

color="red"の「red」の部分を変えて使用しますが、#FF0000といったHTLMカラーコードを当てるのが一般的ですが、わかりやすく

<font color="red">あかいろ</font>
  • 実際の表示

    あかいろ

文字の大きさ
<span style="font-size: 80%">文字の大きさ80%</span>
<span style="font-size: 150%">文字の大きさ150%</span>
<span style="font-size: 200%">文字の大きさ200%</span>
  • 実際の表示

    文字の大きさ80%
    文字の大きさ150%
    文字の大きさ200%

引用

<blockquote>タグが生成されます。 行頭に[>]を記述して使用します。
[>>]で階層化も可能で、引用文の中もMarkdown記法として解釈されます。
段落の一行目に[>]を記述することで全体が引用となり[空行]を一つ入れて引用を終了させます。

>引用
>>入れ子(階層化)
  • 実際の表示

    引用

    入れ子(階層化)

リスト

いずれのリストを作成する場合もリストの上に[空行]を挿入して下さい。

Disc型 (印付きリスト)

行頭に「*」or「+」or「-」のいずれかと[半角スペース]を記述します。
<ul><li></li></ul>タグで生成されます。
半角スペースを[2つ]もしくは[tab]を入れることでインデントされネスト化されます。半角スペースを[4つ]を入れると更にネストされます。 要点をまとめる際に便利です。

* リスト 1
  * リスト1-2
* リスト 2
  * リスト2-1
  * リスト2-2
    * リスト2-2-1
* リスト 3
  • 実際の表示
  • リスト 1
    • リスト1-2
  • リスト 2
    • リスト2-1
    • リスト2-2
      • リスト2-2-1
  • リスト 3
Decimal型 (番号付きリスト)

行頭に[半角数字]+[.]+[半角スペース]を記述します。
<ol><li></li></ol>タグで生成されます。 数字は並び順で自動的に割り振られます。番号のみで自動的に連番になるので、後からの挿入/移動を考慮すると全て「1. リスト」で記載すると変更が楽です。 ※引用記法の中で番号付きリストを使う場合は半角スペース4つ使わないと階層化できません(＝タブ1つでは正常に階層化されない)

1. リスト A
1. リスト B
1. リスト C
  • 実際の表示
    1. リスト A
    2. リスト B
    3. リスト C
Definition型 (印無しリスト)

Definition型はHTMLタグを使って修飾しなければなりません。

<dl>
  <dt>リスト 1</dt>
  <dd>リスト 1-2</dd>
  <dt>リスト 2</dt>
  <dd>リスト 2-1</dd>
</dl>
  • 実際の表示

    リスト 1
    リスト 1-2
    リスト 2
    リスト 2-1

Checkbox型(チェックリスト)

残念ながらこのMarkdown記法ははてなブログでは対応していません。 <input type="checkbox">で生成されます。

- [] item
- [x]checked item

「-」や「*」を連続させてもRedmine記法の様に入れ子にはなりません。

リスト直後のリストの作り方

二つの表を作ろうとした時に空行だけでは上手くいかないので注意が必要です。

* リスト 1
* リスト 2
* リスト 3
1. リスト A
1. リスト B
1. リスト C
  • 実際の表示
    • リスト 1
    • リスト 2
    • リスト 3
    • リスト A
    • リスト B
    • リスト C

空行の代わりに以下の記述が必要です。

<!-- dummy comment line for breaking list -->

* リスト 1
* リスト 2
* リスト 3
<!-- dummy comment line for breaking list -->
1. リスト 1
1. リスト 2
1. リスト 3

  • 実際の表示

  • リスト 1

  • リスト 2
  • リスト 3
  1. リスト A
  2. リスト B
  3. リスト C

エスケープ (無効化)

バッククォートで囲むことにより「コードを無効化」することが出来ます。
はてなブログのMarkdownではソースコードのシンタックスハイライトに対応しています。
引用記法の中では「```」で前後を囲む形式のpre記法は正常に動作しません。

pre記法

Webページに以下のようにHTMLタグを表示させる時の例ですが、

<p>hello</p>

通常ではこのようにタグをわんさか打ち込む必要があります。

<pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span>
<span class="synStatement">p</span>
<span class="synIdentifier">&gt;</span>hello<span class="synIdentifier">&lt;/</span>
<span class="synStatement">p</span>
<span class="synIdentifier">&gt;</span>
</pre>

Markdownはバッククォート[3つ]で囲み、後ろにプログラミング言語の名前を記述するとシンタックスハイライトが適用されます。

```html
<p>hello<p>
```

  • 実際の表示
<p>hello</p>
インライン表示

コードやタグをバッククォートで囲みます。
生成されるタグは<code></code>です。 バッククォートのエスケープには半角スペースをいれた上で、エスケープ対象より多い連続したバッククォートで囲みます。

`<p>hello</p>`

  • 実際の表示

    <p>hello</p>

Markdownのエスケープ

Markdownで使われている記号をインラインコードに含めたい場合は「\」を使います。

\* \+ \- \#
  • 実際の表示

    * + - #

表(テーブル)

はてなブログの「見たまま」では表の挿入は出来きません。
表を挿入する場合は最初から「はてな記法」で作成しないとなりませんが「Markdown」を覚えることで解決します。
表の上下には[空行]を挿入してください。
<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>で生成されます。

| 左寄せ | 右寄せ | 中央寄せ |
|:----------|----------:|:----------:|
| カラム | カラム | カラム |
  • 実際の表示
    左寄せ 右寄せ 中央寄せ
    カラムA カラムB カラムC

1行目に項目名を「|」で区切って記入します。
2行目に「-」を項目の数だけ区切って記入したあと「-」の両端に「:」をつけることで、左寄せ、右寄せ、中央揃えが指定可能です。
3行目以降にデータを書きます。

省略形

左右両端の「|」は省略可能です。
整形のための半角スペース・タブは省略可能です。

指定無し|左寄せ|中央寄せ|右寄せ
-|:-|:-:|-:
カラムA|カラムB|カラムC|カラムD
カラムE|カラムF|カラムG|カラムH
  • 実際の表示
    指定無し 左寄せ 中央寄せ 右寄せ
    カラムA カラムB カラムC カラムD
    カラムE カラムF カラムG カラムH

水平線(区切り線)

[3つ以上]のハイフン、イコール、アスタリスク、アンダーバーのみ書かれた行が区切り線として表示されます。
生成されるタグは<hr />です。

---
===
***
___
  • 実際の表示

脚注

生成されるタグは<sup></sup>です。

脚注箇所[^1]
[^1]: 補足・説明・解説
  • 以下のような書き方も可能です。
脚注箇所[^1]
脚注箇所[^2]
[^1]:補足・説明・解説
[^2]:補足・説明・解説
  • 実際の表示
    記事の一番下に脚注が表示されています。

    脚注箇所1

リンク

targetを指定して別タブ等で開くようにしたい場合はHTMLで書くしかありません。
その場合はtarget="_blank"を使う必要があります。

<a href="http://www.s13y.com" target="_blank">s13y</a>
  • 実際の表示

    s13y(クリックすると別タブで開かれます)

URLのみ

[http://www.s13y.com]
リンク先のタイトルを表示

[http://www.s13y.com:title]
  • 実際の表示

    s13y

リンクの埋め込み
[こちら](http://www.s13y.com)
複数リンク

[link-1][1]でマークして本文の後に[1]:http://~のように定義してリンクにした方が、本文中にURLが大量に含まれる場合や、同じリンクを何回も貼る場合に便利です。

[こちら][link-1]と[こちら][link-1]のリンクは同じです。[link-1]のみでも可能です。
[link-1]:http://www.s13y.com
title属性を付与した複数リンク

[]はtitle属性を表現しています。title属性とは「要素の補足情報」のことで「""」の中に記載します。
リンクの場合は「タイトル」や「説明」など、画像の場合は「著作権情報」や「撮影場所」「日時」や「その他の説明」などを記載します。

[こちら][title属性link]
[title属性link]:http://www.s13y.com "s13y"

カーソルを乗せることでtitle属性に記入した文章が表示されます。

Markdown+はてな記法

Markdownでもはてな記法が使用可能です。

URL埋め込み (embed)

生成されるタグは<iframe></iframe>です。 ブログカード、Youtube、ニコニコ動画などOGPに対応したurlが埋め込めます。

[http://www.s13y.com:embed]
  • 実際の表示 

[https://www.youtube.com/watch?v=7ePhUVJQs00:embed]
  • 実際の表示

はてなブログ式のURL埋め込み
[http://www.s13y.com:embed:cite]

画像(イメージ)

[]はalt属性を表現しています。alt属性を入れることで画像が表示できない場合に代替文字列を表示します。

画像埋め込み
![代替テキスト](画像のURL)
![Google Logo](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
  • 実際の表示

    Google Logo

title属性を付与した画像を埋め込む
![代替テキスト](画像のURL "画像タイトル")
![Google Logo](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png "Google Logo")
  • 実際の表示

    Google Logo

カーソルを乗せることでtitle属性に記入した文章が表示されます。

  1. 補足・説明・解説↩