はてなブログをマークダウン記法で書く方法を網羅的に調べます。

どのようなHTMLタグに変換されているのかをきちんと調べてテーマ制作の参考にしようと思います。

更に、ツールボックスを使った場合に挿入される内容などもこの機会に調べておきます。

はてなブログをマークダウン記法で記述する場合の参考にしていただければ幸いです。

f:id:hal7pi:20181201091647j:plain

見出し

見出しを書く時は#記号を複数書いて空白を置き、その後に見出しを書きます。シャープ記号の数によって見出しレベルが変わります。

# 見出しレベル1（H1)
見出しレベル1（H1)です。

<h1 id="見出しレベル1H1">見出しレベル1（H1)</h1>

見出しレベル1（H1)

見出しレベル1（H1)です。

## 見出しレベル2（H2)
見出しレベル2（H2)です。

<h2 id="見出しレベル2H2">見出しレベル2（H2)</h2>

見出しレベル2（H2)

見出しレベル2（H2)です。

### 見出しレベル3（H3)
見出しレベル3（H3)です。

<h3 id="見出しレベル3H3">見出しレベル3（H3)</h3>

見出しレベル3（H3)

見出しレベル3（H3)です。

#### 見出しレベル4（H4)
見出しレベル4（H4)です。

<h4 id="見出しレベル4H4">見出しレベル4（H4)</h4>

見出しレベル4（H4)

見出しレベル4（H4)です。

##### 見出しレベル5（H5)
見出しレベル5（H5)です。

<h5 id="見出しレベル5H5">見出しレベル5（H5)</h5>

見出しレベル5（H5)

見出しレベル5（H5)です。

###### 見出しレベル6（H6)
見出しレベル6（H6)です。

<h6 id="見出しレベル6H6">見出しレベル6（H6)</h6>

見出しレベル6（H6)

見出しレベル6（H6)です。

いずれの見出しにもHTMLにidが付加されていますね。そしてidも日本語で付きます。（）などの記号は削除されていますね。

段落と改行

段落は一行あけて作ります。
はてなのマークダウン記法では改行しても元の段落の一部として改行されずに文章が続きます。
ここまでがひとつの段落です。

次の段落にしたいときは一行あけます。
これが二つ目の段落です。

<p>段落は一行あけて作ります。
はてなのマークダウン記法では改行しても元の段落の一部として改行されずに文章が続きます。
ここまでがひとつの段落です。</p>

<p>次の段落にしたいときは一行あけます。
これが二つ目の段落です。</p>

段落は一行あけて作ります。はてなのマークダウン記法では改行しても元の段落の一部として改行されずに文章が続きます。ここまでがひとつの段落です。

次の段落にしたいときは一行あけます。これが二つ目の段落です。

改行する時は行末に半角空白スペース2つを置きます。   
これで強制改行することができます。

<p>改行する時は行末に半角空白スペース2つを置きます。<br/>
これで強制改行することができます。</p>

改行する時は行末に半角空白スペース2つを置きます。
これで強制改行することができます。

半角スペース2つ分で<br/>タグになっていますね。

強調表示

マークダウン記法では強調表示はアスタリスク（＊）で強調する部分を囲みます。

アスタリスクの個数により変換されるHTMLが次のように変わります。

アスタリスク1個で*強調する部分*を囲みます。

アスタリスク2個で**強調する部分**を囲みます。

アスタリスク3個で***強調する部分***を囲みます。

<p>アスタリスク1個で<em>強調する部分</em>を囲みます。</p>
<p>アスタリスク2個で<strong>強調する部分</strong>を囲みます。</p>
<p>アスタリスク3個で<strong><em>強調する部分</em></strong>を囲みます。</p>

つまりアスタリスク1個だとemタグとなり、2個だとstrongタグとなり、3個だとstorong + emタグとなります。表示はCSS設定によって変わります。

アスタリスク1個で強調する部分を囲みます。

アスタリスク2個で強調する部分を囲みます。

アスタリスク3個で強調する部分を囲みます。

アスタリスクの代わりにアンダーバー（＿）を使っても同じ効果が得られます。

アンダーバー1個で_強調する部分_を囲みます。

アンダーバー2個で__強調する部分__を囲みます。

アンダーバー3個で___強調する部分___を囲みます。

アンダーバー1個で強調する部分を囲みます。

アンダーバー2個で強調する部分を囲みます。

アンダーバー3個で強調する部分を囲みます。

見栄えはCSSによってコントロールします。

リンク

[ ]の中にテキストを（）の中にURLを書くとリンクとして表示されます。

