はてなブログのMarkdownの書式まとめ

f:id:nasust:20170126175013j:plain


こんにちはnasustです。
先日、「はてなブログの記事はMarkdown形式だと圧倒的に書きやすい - nasust blog」という記事で、はてなブログMarkdownで記事が書きやすいと紹介しました。

Markdownという書式は簡単ですので色々なサイトで紹介されていますが、はてなブログMarkdownはてなブログで、どのように表示されるか分かりにくい所があります。

今回はMarkdownはてなブログの記事でどのように表示されるか解説していきます。

見出し

見出しは行頭に#とスペースを空けてタイトルを書く事で出来ます。h1〜h6対応しています。

はてなブログの見たまま編集モードですと見出しがh3から始まるので、h1から使用したい場合はMarkdownを使用すべきです。

例:

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

結果:


h1見出し

h2見出し

h3見出し

h4見出し

h5見出し
h6見出し

段落と改行

空白行に囲まれた文章が段落としてあつかわれます。途中で改行したい場合は、その行の末尾に二つのスペースを記述します。

例:

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ABCDEFGHIJKL  
Mabcdefghijklm1234567890

結果:


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

ABCDEFGHIJKL
Mabcdefghijklm1234567890


テキストのスタイリング

太文字、斜体、取り消し線のスタイリングが出来ます。
太文字は<strong>タグで囲まれます。
斜体は<em>タグで囲まれます。 取り消し線は<del>タグで囲まれます。

例:

**太文字**
*斜体*
~~取り消し線~~
**_太文字と斜体_**

結果:


太文字
斜体
取り消し線
太文字と斜体


引用

引用は先頭に>を記述します。

例:

>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

結果:


あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


リスト

印付きリストは-を使用します。
番号リストは数値.を使用します。

例:

- 1番目
- 2番目
- 3番目
    - 3番目の1
    - 3番目の2
    - 3番目の3
    
1. 1番目
2. 2番目
3. 3番目

1. 1番目 ⋯ ※番号であれば連番になる
1. 2番目
1. 3番目

結果:


  • 1番目
  • 2番目
  • 3番目
    • 3番目の1
    • 3番目の2
    • 3番目の3


  1. 1番目
  2. 2番目
  3. 3番目


  1. 1番目 ⋯ ※番号であれば連番になる
  2. 2番目
  3. 3番目

プレ要素とソースコード

はてなブログMarkdownではソースコードシンタックスハイライトに対応しています。

```バッククォートを3個で囲んだ部分がプレ要素になります。その後ろにプログラミング言語の名前を記述すると シンタックスハイライトが適用されます。

またインラインでバッククォートで囲む事によりソースコードを書く事ができます。

対応指定するシンタックスハイライトは、linguist/languages.yml at master · github/linguist · GitHubに記述されているプログラミング言語が対応しています。

例:

 
 ```html
 
 <p>こんにちは</p>
 
 ```
 
 `<p>こんにちは</p>`というソースコードをインラインで書けます。

結果:


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

<p>こんにちは</p>というソースコードをインラインで書けます。


以下の様に書く事で表が書けます。:で左寄せ、右寄せ、中央揃えを指定する事ができます。

例:

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| column     | column      | column       |

結果


Left align Right align Center align
column column column

区切り線

---というハイフンだけ書かれた行が区切り線として表示されます。

例:

---

結果

※⬇︎の線が区切りです


脚注

脚注を書くことが出来ます。

例:

Markdownでの脚注記法[^1]です。

[^1]: 脚注を書きます。

結果


Markdownでの脚注記法1です。

※ この記事の末に表示されています。


Markdownと合わせてよく使用する、はてな記法

記事の編集モードがMarkdownでも、はてな記法は使用できます。Markdownでもよく使用する、はてな記法を紹介します。

embed

この記法はブログカードやYoutubeニコニコ動画など埋め込む事が出来ます。OGP「Facebook Platform - Wikipedia」に対応したurlを埋め込む事が出来ます。

例:

[http://nasust.hatenablog.com:embed]

結果



リンク

リンク先のタイトルを表示します。

[http://nasust.hatenablog.com:title]

結果


nasust blog


最後に

如何でしょうか。Markdownは凄い簡単です。それでいて文章を書くのに問題がない表現が出来ます。 Markdownはあらゆるプラットフォームで使用されているので一度覚えると便利です。 僕はMarkdownはPDFにも変換できるので、WordよりMarkdownで文章を書くほうが多くなってますね。


  1. 脚注を書きます。

広告を非表示にする