簡単便利に文章作成・Markdown記法 - AdSense実験室

簡単便利に文章作成・Markdown記法

2013-10-04

みなさんWordPressで文章書く時、エディタはビジュアルとテキスト、どちらをお使いですか?
私は余計なタグを勝手に入れられるのはイヤなタイプなので、ビジュアルはまず使いません。いつもテキストで自分でHTMLタグ入れながらゴリゴリ書いてます。

Markdown

そんなんでWordPress使う意味あるの?って感じですが、まあそっちに慣れてしまっているもので。人間、慣れた習慣はなかなか捨てられませんよね。

さて、以前AdSenseの夏休み企画でレゴのサイトをレスポンシブ対応にした時、セミナー会場で「Markdown記法」についてちょっとお話させていただきました。 マークダウンて何だ?って人も多かったかもしれませんが、Markdownてのは先ほどのテキストエディタと同じく、最終的にHTMLの構文をアウトプットするための「文法」です。 WYSIWYGほど至れりつくせりじゃないけど、タグ打ちよりはカンタン。 私にはその絶妙なバランス具合がストライクゾーンど真ん中な感じで、大変気に入ってます。
※ちなみにこのサイトのコンテンツもすべてMarkdownで管理しています。

とにかくまずはサンプルを見ていただきましょう。

ほうれん草のごまあえ

ごまあえのおいしさは、野菜のゆで方で決まります。野菜は、収穫してから時間がたつほど水分が抜けるので、水に浸してみずみずしい状態に戻してからゆでます。

材料(2人分)

  • ほうれん草…1わ
  • しょうゆ…小さじ1

A.調味料

白すりごま 砂糖 しょうが
大さじ4 大さじ1 小さじ1
  1. ほうれん草は根元を冷水に15~30分つけて、ピンとさせる。
  2. 鍋にたっぷりの湯を沸かし、ほうれん草2~3株を根元から入れる。茎がしんなりしたら葉も入れて5~10秒ゆでる。
  3. 2を取り出して冷水にとる。こうすると色鮮やかに仕上がる。残りも同様にゆでて冷水にとる。
  4. 3の根元をそろえて水けをギュッと絞る。3cm長さに切ってボウルに入れ、しょうゆを加えてよくもみ、もう一度汁けを絞る。しょうゆであえることで余分な水分が出る。
  5. 別のボウルにAの材料を入れて混ぜ、4を加えてあえる。

こんな文章があったとします。HTMLではどうなっているかというと、

<h1>ほうれん草のごまあえ</h1>
<p>ごまあえのおいしさは、野菜のゆで方で決まります。野菜は、収穫してから時間がたつほど水分が抜けるので、水に浸してみずみずしい状態に戻してからゆでます。</p>
<p><strong>材料(2人分)</strong></p>
<ul>
  <li>ほうれん草…1わ</li>
  <li>しょうゆ…小さじ1</li>
</ul>
<p><strong>A.調味料</strong></p>
<table>
  <thead>
    <tr>
      <th>白すりごま</th>
      <th>砂糖</th>
      <th>しょうが</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>大さじ4</td>
      <td>大さじ1</td>
      <td>小さじ1</td>
    </tr>
  </tbody>
</table>
<ol>
  <li>ほうれん草は根元を冷水に15~30分つけて、ピンとさせる。</li>
  <li>鍋にたっぷりの湯を沸かし、ほうれん草2~3株を根元から入れる。茎がしんなりしたら葉も入れて5~10秒ゆでる。</li>
  <li>2を取り出して冷水にとる。こうすると色鮮やかに仕上がる。残りも同様にゆでて冷水にとる。</li>
  <li>3の根元をそろえて水けをギュッと絞る。3cm長さに切ってボウルに入れ、しょうゆを加えてよくもみ、もう一度汁けを絞る。しょうゆであえることで余分な水分が出る。</li>
  <li>別のボウルにAの材料を入れて混ぜ、4を加えてあえる。</li>
</ol>ルにAの材料を入れて混ぜ、4を加えてあえる。</li>

HTMLだとこんな感じ。
これをMarkdownで書くとこう↓なります。

# ほうれん草のごまあえ

ごまあえのおいしさは、野菜のゆで方で決まります。野菜は、収穫してから時間がたつほど水分が抜けるので、水に浸してみずみずしい状態に戻してからゆでます。

**材料(2人分)**

* ほうれん草…1わ
* しょうゆ…小さじ1

**A.調味料**

白すりごま|  砂糖  |しょうが
----------|--------|-------
  大さじ4 |大さじ1|小さじ1

1. ほうれん草は根元を冷水に15~30分つけて、ピンとさせる。
2. 鍋にたっぷりの湯を沸かし、ほうれん草2~3株を根元から入れる。茎がしんなりしたら葉も入れて5~10秒ゆでる。
3. 2を取り出して冷水にとる。こうすると色鮮やかに仕上がる。残りも同様にゆでて冷水にとる。
4. 3の根元をそろえて水けをギュッと絞る。3cm長さに切ってボウルに入れ、しょうゆを加えてよくもみ、もう一度汁けを絞る。しょうゆであえることで余分な水分が出る。
5. 別のボウルにAの材料を入れて混ぜ、4を加えてあえる。

なんかフツーのテキストみたいですね。でもそこがミソです。 Windowsのメモ帳みたいな、ごく普通のテキストエディタさえあればすぐにMarkdownで書けちゃう。その手軽さがいいんです。

スポンサーリンク

見出し

Markdownではテキストの先頭の「#」はh1タグに変換されます。
「##」だとh2。「###」だとh3に。

# 見出し1
## 見出し2
### 見出し3

見出し1

見出し2

見出し3

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

強調

語句をアスタリスク2つで囲むと強調表示になります。

もっと**強調**するには

もっと強調するには

<p>もっと<strong>強調</strong>するには</p>

リスト

アスタリスクで始まる文章は「箇条書き」に。

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

▼画面表示

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

▼HTML

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

数字+ピリオドで始まる文章は「番号付きリスト」になります。

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

▼画面表示

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

▼HTML

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

テーブル

テーブル(表)だってできちゃいます。

名前  |色|評価
------|--|-----
バナナ|黄|◎
りんご|赤|○
ぶどう|紫|△
名前 評価
バナナ
りんご
ぶどう
<table>
  <thead>
    <tr>
      <th>名前</th>
      <th></th>
      <th>評価</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>バナナ</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>りんご</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>ぶどう</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

いかがでしたか?
Markdownの機能の、ほんの一部をかけ足でご紹介しましたが、その便利さがうまく伝わったでしょうか。
いまご覧のこのサイトはGoogleAppEngineをベースに、PythonでオリジナルCMSを構築してコンテンツ管理しているのですが、そういうちょっとした簡易CMSを構築するとき、文章投稿用のテキストエディタとしてMarkdownはたいへん重宝します。 WordpressでもプラグインでMarkdownが使えたりしますので、興味のある方は一度お試し下さい。

スポンサーリンク