No Hack No Life

ライフハック情報をはじめとして、どこかでだれかのタメになる情報を発信していきたいと思っています。

はてなブログで高速に記事を書けるMarkdown記法チートシート

2020年版:最新版の記事がこちらです!!

no-hack-no-life.hatenablog.com

 

はてなブログで記事を書くときには
「見たままモード」「はてな記法モード」「Markdownモード」の
3種類の編集画面(編集モード)を選択できます。

それぞれの違いについては公式ヘルプが参考になります。

私は仕事柄、Markdownを使用することがあるので
Markdownモードで記事を書いています。

はじめは戸惑うかもしれませんが
慣れてしまえば非常に簡易的にブログ記事が書けるので
Markdownモード以外をご利用の方にも是非オススメしたい次第です。

編集モードの変更方法はこちらから


見出し(h1~h6)

記述方法

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

出力されるHTML

ブログ表示時には以下のようにHTML変換されます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し5</h6>

当ブログでの見た目(ちょっとわかりづらい)

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

リンク

記述方法

[リンクのテキスト](リンクのアドレス "リンクのタイトル")

[No Hack No Life](http://nohack-nolife.hatenablog.com/)

出力されるHTML

<a href="http://nohack-nolife.hatenablog.com/">No Hack No Life</a>

当ブログでの見た目

No Hack No Life


段落と改行

記述方法

文章中で明示的に空行を含めると段落が分かれます。
段落分けではなく文章の途中で改行をする場合は行末にスペースを2個いれる必要があります。

私は今日初めてこの学習院というものの中に這入りました。
[改行]
もっとも以前から学習院は多分この見当だろうぐらいに[半角スペース][半角スペース]
考えていたには相違りませんが、はっきりとは存じませんでした。[半角スペース][半角スペース]
中へ這入ったのは無論今日が初めてでございます。[半角スペース][半角スペース]
[改行]
さきほど岡田さんが紹介かたがたちょっとお話になった通り[半角スペース][半角スペース]
この春何か講演をというご注文でありましたが、[半角スペース][半角スペース]
その当時は何か差支があって、——岡田さんの方が当人の私より[半角スペース][半角スペース]
よくご記憶と見えてあなたがたにご納得のできるように[半角スペース][半角スペース]
ただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。

出力されるHTML

ブログ表示時には以下のようにHTML変換されます。 段落がpタグで囲まれ、改行には<br>が使用されます。

<p>私は今日初めてこの学習院というものの中に這入りました。</p>

<p>もっとも以前から学習院は多分この見当だろうぐらいに<br>
考えていたには相違りませんが、はっきりとは存じませんでした。<br>
中へ這入ったのは無論今日が初めてでございます。</p>

<p>さきほど岡田さんが紹介かたがたちょっとお話になった通り<br>
この春何か講演をというご注文でありましたが、<br>
その当時は何か差支があって、——岡田さんの方が当人の私より<br>
よくご記憶と見えてあなたがたにご納得のできるように<br>
ただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。</p>

当ブログでの見た目

私は今日初めてこの学習院というものの中に這入りました。

もっとも以前から学習院は多分この見当だろうぐらいに
考えていたには相違りませんが、はっきりとは存じませんでした。
中へ這入ったのは無論今日が初めてでございます。

さきほど岡田さんが紹介かたがたちょっとお話になった通り
この春何か講演をというご注文でありましたが、
その当時は何か差支があって、——岡田さんの方が当人の私より
よくご記憶と見えてあなたがたにご納得のできるように
ただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。


引用

記述方法

引用する文の頭に>をつけることで引用文とすることができます。

>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

出力されるHTML

<blockquote>
<p>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。
現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
</p>
</blockquote>

当ブログでの見た目

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。


強調

記述方法

強調を示す場合は、2つの*(アスタリスク)か、_(アンダースコア)で文言を囲みます。

もうすぐ**お昼だ**おなか減ったなー

もうすぐお昼だ__帰りたい__なー

出力されるHTML

もうすぐ<strong>お昼だ</strong>おなか減ったなー

もうすぐお昼だ<strong>帰りたい</strong>なー

当ブログでの見た目

もうすぐお昼だおなか減ったなー

もうすぐお昼だ帰りたいなー

リスト

記述方法

  • ハイフン「-」プラス「+」、アスタリスク「*」を使用(どれでもいい)
  • 記号の直後は、半角スペース または タブが必要
  • リスト内の階層には半角スペース4つ または タブ1つを用いて表現する
* リスト1
* リスト2
    + リスト2-1
    + リスト2-2
* リスト3
    - リスト3-1
    - リスト3-2

出力されるHTML

<ul>
<li>リスト1</li>
<li>リスト2
<ul>
<li>リスト2-1</li>
<li>リスト2-2</li>
</ul>
</li>
<li>リスト3
<ul>
<li>リスト3-1</li>
<li>リスト3-2</li>
</ul>
</li>
</ul>

当ブログでの見た目

  • リスト1
  • リスト2
    • リスト2-1
    • リスト2-2
  • リスト3
    • リスト3-1
    • リスト3-2

番号リスト

記述方法

  • 番号の後にピリオド.をつける
  • ピリオドの直後は、半角スペース または タブが必要
  • リスト内の階層には半角スペース4つ または タブ1つを用いて表現する
  • Markdown中での番号は適当に書いても1から順番に番号が割り当てられる(番号は適当でOK)
1. リスト1
2. リスト2
    1. リスト2-1
    2. リスト2-2
3. リスト3
    3. リスト3-1
    3. リスト3-2

出力されるHTML

<ol>
<li>リスト1</li>
<li>リスト2
<ol>
<li>リスト2-1</li>
<li>リスト2-2</li>
</ol>
</li>
<li>リスト3
<ol>
<li>リスト3-1</li>
<li>リスト3-2</li>
</ol>
</li>
</ol>

当ブログでの見た目

  1. リスト1
  2. リスト2
    1. リスト2-1
    2. リスト2-2
  3. リスト3
    1. リスト3-1
    2. リスト3-2

pre記法

  • ソースコードやHTMLをそのまま表示したい場合に使用する
  • html, css, phpなどなど各言語が表示可能

記述方法(html)

 ```html
 <p>コードがそのまま表示されるよ!</p>
 ```

出力されるHTML

<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>
コードがそのまま表示されるよ!<span class="synIdentifier">&lt;/</span>
<span class="synStatement">p</span><span class="synIdentifier">&gt;</span>
</pre>

当ブログでの見た目

<p>コードがそのまま表示されるよ!</p>

水平線

記述方法

1行の中に、3つ以上のハイフンやアスタリスク・アンダースコアだけを並べると水平線が作られる。

---
***
___

出力されるHTML

<hr>

<hr>

<hr>

当ブログでの見た目




おわりに

以上がMarkdown記法の紹介となります。
慣れるまでは一覧を見ながら書くことになってしまうかもしれませんが
慣れればとてもシンプルに記事を書くことができますので 是非お試し頂ければと思います。