ブログの下書きにはMarkdown(マークダウン記法)がオススメ!

「ブログの下書きって何に書いてますか?」

私はこれまで、ブログの投稿画面に直接書いて、下書き状態にしていました。

個人的にもブログを書くので、ライブドアブログ、FC2ブログ、アメーバブログと書いてきましたが、各ブログの投稿画面に下書きしていました。

しかし、私はMSENに入社してから Markdown(マークダウン記法) という書き方を教えてもらいました。

「なんて楽なんだ…」

それからというもの、ブログの下書きは Markdown で作成する様になりました。

という事で、今回は Markdown の書き方を記載していきます。

マークダウン記法とは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Wikipediaから引用

簡単に言うと、マークダウン記法のルールで書くと、自動的にHTMLに変換してあげるよ~という事です。

最近はマークダウン記法に対応したサービスも多くなってきたので、簡単なメモを取る時もマークダウン記法で書いておくと、見やすくなるので整理がしやすいです。

まぁ難しい事は置いといて、マークダウン記法の書き方を見ていきましょう。

段落と改行

段落は空白行を入れます。
厳密には1行以上の空白行で挟まれた範囲が段落になります。

改行しただけでは段落は分けられません。

Markdown

今日はいい天気ですね。

そうですね。
お出かけ日和ですね。

実際に表示される形

今日はいい天気ですね。

そうですね。お出かけ日和ですね。

出力されるHTMLタグ

<p>今日はいい天気ですね。</p>

<p>そうですね。お出かけ日和ですね。</p>

もし段落内で改行したい場合は、改行したい末尾に半角スペースを2つ書きます。

Markdown

今日はいい天気ですね。

そうですね。  ←半角スペース2個
お出かけ日和ですね。

実際に表示される形

今日はいい天気ですね。

そうですね。
お出かけ日和ですね。

出力されるHTMLタグ

<p>今日はいい天気ですね。</p>

<p>そうですね。<br>
お出かけ日和ですね。</p>

見出し

見出しを設定したい箇所に # を書きます。

# の後は必ず半角スペースが必要です。

# の数が見出しのレベルになります。最大6個まで設定可能。

見出しのデザインは、文章を作成する媒体(ブログ等)によって違います。標準でも文字の大きさは変わると思いますが、見出しのデザインを変更したい場合は、見出しに対してのCSSを編集します。

Markdown

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

実際に表示される形

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

出力されるHTMLタグ

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

箇条書きリスト

箇条書きリストにしたい行頭に、アスタリスク( * )を書きます。

* の後は必ず半角スペースが必要です。

階層にする場合は、半角スペース2個を行頭前に書きます。

半角スペース2個では階層にならないシステムもあります。
その場合は、半角スペース4個を行頭前に書いてください。

Markdown

* リスト1
* リスト2
  * リスト2-1
  * リスト2-2
* リスト3

実際に表示される形

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

出力されるHTMLタグ

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

番号付きリスト

番号付きリストにしたい箇所に、数字とピリオドを書きます。

番号付きリストの形になっていれば数字は自動的に振られます。

数字とピリオドの後は必ず半角スペースが必要です。

階層にする場合は、半角スペース2個を行頭前に書きます。

半角スペース2個では階層にならないシステムもあります。
その場合は、半角スペース4個を行頭前に書いてください。

Markdown

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

実際に表示される形

  1. 番号付きリスト1
    1. 番号付きリスト1_1
    2. 番号付きリスト1_2
  2. 番号付きリスト2
  3. 番号付きリスト3

出力されるHTMLタグ

<ol>
<li>番号付きリスト1<ol>
<li>番号付きリスト1_1</li>
<li>番号付きリスト1_2</li>
</ol>
</li>
<li>番号付きリスト2</li>
<li>番号付きリスト3</li>
</ol>

引用

引用表示にしたい箇所に > を書きます。

> の後は必ず半角スペースが必要です。

Markdown

> こんにちは。今日もいい天気ですね。

実際に表示される形

