前置き
以前にも投稿しましたがはてなブログではMarkdownという記法でブログ記事を書くことが可能です。 いまだにはてな公式がMarkdown記法の説明に力を入れていないようなので以前投稿した記事をリファインすることにしました。
はてなブログで記事を書くときには
「見たままモード」「はてな記法モード」「Markdownモード」の
3種類の編集画面（編集モード）を選択できます。
それぞれの違いについては公式ヘルプが参考になります。
https://help.hatenablog.com/entry/editing-mode
私は仕事柄、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](https://no-hack-no-life.hatenablog.com/)
出力されるHTML
<a href="https://no-hack-no-life.hatenablog.com/">No Hack No Life</a>
当ブログでの見た目
画像の埋め込み
記述方法
代替テキストがalt属性で、画像タイトルがtitle属性となります。
  ※タイトル無しの画像を埋め込む   ※画像にタイトルをそえてを埋め込む
出力されるHTML
<img src="https://cdn.profile-image.st-hatena.com/users/Telomere/profile.png" alt="命のロウソク"> <img src="https://cdn.profile-image.st-hatena.com/users/Telomere/profile.png" title="命のロウソクの画像" alt="命のロウソク">
当ブログでの見た目
※タイトル無しの画像を埋め込む
※画像にタイトルをそえてを埋め込む
段落と改行
記述方法
文章中で明示的に空行を含めると段落が分かれます。
段落分けではなく文章の途中で改行をする場合は行末にスペースを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>なー
当ブログでの見た目
もうすぐお昼だおなか減ったなー
もうすぐお昼だ帰りたいなー
リスト
記述方法
- ハイフン「-」プラス「+」、アスタリスク「*」を使用(どれでもいい)
- 記号の直後は、半角スペース または タブが必要
- リスト内の階層には半角スペース４つ または タブ１つを用いて表現する
* リスト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
番号リスト
記述方法
- 番号の後にピリオド
.をつける - ピリオドの直後は、半角スペース または タブが必要
- リスト内の階層には半角スペース４つ または タブ１つを用いて表現する
- Markdown中での番号は適当に書いても１から順番に番号が割り当てられる(番号は適当で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
- リスト2
- リスト2-1
- リスト2-2
- リスト3
- リスト3-1
- リスト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"><</span> <span class="synStatement">p</span><span class="synIdentifier">></span> コードがそのまま表示されるよ！<span class="synIdentifier"></</span> <span class="synStatement">p</span><span class="synIdentifier">></span> </pre>
当ブログでの見た目
<p>コードがそのまま表示されるよ！</p>
水平線
記述方法
1行の中に、3つ以上のハイフンやアスタリスク・アンダースコアだけを並べると水平線が作られる。
--- *** ___
出力されるHTML
<hr> <hr> <hr>
当ブログでの見た目
テーブル
| 左揃え | 右揃え | 中央揃え |
|---|---|---|
| あいうえお | あいうえお | あいうえお |
| かきくけこ | かきくけこ | かきくけこ |
| さしすせそ | さしすせそ | さしすせそ |
記述方法
| 左揃え | 右揃え | 中央揃え | |:-----------|------------:|:------------:| | あいうえお | あいうえお | あいうえお | | かきくけこ | かきくけこ| かきくけこ | | さしすせそ | さしすせそ | さしすせそ |
出力されるHTML
<table> <thead> <tr> <th style="text-align:left;"> 左揃え </th> <th style="text-align:right;"> 右揃え </th> <th style="text-align:center;"> 中央揃え </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> あいうえお </td> <td style="text-align:right;"> あいうえお </td> <td style="text-align:center;"> あいうえお </td> </tr> <tr> <td style="text-align:left;"> かきくけこ </td> <td style="text-align:right;"> かきくけこ</td> <td style="text-align:center;"> かきくけこ </td> </tr> <tr> <td style="text-align:left;"> さしすせそ </td> <td style="text-align:right;"> さしすせそ </td> <td style="text-align:center;"> さしすせそ </td> </tr> </tbody> </table>
案外つかう小技
テーブルの中で改行したい場合は<br>タグを入れてあげれば可能です。
| 左揃え | 右揃え | 中央揃え |
|---|---|---|
| あい 飢え男 |
あい 飢え男 |
あい 飢え男 |
| かきくけこ | かきくけこ | かきくけこ |
| 左揃え | 右揃え | 中央揃え | |:-------|------:|:---------:| | あい<br>飢え男 | あい<br>飢え男 | あい<br>飢え男 | | かきくけこ | かきくけこ| かきくけこ | | さしすせそ | さしすせそ | さしすせそ |
おわりに
以上がMarkdown記法の紹介となります。
慣れるまでは一覧を見ながら書くことになってしまうかもしれませんが
慣れればとてもシンプルに記事を書くことができますので
是非お試し頂ければと思います。
Markdownライティング入門 プレーンテキストで気楽に書こう！ (技術の泉シリーズ（NextPublishing）)
- 作者:藤原 惟
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/12/14
- メディア: Kindle版
考えながら書く人のためのScrivener入門 小説・論文・レポート、長文を書きたい人へ
- 作者:向井 領治
- 出版社/メーカー: ビー・エヌ・エヌ新社
- 発売日: 2016/03/18
- メディア: Kindle版
