はてなブログでMarkdown記法を使う - プログラムでおかえしできるかな

はてなブログで編集モードを Markdown モードにした時の記事の書き方を説明します。

記事に箇条書きや番号付きリストが多い場合、Markdown モードが使いやすいと思います。

【Markdown記法】

見出し#
強調*
箇条書きリスト-
番号付きリスト1.
画像![]()
表--:|:--
引用>
リンク[]()
アンカーリンク[](#)
改行
取り消し線~~
水平線---
コード```
インラインコード`
脚注[^1]
コメント
空白
特殊文字

【Markdownモードで使えるはてな記法】

画像
自動リンク
目次
脚注記法

【Markdownに依らない記述】

下線
折り畳み
空白行
フロー図
続きを読む
画像にスクロールバー

◆Markdown記法

Markdown 記法とは、ブログを記述する記法の一つです。
はてなブログでは、編集モード ¹ の一つとして対応しています。

特徴の一つにテキストのままの状態でも、読みやすいということがあります。
読みやすいのに飾りも付くという何か魔法のような記法です。

ただし、ここで紹介しているように HTML を記述して飾りつけを施すと読みづらくなってしまいます。

シンプルな Markdown を使うか、もっと飾るかは読者の方の判断で選べます。

※見出しやボールドなどの表示のされ方は適用しているテーマやカスタマイズしている CSS により変わります

▼見出し

「#」、「##」、「###」、「####」、「#####」、「######

大見出し：「##」
中見出し：「###」
小見出し：「####」
#の数で見出し１から６まで使えます
HTMLの h タグと連動します
はてなブログでは、見出し１は表題用なので見出し2(大見出し)から使用します

【入力例】

##大見出し
###中見出し
####小見出し

大見出し

中見出し

小見出し

▼強調

強調には、斜体、ボールド、斜体でボールドがあります。
「*」か「_」のどちらかで囲みます。

斜体：「*」「_」
ボールド：「**」「__」
斜体でボールド：「***」「___」

※フォントにより斜体になりません（メイリオなどの日本語）

【入力例】

*斜体ABC*  
**ボールドABC**  
***斜体でボールドABC***

【出力例】

斜体ABC
ボールドABC
斜体でボールドABC

▼箇条書きリスト

「-」、「+」、「*」（半角空白が必要）

直前に空行が必要
マーク（CSS 依存）が前に付きます
行末に半角空白を２つ入れて、次行にテキストを入れるとインデントされます
タブを入れると階層化されます（記号も変わります（CSS 依存）)
リストの塊を分けるには「<P></P>」の行を入れます
👍個人的には「-」（ハイフン）が好きです。テキストの状態でも見やすいからです

【入力例】（_：空白）

- 箇条書きリスト①
- 箇条書きリスト②__
    インデントしたテキスト
 - 階層化したリスト
* 箇条書きリスト③

【出力例】

箇条書きリスト①
箇条書きリスト②
インデントしたテキスト
- 階層化したリスト
箇条書きリスト③

▼番号付きリスト

「1.」（最後は半角空白、全て半角、数字は任意、1で統一した方が楽）

先頭が変わるだけで基本的な使い方は箇条書きリストと同じです
水平線、コード、引用の後は番号が初期化されます
先頭が「1.」などなら後続は、「-」などでも良い

【入力例】（_：空白）

9. 番号付きリスト①
1. 番号付きリスト②__
    インデントしたテキスト
 - 階層化したリスト
 - 階層化したリスト
* 番号付きリスト③

【出力例】

番号付きリスト①
番号付きリスト②
インデントしたテキスト
- 階層化したリスト
- 階層化したリスト
番号付きリスト③

▼画像

「![代替テキスト](画像のURL)」
代替テキストとは画像が表示されていない間に表示するテキスト
「![代替テキスト](画像のURL "タイトル名")」
タイトル名とはマウスカーソルを画像に重ねた時に出るテキスト
画像にリンクを張るには、リンクと画像を入れ子にする
- 「[![代替テキスト](画像のURL)](URL)」