こんにちは。今日もいい天気ですね。

出力されるHTMLタグ

<blockquote>
<p>こんにちは。今日もいい天気ですね。</p>
</blockquote>

二重引用

引用したい箇所に > で書いた後に、二重引用したい箇所に >> を書きます。

> や >> の後は必ず半角スペースが必要です。

Markdown

> こんにちは。今日もいい天気ですね。
>> そうですね。でも明日は雨ですよ。

実際に表示される形

こんにちは。今日もいい天気ですね。

そうですね。でも明日は雨ですよ。

出力されるHTMLタグ

<blockquote>
<p>こんにちは。今日もいい天気ですね。</p>
<blockquote>
<p>そうですね。でも明日は雨ですよ。</p>
</blockquote>
</blockquote>

強調

強調したい箇所の前後に ** を書きます。

Markdown

こんにちは。今日も**いい天気**ですね。

実際に表示される形

こんにちは。今日もいい天気ですね。

出力されるHTMLタグ

<p>こんにちは。今日も<strong>いい天気</strong>ですね。</p>

水平線

水平線を引きたい箇所に *** を書きます。

Markdown

***

実際に表示される形


出力されるHTMLタグ

<hr>

リンク

リンクにしたい箇所に [文章](URL) を書きます。

残念ながら別窓で開く target=”_blank” は設定できません。

Markdown

[ググれ](https://www.google.co.jp/)

実際に表示される形

ググれ

出力されるHTMLタグ

<p><a href="https://www.google.co.jp/">ググれ</a></p>

コード

コードとして表示したい箇所を `(バッククオート)を3つで挟みます。

Markdown

 ```
 <span style="color:red;">あか</span>
 ```

実際に表示される形

<span style="color:red;">あか</span>

まとめ

個人的によく使用するマークダウン記法はこんなところですかね。

もちろん、この記事も紹介したマークダウン記法のみで書いています。

他にも Markdown Extra や GitHub Flavored Markdown(GFM) という拡張的な書き方もあり、テーブル作成やURLの自動リンク等がサポートされています。マークダウン記法は簡易的に使うこと多いので、あまり使いませんが、また別の記事で紹介できたらなと思います。

じゃあ、何(どのテキストエディタ)にマークダウン記法で書けばいいの?となると思いますが、私は ATOM を使用しています。

ATOM は標準で Markdown に対応していて、さらにリアルタイムで表示してくれるビュアーも標準装備されているので、次回の記事で使い方を紹介したいと思います。

あゆとの雑談部屋

今週の休みは家族4人(嫁 + 4歳娘 + 1歳娘)で レゴランド・ディスカバリー・センター大阪に遊びに行ってきました。

レゴランド・ディスカバリー・センター大阪
https://www.legolanddiscoverycenter.jp/osaka/

事前に色々と調べてから行ったのですが、思ったより子供寄りの施設でした。

アトラクション中心の作りになっているので、大人は2時間程度で暇になってしまいますw
間違えても、大人だけで入ってはいけません。

まぁ子供達はものすごく楽しんでいたので結局4、5時間滞在しちゃいましたが。

レゴランド

個人的にはマスター・ビルダー・アカデミーが一番楽しかったですね。

プロのビルダーから作り方を教えてもらえる教室です。

今回はハチを作りました。毎月お題は変わるそうです。

マスタービルダーアカデミー

ハチの制作対象年齢は6歳だったんですが、4歳の娘はしっかり作っていました。

普段から家でレゴに触れているからですかね。(親バカ)

作り終わった後は認定書を貰え、それをレジに持って行くと、今回作ったレゴのパーツセットを500円で買う事ができます。

やっぱり大人も子供もレゴを触るのはすごく楽しいので、もっと作り方やテクニックを教えてくれる施設が多いと嬉しいな~。

場内は写真&動画撮影がほぼ可能なので、子供との思い出作りには良い施設でした。

さすがに年間パスポートにアップグレードする勇気はありませんでしたが…

SNSでもご購読できます。

コメントを残す

*