マークダウン記法(Markdown)とは?記述例とプラグインWP Githuber MDの使い方

Webサイト制作
サイト制作
効率化
2020.09.30
2020.10.22

「もっと手早くドキュメントを作成したい!」「HTMLより簡単で効率的な方法はないか?」。それならマークダウン記法を試してみてはいかがでしょうか。本記事では、マークダウン記法の特徴や記述例を踏まえたうえで、より作業が快適になるプラグインとしてWP Githuber MDの使い方を解説します。

マークダウン記法(Markdown)とは?

マークダウン記法とは、誰もが簡単にデジタル文章が作成できるよう、難解なマークアップ言語を簡略化した「記法」です。

HTMLなどの専門的な知識がなくても、「見出し」や「リスト」といった文章構造を手軽に構築できる書き方、と言った方がイメージしやすいかもしれません。

ちなみに、日本語マークダウンユーザー会の公式サイトでは、Markdownについてデジタル文書を活用する方法として考案された「文章の書き方」だと前置きしたうえで、下記の4つを特徴として挙げています。

手軽に文章構造を明示できること

簡単で、覚えやすいこと

読み書きに特別なアプリを必要としないこと

それでいて、対応アプリを使えば快適に読み書きできること

引用:日本語マークダウンユーザー会

「マークダウン」と「マークアップ」の違いとは?

マークダウンとマークアップには、「本質的な違い」と「難易度の違い」があります。

▼本質的な違い

  • マークダウン:マークアップ言語を簡略化した記法
  • マークアップ:HTMLやXMLなど、文章構造を記述するための「デジタル形式言語」

▼難易度の違い

  • マークダウン:専門的な知識が必要でハードルが高い
  • マークアップ:簡単かつ少ない文字数で済むので、初心者でも使いやすい

マークダウンは簡単にデジタル文章が記述できる「記法」の一種、マークアップは専門的な知識が必要な「デジタル形式言語」そのもの、と覚えておきましょう。

マークダウン記法のメリット

マークダウン記法はコンテンツ作成だけでなく、開発ドキュメントやタスクリスト作りにも適しています。

その理由は、下記のようなメリットがあるからです。

▼マークダウン記法のメリット

  • HTMLの表記が簡単になる分、執筆速度が速くなる
  • コピペしてもフォントサイズや見た目が変わらない
  • オンラインでもオフラインでも使えるので、いつでもどこでもブログが書ける
  • 外出中に思い付いたアイディアをサクッとスマホで記述しておける
  • 記述ルールがシンプルかつ統一されているので、誰が見ても理解できる
  • 動作の軽いテキストエディタが使えるので、打ち合せ中でも書きやすい

マークダウン記法の最大のメリットは、書き方ルールのシンプルさと文字数の少なさ!同じ「見出し」でもHTMLと比較するとその差は歴然です。

▼書き方の比較

  • HTML:<h1>見出し1</h1>
  • マークダウン記法:# 見出し1

マークダウン記法のデメリット

一方、マークダウン記法には少なからずデメリットもあります。

とはいえ、複雑なHTMLで記述する苦労に比べれば、さほど大きなデメリットとは言えません。

▼マークダウン記法のデメリット

  • 書き方のルールを覚える必要がある
  • クライアントなど外部と共有する際、Wordなどに清書する手間がかかる

マークダウン記法の記述例9つ

この段落では、よく使うマークダウン記法の記述例をご紹介します。

見出し

「#」と「見出し」の間に、半角スペースを1つ入れましょう。

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

改行

マークダウン記法で改行する方法は、下記の3種類があります。

  • 文末に半角スペースを2つ入れる(HTMLのbr タグに相当)
  • 空白行を1行入れる(HTMLのpタグに相当)
  • 1行目と3行目の間、つまり2行目に「<br>」を記述する

番号なしの箇条書きリスト

ハイフン、プラス、アスタリスクの3種類から1つを選び、半角スペースを入れてから文字を入力します。

  • – リストA
  • – リストB
  • – リストC

番号ありの箇条書きリスト

「ナンバー」+「半角ドット」+「半角スペース」+「テキスト」の順番で記述します。

実際に表示される際には適切な番号に修正されるので、全て「1. テキスト」で記述してもOKです。

  • 1. リストA
  • 2. リストB
  • 3. リストC

太字・斜体の装飾

文字を囲うアスタリスクの数によって装飾が異なります。

  • *斜体*
  • **太字**
  • ***斜体太文字***

リンク

マークダウン記法でリンクを設定するには、[文字列]+(リンクURL)の順番で書きます。