【入力例】

![城](https://cdn-ak.f.st-hatena.com/images/fotolife/j/xxxxx/20210909/20210909214705.png "しろ")





[![城](https://cdn-ak.f.st-hatena.com/images/fotolife/j/xxxxx/20210909/20210909214705.png "画像にリンク")](/entry/blog/markdown/image)
 ◁画像にリンクを貼った例

【出力例】

◁画像にリンクを貼った例

👍自分のブログの他の記事のリンクの指定は、「/entry」から始めるだけで十分です。

★リファレンス・スタイル

「![Alt text][id]」
「[id]:url/to/image "Optional title attribute"」

文中には短い識別子を記述して別のところに画像のリンク先を記述します。

【入力例】

![城][image1]

[image1]:https://cdn-ak.f.st-hatena.com/images/fotolife/j/xxxxx/20210909/20210909214705.png "しろ"

【出力例】

▼表

「ヘッダ１|ヘッダ２|ヘッダ３」（ヘッダ行）
「|---|---|---|」（文字揃え行）
「データ１|データ２|データ３」（データ行）

-(最低3文字)と|を使って作成
ヘッダ行、文字揃え行、データ行で構成
列の区切りは「|」
ヘッダ行の列数によって、テーブルの列数が決まります
文字揃え行のカラム数はヘッダ以上必要
文字揃え行の---の左右の「:」でカラム属性(左右寄せ)を指定
「:」の方にそろえます
★セルの結合はできません
★両端の|は省略できます。１列の時は省略できません

【入力例】

| 左揃え | 中央揃え | 右揃え |
|:---|:---:|---:|
|1 |2 |3 |
|4 |5 |6 |

【出力例】

左揃え	中央揃え	右揃え
1	2	3
4	5	6

▼引用

「>」

採用しているテーマ（CSS に依る）の引用のデザインになります
「>」を重ねると階層化されます
「>」は引用したい段落の最初の行の前にあれば十分です
ヘッダー、リスト、コードブロックなどの Markdown 要素を含めることができます
引用の塊を分けるには「<P></P>」の行を入れます

【入力例】

>引用している内容です。  
こちらも引用している内容です。  

<p></p>

>引用の入れ子です。
>>引用の入れ子です。

【出力例】

引用している内容です。
こちらも引用している内容です。

引用の入れ子です。

引用の入れ子です。

▼リンク

リンク：「[リンク名](URL)」
参照リンク：「[リンク名][ID] 」
「[ID]: URL "吹き出し文字"」（"ID"は、英数半角全角）
- 本文中は短く記述できます
- はてなブログでは脚注の説明に使えません
- 吹き出し文字は省略できます

※URLに「()」が含まれる場合の対応

<> で括る
[リンク名](<URL>)
参照リンクを使う
[リンク名][LINK1]
[LINK1]:URL

【入力例】

- [はてなブログ](https://hatenablog.com/)
- [はてなブログ][h1]
- [hhh][]
- [hhh]

[h1]:https://hatenablog.com/ "はてな"
[hhh]:https://hatenablog.com/

【出力例】

▼アンカーリンク（ページ内リンク）

「[リンク名](#見出し名)」 ☆#は一つ

ページ内の見出しへジャンプするためのリンクです。

☆見出し名の文字の特殊な扱い

半角記号は省略(-と_を除く)
空白は「-」（ハイフン）に置換
全角括弧類（記号）は省略
同じ見出し名が複数ある場合、末尾に -n が付きます

☆はてなブログでは、以前は目次を指定していないと使えませんでした ²

【入力例】

画像は[こちらの見出し](#画像)で説明しています

【出力例】

画像はこちらの見出しで説明しています

▼改行

行末に半角スペース2つ、または、<br>

※改行だけではつながって出力されます

【入力例】（_：空白）

1行目半角空白なし
2行目

3行目半角空白あり__  
4行目

5行目`<br>`付き<br>
6行目

【出力例】

1行目半角空白なし 2行目

3行目半角空白あり
4行目

5行目<br>付き
6行目

▼取り消し線

「~~」で囲む

※先頭の~~の次に半角空白があると機能しません。

【入力例】

~~消したい文字~~ ~~ 取り消し線~~

【出力例】
~~消したい文字~~ ~~ 取り消し線~~

▼水平線

「---」「***」「___」 ※前後に空行が必要

【入力例】

---
***
___

【出力例】

▼コード

「```」で囲む、「空白4つ」、「タブ」

★単語で区切れるように考慮する(スマホでオーバーフローが起きる)

シンタックスハイライト：先頭の「```」の後に言語名を書くとコードに色付けされる
対応しているファイルタイプ(言語)
主なもの：python, html, dosbatch, dosiniなど（はてなブログは小文字） ³

【入力例】

 ```
# コード
import tkinter as tk
 ```

    # タブであけただけ

【出力例】

# コード
import tkinter as tk

# タブであけただけ

▼インラインコード

「`」(バッククォート)で囲む

テキストの中にあるコードのスタイルを変えます
テキストをそのまま出力したい時に便利です

【入力例】

HTML で下線を表すには`<u>`タグを使います。

【出力例】

HTML で下線を表すには<u>タグを使います。

▼脚注

次のペアを作ると脚注になります。

脚注を入れたい場所
「[^1]」
※同じ番号を複数個所に指定できません（はてなブログの制限）
説明文（説明文はどこにあっても大丈夫）
「[^1]:脚注文」
説明文を改行したい場合は「<br>」を挿入

※番号は振り直されるので重複だけ気を付けます。

【入力例】

この後に注釈を入れます [^9]

[^9]:説明は記事の最後にまとまります。

【出力例】

この後に注釈を入れます ⁴

◎表の中に脚注を入れる場合

はてなブログの Markdown モードでは表の中に脚注を入れることができません。 ⁵
その場合、はてな記法（脚注記法⤵）で代用します。

▼コメント

「」で囲む。前後に空行が必要

【入力例】

ここは出力されます
<!-- ここは出力されません -->

【出力例】

ここは出力されます

▼空白

「 」、「&ensp;」、「&emsp;」

「 」：ノーブレークスペース（前後で自動改行しないスペース）
「&ensp;」：半角スペースより少し広めの空白
「&emsp;」：半角スペースよりさらに広めの空白　全角スペースとほぼ同じ幅

※私は通常、半角空白はそのまま入力して、全角の空白である「&emsp;」を使います。

【入力例】

空白を&nbsp;挟んで&ensp;記述&emsp;します

【出力例】

空白を挟んで記述します

▼特殊文字

Markdown 記法で使う特殊文字をそのまま出力したい時はエスケープします。

特殊文字：*_#```+-.!{}[]()
特殊文字をそのまま表示：バックスラッシュ(\)でエスケープ
バッククォート「`」一つをバックコートで囲みたい場合：「`` 」「 ``」で囲む

【入力例】

\*\_\#\`\+\-\.\!\{\}\[\]\(\)

【出力例】

*_#`+-.!{}[]()

◇基本的な仕様

ブロックレベルの HTML 要素である <div>、<table>、<pre>、<p>、等と Markdown コンテンツは、空行で分離しなければなりません
ブロックの開始タグと終了タグは、タブ又は空白でインデントしてはなりません
Markdown 構文はブロックレベルの HTML タグ内では処理しません
ブロックレベルの HTML タグとは異なり、Markdown 構文はスパンレベルのタグ内で処理されます
html では、「<」と「&」は「<」と「&」と記述する必要がありますが Markdown ではそうする必要はありません（そのまま記述できます）

◆Markdownモードで使えるはてな記法

はてな記法とは、はてなが提供しているブログを書く便利な記述法です。
Markdown モードでも一部のはてな記法が使用できます。

ここでは、Markdown モードで使えるはてな記法の中で Markdown 記法を補完するようなものを紹介します。

▼画像

【fotolife記法】：[f:id:はてなID:画像番号:オプション]

画像のリサイズが可能
画像をクリックして拡大表示が可能
画像番号：はてなフォトライフで画像を表示すると上に出ている番号
オプション
- :plain：PC環境で画像をクリックするとブラウザサイズのビューワで表示
- :image：画像をクリックまたはタップしたときに、無しも同じはてなフォトライフの画像ページに移動
- :w00：画像の表示幅(ピクセル)を数字で指定
- :h00：画像の表示高さ(ピクセル)を数字で指定
- :alt=代替テキスト：画像の代替テキスト（alt属性）を指定
- :title=タイトル：画像のtitle属性を指定
- :left：写真を左寄せにして文字を右に（回り込み）
- :right：写真を右寄せにして文字を左に（回り込み）
回り込みの解除
left や right を使用した後、回り込みを解除するには以下を指定します
<br style="cleare: both;">

【入力例】

[f:id:xxxxx:20210909214705p:plain:alt=城:title=しろ]

【出力例】

▼自動リンク

「[リンク:オプション]」

リンクのところに URL を記述してブログカードなどを出力することができます。 ⁶

オプション
以下は複数組み合わせることができる。
- :embed：ブログカードで表示
- :cite：ブログアドレスのリンクを表示（そのまま表示）
- :title：ブログタイトルのリンクを表示
- :title=""：指定したタイトルでリンクを表示
- :image：画像のURLの場合、画像として貼り付け（タグが画像になる）

【入力例】

[https://www.youtube.com/watch?v=4pmPptd4ibU:embed]

【出力例】

▼目次

「[:contents]」

前後に改行が必要

【入力例】

[:contents]

【出力例】

◆Markdown記法
- ▼見出し
大見出し
- 中見出し
  - 小見出し
- ▼強調
- ▼箇条書きリスト
- ▼番号付きリスト
- ▼画像
  - ★リファレンス・スタイル
▼表
▼引用
▼リンク
▼アンカーリンク（ページ内リンク）
▼改行
▼取り消し線
▼水平線
▼コード
▼インラインコード
▼脚注
- ◎表の中に脚注を入れる場合
▼コメント
▼空白
▼特殊文字
◇基本的な仕様
◆Markdownモードで使えるはてな記法
- ▼画像
- ▼自動リンク
- ▼目次
- ▼脚注記法
◆Markdownに依らない記述
- ▼下線
- ▼折り畳み
- ▼空白行
- ▼フロー図
- ▼続きを読む
- ▼画像にスクロールバー
◆プレビュー
◆さいごに
- ◇免責事項
◆参考

▼脚注記法

「((注釈の内容))」

本文中に脚注を設定します。 Markdown の脚注とは別に番号が振られます。

👍個人的には Markdown の脚注の方が本文が長くならないので好きです。

【入力例】

本文中に注釈((注釈の内容))を入れられます。  
括弧の中が数字になって注釈は記事の最後に出ます。

【出力例】

本文中に注釈*1を入れられます。
括弧の中が数字になって注釈は記事の最後に出ます。

◆Markdownに依らない記述

▼下線

「<u></u>」

下線は、Markdown では対応していません。
したがって、HTML で記述します。

【入力例】

<u>下線</u>

【出力例】

線

※本ブログでは下線と斜体の修飾を同じにしてあります。

▼折り畳み

「<details>」と「<summary>」タグ

HTML で折り畳みに対応します。

※折り畳みはデフォルトで閉じています。
開いておくには、「<details open>」とします。

【入力例】

<details>
<summary>閉じてる例</summary>
クリックすると見える文
</details>
普通の文
<details open>
<summary>開いてる例</summary>
クリックすると見える文
</details>

【出力例】

閉じてる例

クリックすると見える文

普通の文

開いてる例

クリックすると見える文

▼空白行

「<br>」

半角空白2個の行を複数行入力しても１行にまとまってしまいます。

▼フロー図

mermaid.jsを利用すると図が描けます。
はてなブログの場合、Markdown ではなく HTML で記述します。

【入力例】

<div class="mermaid">
    graph LR
    a-->b
    a-->|z|c(C)-->d&#x28(d)&#x29
</div>

【出力例】

graph LR a-->b a-->|z|c(C)-->d((d))

▶文末に以下を追加

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true});</script>

▶ノードの書き方

a：a と出る
a[A]：A と出る
重複する名称を出力させるときに使用
ノード名(a)は重複が許されないので[]の中の文字を出力させる
a["A"]：Aと出る
文字によってエラーとなる場合""で括る
改行する場合は<BR>を挿入
ノードの図形：上記の [] の代わりに使うと図形が変わる
[]：四角、()：角丸四角、(())：丸、>]：旗型、{}：ひし形
※丸の(())ははてな記法と重複するのでエスケープして&#x28( )&#x29とします
　一方だけで十分なので外側だけにしてみました
リンク(線)
-->：矢印、---：直線、-.->：矢印点線、
-->|文字|：文字付矢印、---|文字|：文字付直線、-.->|文字|：文字付矢印点線
※「--文字--」「-.文字.-」という記述も可能

▶解説サイト

▼続きを読む

「」

HTML で記述します。

▼画像にスクロールバー

「<section style="max-height:10em; overflow:auto;">」
「</section>」

画像の記述の前後に追加します。

<section style="max-height:10em; overflow:auto;">
![代替テキスト](画像のリンク)  
</section>

【入力例】

<section style="max-height:10em; overflow:auto;">
![フェイジョア](https://cdn-ak.f.st-hatena.com/images/fotolife/j/xxxxx/20210622/20210622102233.jpg)  
</section>

【出力例】

◆プレビュー

Markdown 記法で書いた記事がどのような表示になるのかは、はてなブログの編集画面であれば、「プレビュー」タブをクリックすれば、直ぐに確認することができます。

はてなブログの編集画面ではなく、エディタなどで記事を書いている場合にプレビューする方法を別記事で紹介しています。
参考にしてください。

📖 Markdownテキストをブラウザでプレビュー【Python】 🔗

◆さいごに

私の場合、はてなブログでどのモードで記事を書こうかというアプローチではありませんでした。
はじめに Markdown で記事を書きたいのだけれど、対応しているブログのサービスはどれかなというアプローチでした。

「これからは Markdown 」とかいう記事にのせられた感はありまが、自分には合っていると思います。

ですので、見たままモードがどのくらい使いやすいのか、初心者に分かりやすいのかは知りません。

でも、ローカルでテキストで記事の下書きができるので、markdown は重宝しています。

◇免責事項

ご利用に際しては、『免責事項』をご確認ください。
お気づきの点がございましたら『お問い合わせ』からお問い合わせください。

◆参考

はてなブログ：Markdown記法に対応しました - はてなブログ開発ブログ
はてなブログ編集モードの設定：編集モード - はてなブログヘルプ
Markdown仕様：Daring Fireball: Markdown Syntax Documentation
Markdown解説：Markdown入門
Markdown解説：Markdown記法チートシート · GitHub
はてなのMarkdown解説：はてなで使えるMarkdown記法 - hero-rinのブログ

投稿：2023-01-21 、更新：2024-03-25

編集モードを Markdown モードにする方法は、記事『編集モード - はてなブログヘルプ』を参照してください。↩
こちらの記事『はてなブログの2022年7月の機能修正・改善をお知らせします（4件） - はてなブログ開発ブログ』で目次がなくてもアンカーリンクが機能するようになりました。↩
はてなブログで対応している言語はこちら：ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログヘルプ ↩
説明は記事の最後にまとまります。↩
はてなに改善要求しましたが、はてな記法で代替えができるので改善していただけていません。↩
自動リンクの詳細：はてな記法一覧 - はてなブログヘルプ ↩

*1:注釈の内容