コワーキングスペース7F アルバイトスタッフ・インターンシップ・正社員スタッフ募集
シェアオフィス6F
貸会議室6F

こんにちは!スタッフのめぐみです。みなさん、WordPressで記事を更新する時、どんな風に書いていますか?私は Markdown 記法というものを使って書いています。知っている方も多いと思いますが、もし知らない!という方は試しに導入されてみてはいかがでしょうか。

Markdown とは

書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(英語版)により作成された。アーロン・スワーツも大きな貢献をしている。Markdown の記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

Wikipedia より引用

・・・まだちょっとピンと来ませんね。

Markdown についてもう少しわかりやすく説明してくれているサイトはないものかと探していたところ、日本語 Markdown ユーザー会というサイトを見つけました。こちらも見てみましょう。

Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。

特徴は、

  • 手軽に文章構造を明示できること
  • 簡単で、覚えやすいこと
  • 読み書きに特別なアプリを必要としないこと
  • それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。

Markdownとは – 日本語 Markdown ユーザー会より引用

ここまでを簡単にまとめると、Markdown 記法は、「文章構造を手軽に明示できる、文章の書き方」という感じでしょうか。私が便利だな―と思っているのはこの点です。

文章中には段落、見出し、箇条書き、強調、引用といったものがありますが、こうした文章中における「構造」を明示することで読みやすく、理解しやすいものになります。特に Web において、文章構造が明示された HTML 文書は読み手(=人間)にとって理解しやすいものになるだけではなく、検索エンジン(=機械)にとっても理解しやすいものとなり、文章の意味に沿った処理や出力がしやすくなります。具体的には音声ブラウザや点字ブラウザなど、視覚以外の情報への適切な変換などがありますが、詳しくはクローラビリティとインデクサビリティの確保という記事を参考にしてください。HTML の代わりとして使える Markdown は、WordPress で記事を書く時にとても重宝します。

WordPress で Markdown を有効化する方法

WordPress で Markdown を使えるようにするには、Jetpack の設定画面で有効化をするだけです。有効化さえしておけば、Markdown で書いたものが記事更新時にはちゃんと HTML に変換されるようになります。念のため、設定方法を以下に載せておきます。もし Jetpack がインストールされていない・・・!という方は、是非インストールしてみることをオススメします。他にも便利な機能がたくさんありますよ。

  1. Jetpack の[設定]をクリック

    Jetpack の[設定]をクリック

  2. Markdown を有効化

    Markdown を有効化

はい、これであなたの WordPress で Markdown が使えるようになりました!簡単ですね。

Markdown の書き方

WordPress で Markdown が使えるようになったところで、実際に書いてみましょう。ということで、ここからは具体的な Markdown の書き方を紹介していきます。

見出しは #(シャープ)をつける

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

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

HTML だといちいちタグをつけないといけませんが、 Markdown を使うとこんなにシンプルになります。

箇条書きは – (ハイフン)を使う

<h1>欲しいものリスト</h1>
<ul>
  <li>技術</li>
  <li>お金</li>
  <li>時間</li>
</ul>

# 欲しいものリスト

- 技術
- お金
- 時間

HTML だとまずは ul でくくって、それから li でくくって・・・と面倒くさがりな私には少々辛いです。でも Markdown だと上記のように – を頭につければ OK です。ちなみに番号つきリストの場合は以下のようになります。例として私が好きな人達を順番に並べてみました。

<h1>好きなバンドランキング</h1>
<ol>
    <li>Talking Heads</li>
    <li>Cocteau Twins</li>
    <li>Belle and Sebastian</li>
    <li>Dirty Projectors</li>
    <li>The White Stripes</li>
</ol>

# 好きなバンドランキング

1. Talking Heads
2. Cocteau Twins
3. Belle and Sebastian
4. Dirty Projectors
5. The White Stripes

ここからは駆け足で紹介

ひとつひとつ説明すると記事がながーーーくなってしまうので、よく使うであろうものをいくつかまとめて紹介していきます。

# リンク

(7F のサイト)[http://office7f.com]

# 引用

> 吾輩は猫である。名前はまだない。

# 強い重要性を表したい時(HTML だと strong タグですね)

これは**重要**です。

# 画像

![ここに alt 属性を入れます](ここに画像のソースを入力します)

ここで紹介していない書き方については、開発者である John Gruber のサイトで確認することができます。こちらが公式のドキュメントになるので、書き方で迷ったりした場合は参考にしてください。

Markdown で書くときの注意点

とてもシンプルな Markdown ですが、いくつか注意点があります。

  1. 記号の後ろには必ず半角スペースを置く(でないと正しく変換されません)
  2. ビジュアルエディタではなく、テキストエディタを使う
  3. 段落は空行にすること(特に見出しの場合、空行しないと変換されません)

便利なアプリやジェネレーター

最後に、Markdown 関連のアプリやジェネレーターを紹介して記事を締めくくりたいと思います。

MacDown

Markdown の記述に特化した、無料のアプリ(エディタ)です。ただし、残念ながら Mac のみの対応です。実際の画面はこんな感じです。

MacDown のスクリーンショット

左側が編集画面、右側が出力時のプレビュー画面になります。もちろんリアルタイムで確認することができます。出力時のスタイルは、デフォルトでは GitHub 風になっており、シンプルで見やすいですね。設定で編集画面とプレビュー画面それぞれのスタイル(テーマ)を変えることもできます。

また、嬉しいことに HTML と pdf ファイルにエクスポートできる機能があります。ちなみに Markdown で書いた時のファイルの拡張子は .md となります。

ダウンロードはこちらから!MacDown The open source Markdown editor for OS X.

to-markdown

to-markdown のスクリーンショット

to-markdown は、HTML を Markdown に変換してくれるジェネレーターです。こちらもリアルタイムプレビューで確認することができます。

いかがでしたでしょうか?便利な Markdown、是非試してみてくださいね!きっと記事更新が捗ることと思います。それでは皆様楽しい WordPress & Markdown ライフを〜。

スポンサーリンク

スポンサーリンク

この記事を書いた人

普段はフリーランスのWebデザイナーをしています。仕事以外ではWordPress系コミュニティでも活動中です。WordCamp Tokyo 2015 の Web制作チームリーダーをしたり、WordBench東京や埼玉でも顔を出しています。7FのWordPressもくもく会にもアドバイザーとして参加していますよ!EXPという共著ブログのメンバーとしても記事を時々書いているので、よかったら覗いてみてください。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索