中間に半角スペースは必要ありません。

  • 記述ルール:[文字列](リンクURL)
  • 例題:[ペコプラ公式サイト]( https://pecopla.net/)

引用

引用は「>」の数で表現し、「>」とテキストの間に半角スペースを入れます。

  • 引用:> 引用したい文字
  • 二重引用:>> 二重引用したい文字

コード

グレー背景などを表現したい場合は、「`」バックフォートを使用します。

  • 1行目:` ` `
  • 2行目:ここにコードを表示
  • 3行目:` ` `

id属性、class属性の指定

id属性を指定する際は「{}」の中にシャープを、class属性を指定する際はドットを入力します。

テキストと「{」の間に半角スペースを入れましょう。

  • id:テキスト {#test}
  • class:テキスト {.test}

マークダウンの無料おすすめプラグイン5選

より快適にマークダウン記法を入力するには、入力画面とプレビュー画面が同時に表示されるプラグインの導入がおすすめです。

中でも下記のプラグインは作業画面のUIに定評があり、多くのユーザーから支持されています。

▼Windows・Mac対応の無料エディタ

  • WP Githuber MD
  • Classic Editor
  • Atom
  • Visual Studio Code
  • Haroopad

なお、人気の高かった「JP Markdown」は2020年時点でインストールが停止しています。

一方、Jetpackのように大きすぎるプラグインは機能が多い反面、マークダウン記法のためだけに導入するには不向きかもしれません。

WP Githuber MDを導入する方法

マークダウンのプラグインは多数ありますが、使い勝手の良さとUIの優秀さで言えば「WP Githuber MD – WordPress Markdown Editor」がおすすめです。

この段落では、WP Githuber MDをワードプレスに導入する際の注意点を踏まえたうえで、インストールの手順を解説します。

インストール前の注意点!不具合が起こるプラグインは?

新しいプラグインの追加は、想定外のコンフリクト(相反)を誘発する原因になります。

WP Githuber MDをインストールする時は、あらかじめ不要なプラグインを削除しておきましょう。

特に、上記でご紹介したマークダウンの競合プラグインはWP Githuber MDとの相性が悪く、コンフリクト(相反)を起こして不具合が生じやすいので注意が必要です。

すでに他のMarkdown プラグインを使用している場合は、少なくともWP Githuber MDを「有効」にする前にアンインストールしておきましょう。

また、元々クラシックエディタでTiny MCEプラグインを使用していた場合、ツールバーなどの操作が変更になってしまうようです。

Tiny MCEの使用歴が浅くて操作方法にこだわりがなければ、一旦アンストールしてからWP Githuber MDを追加した方が良いでしょう。

プラグイン「Advanced Custom Fields」と併用する方法

独自でカスタムフィールドを作成している場合、「Advanced Custom Fields」というプラグインを追加している方も多いでしょう。

Advanced Custom Fieldsのデフォルトエディタであれば、WP Githuber MDの使用は可能です。

ただし、wysiwygエディタには対応していません。

インストール方法

WordPressにログインしたら、画面左のダッシュボードから「プラグイン」→「新規追加」と進みます。

右上の検索窓に「Markdown」を入力すると、下記画像のように赤枠で囲っているプラグインが表示されるはずです。

次に、緑色の枠で囲ってある「今すぐインストール」→「有効化」の順でクリックして下さい。

ちなみに、WP Githuber MDプラグインのロゴは2020年時点で新しいデザインに変更されているようです。

WP Githuber MDの設定方法と使い方

では早速、WP Githuber MDを使ってみましょう。

下記画像のようにデフォルト設定のままでも問題なく使用でき、左側の執筆画面と右側のプレビュー画面を比較しながら入力できます。

WP Githuber MDの詳細設定は、基本設定にあたる「Markdown」から環境設定にあたる「Preferences」まで4つのカテゴリーに分かれています。

基本的にはデフォルトのままで問題ありませんが、日本語翻訳で確認しながら必要に応じて設定しましょう。

Enable Markdown

MarkdownのON/OFFを切り替えるボタンです。

  • ON:執筆画面とプレビュー画面の両方が表示される
  • OFF:デフォルトのGutenbergエディタに戻ってしまう

Gutenbergエディタに戻ってから追記した分は、マークダウン記法が失われてHTMLに変換されてしまいます。

HTML to Markdown

HTMLの投稿をマークダウンに変換する機能で、下記のようなケースに適しています。

  • マークダウンで書かれていない既存のコンテンツをマークダウンに変換したい
  • Gutenbergエディタで追記した結果、マークダウン記法が失われた投稿を復活させたい

ただし、WP Githuber MDの導入後に一度HTMLへ変換された場合、必ずしもマークダウンの機能が復活するとは限らないので注意が必要です。

Image Paste

詳細設定の「Modules」に「Image Paste」という項目があります。

これをONにするとクリップボードにコピーした画像を編集画面に貼り付けただけで、自動的に下記のような恩恵が得られるのです。

  • メディアライブラリに追加される
  • リンクと画像のペーストが一度で完了する

まとめ

マークダウン記法は、これからブログを始めようとしている方だけでなく、すでにHTMLを使いこなしている方にとってもおすすめです。

より手軽に活用したいという方は、WP Githuber MDプラグインの導入を検討してみてはいかがでしょうか。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)