[はてなブックマーク](http://b.hatena.ne.jp/)

<p><a href="http://b.hatena.ne.jp/">はてなブックマーク</a></p>

はてなブックマーク

記事の中に何度も同じリンクを書く場合はURL部分を定義しておき参照するようにすることもできます。URL部分が長い場合にも便利です。

[はてなブックマーク](url)  
なんたらかんたら。  
[はてなブックマーク](url)  

[url]:http://b.hatena.ne.jp/

<p><a href="http://b.hatena.ne.jp/">はてなブックマーク</a><br/>
なんたらかんたら。<br/>
<a href="http://b.hatena.ne.jp/">はてなブックマーク</a></p>

はてなブックマーク
なんたらかんたら。
はてなブックマーク

画像

![ノートブックPCを使う女性](https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20181117/20181117085324.jpg)

<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20181117/20181117085324.jpg" alt="ノートブックPCを使う女性" /></p>

ノートブックPCを使う女性

はてなブログの場合は画像を「写真を投稿」のエリアにドラッグアンドドロップするのも非常に簡単な方法でお勧めです。

<ol>
<li>ロミオとジュリエット

<ol>
<li>ロミオ</li>
<li>ジュリエット</li>
</ol>
</li>
<li>ハムレット

<ol>
<li>ガートルード

<ol>
<li>ハムレット</li>
</ol>
</li>
<li>ポローニアス

<ol>
<li>レアティーズ</li>
<li>オフィーリア</li>
</ol>
</li>
</ol>
</li>
</ol>

ロミオとジュリエット
1. ロミオ
2. ジュリエット
ハムレット
1. ガートルード
  1. ハムレット
2. ポローニアス
  1. レアティーズ
  2. オフィーリア

引用（ブロッククウォート）

引用はメールでの引用のように＞をつけて行います。＞＞のようにしてネストも可能です。

はるなぴさんは言いました。
>引用する時は出典をきちんと明示することが大切です。出典は引用の直後に分かりやすく表示しましょう。（はるなぴさん）

<p>はるなぴさんは言いました。</p>

<blockquote><p>引用する時は出典をきちんと明示することが大切です。出典は引用の直後に分かりやすく表示しましょう。（はるなぴさん）</p></blockquote>

はるなぴさんは言いました。

引用する時は出典をきちんと明示することが大切です。出典は引用の直後に分かりやすく表示しましょう。（はるなぴさん）

コード

バックティックで囲むとHTMLでは`code`タグで囲まれます。

<p>バックティックで囲むとHTMLでは<code>code</code>タグで囲まれます。</p>

バックティックで囲むとHTMLではcodeタグで囲まれます。

コードブロック

バックティックの3連打で囲むことによりコードブロックとして表現されます。半角スペース4つまたはタブ1つ以上を行頭に置いても構いません。

バックティックの後にプログラミング言語名を書くことでシンタックスハイライト表示も行うことが可能です。

テーブル

はてなのマークダウン記法ではテーブルを非常に簡単に書くことができます。

次のように書きます。

|順位|テーマ|インストール数|投稿日|
|---|---|---|---|
|1|Minimalism|18,493|2017-06-16|
|2|Brooklyn|21,831|2016-02-04|
|3|Innocent|24,260|2015-12-20|
|4|ZENO-TEAL|6,318|2017-03-11|
|5|Haruni|2,515|2018-03-11|

とっても簡単に書けます。

<table>
<thead>
<tr>
<th>順位</th>
<th>テーマ</th>
<th>インストール数</th>
<th>投稿日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Minimalism</td>
<td>18,493</td>
<td>2017-06-16</td>
</tr>
<tr>
<td>2</td>
<td>Brooklyn</td>
<td>21,831</td>
<td>2016-02-04</td>
</tr>
<tr>
<td>3</td>
<td>Innocent</td>
<td>24,260</td>
<td>2015-12-20</td>
</tr>
<tr>
<td>4</td>
<td>ZENO-TEAL</td>
<td>6,318</td>
<td>2017-03-11</td>
</tr>
<tr>
<td>5</td>
<td>Haruni</td>
<td>2,515</td>
<td>2018-03-11</td>
</tr>
</tbody>
</table>

順位	テーマ	インストール数	投稿日
1	Minimalism	18,493	2017-06-16
2	Brooklyn	21,831	2016-02-04
3	Innocent	24,260	2015-12-20
4	ZENO-TEAL	6,318	2017-03-11
5	Haruni	2,515	2018-03-11

右寄せ、左寄せ、中央寄せもできます。

|ヘッダー1（左寄せ）|ヘッダー2（中央寄せ）|ヘッダー3（右寄せ）|
|:---|:---:|---:|
|左寄せ|中央寄せ|右寄せ|

<table>
<thead>
<tr>
<th style="text-align:left;">ヘッダー1（左寄せ）</th>
<th style="text-align:center;">ヘッダー2（中央寄せ）</th>
<th style="text-align:right;">ヘッダー3（右寄せ）</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">左寄せ</td>
<td style="text-align:center;">中央寄せ</td>
<td style="text-align:right;">右寄せ</td>
</tr>
</tbody>
</table>

ヘッダー1（左寄せ）	ヘッダー2（中央寄せ）	ヘッダー3（右寄せ）
左寄せ	中央寄せ	右寄せ

水平線

ハイフン、アスタリスク、アンダーバーいずれかの3連打で水平線になります。

<hr />

---

ツールバー

[f🆔hal7pi:20181118164845p:plain]

はてなブログではツールバーを使って装飾を行うことが可能です。ツールバーボタンを押すとどのように入力されるのか確認します。

マークダウン記法とはまた違った入力になりますので違いを把握します。

見出し

[f🆔hal7pi:20181118164947p:plain]

大見出し

<h3 id="大見出し">大見出し</h3>

大見出しはh3タグに変換されました。

中見出し

<h4 id="中見出し">中見出し</h4>

中見出しはh4タグに変換されました。

小見出し

<h5 id="小見出し">小見出し</h5>

小見出しはh5タグに変換されました。

マークダウン記法で書く場合はシャープ（＃）記号を連打するだけで良いのでわざわざ大見出しなどを使う必要性はないでしょう。

大見出しから始めてもh3タグからになってしまうという問題もあります。

箇条書き

*箇条書きボタンを押すとアスタリスクが入力されました。

改行してからもう一度箇条書きボタンを押すと空行が挿入されてしまいます。

<ul>
<li>改行してからもう一度箇条書きボタンを押すと空行が挿入されてしまいます。</li>
</ul>

これも通常のマークダウン記法を用いれば良いので必要性はあまりないでしょう。

番号付きリスト

番号付きリストボタンを押すと「1.」が入力されました。
行末でもういちど番号付きリストを押すとさらに「1.」が入力されました。

<ol>
<li>番号付きリストボタンを押すと「1.」が入力されました。</li>
<li>行末でもういちど番号付きリストを押すとさらに「1.」が入力されました。</li>
</ol>

これもマークダウン記法そのものです。

リンク

リンクボタンを押してURLを入力しプレビューボタンを押すと次のように表示されます。

[f🆔hal7pi:20181118170418p:plain]

埋め込みを選択して挿入してみます。

b.hatena.ne.jp

<p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fb.hatena.ne.jp%2F" title="はてなブックマーク" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://b.hatena.ne.jp/">b.hatena.ne.jp</a></cite></p>

iframeを使っています。いつも使っていますがとても便利ですね。

次にタイトルと書かれているラジオボタンを選択して挿入してみます。

はてなブックマーク

<p><a href="http://b.hatena.ne.jp/">&#x306F;&#x3066;&#x306A;&#x30D6;&#x30C3;&#x30AF;&#x30DE;&#x30FC;&#x30AF;</a></p>

さらにURLと書かれているラジオボタンを選択して挿入してみます。

http://b.hatena.ne.jp/

<p><a href="http://b.hatena.ne.jp/">http://b.hatena.ne.jp/</a></p>

続きを読む

<h3>続きを読む</h3>

h3タグで囲まれてきました。

引用

行頭に>マークが挿入されます。

脚注

<p><a href="#f-7b87cf55" name="fn-7b87cf55" title="ここに脚注を書きます">*1</a></p>

リンクが挿入されます。

<div class="footnote">
<p class="footnote"><a href="#fn-7b87cf55" name="f-7b87cf55" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">ここに脚注を書きます</span></p>
</div>

太字

<b></b>

bタグが挿入されました。

bタグによる太字表示をしてみます。

<p>bタグによる<b>太字表示</b>をしてみます。</p>

斜体

<i></i>

iタグによる斜体表示をしてみます。

<p>iタグによる<i>斜体表示</i>をしてみます。</p>

打消し

<s></s>

sタグによる~~打消し表示~~をしてみます。

<p>sタグによる<s>打消し表示</s>をしてみます。</p>

はてなブログのマークダウン記法には打消しがありません。

通常はdelタグを使って打消しを行います。

delタグによる~~打消し表示~~をしてみます。

<p><code>del</code>タグによる<del>打消し表示</del>をしてみます。</p>

アンダーライン

<u></u>

uタグによるアンダーライン表示をしてみます。

<p>uタグによる<u>アンダーライン表示</u>をしてみます。</p>

文字の大きさ

<span style="font-size: 200%"></span>

<span style="font-size: 150%"></span>

標準を選択した場合は何も挿入されませんでした。

<span style="font-size: 80%"></span>

spanタグの中にスタイルをベタ書きしていますね。

文字色

<span style="color: #ff0000"></span>

まとめ

マークダウン記法には様々な方言（拡張）があります。どのような記法が可能なのか俯瞰しておくのも良いと思います。

特に便利でお勧めなのはテーブルをマークダウン記法で書く拡張です。CSSも紹介していますので参考にしてみてくださいね。

www.halu7.com

*1:ここに脚注を書きます

見出し