WordPressでMarkdown記法が使えるようになるプラグイン「JP Markdown」
「JP Markdown」というWordPressのプラグインを使うと、記事をマークダウン記法で書けるようになります。
マークダウン記法はわりと簡単なので、慣れれば記事の投稿がすごく速くなりそうです。
ブログを長く続けていくためにも、記事を書く作業はできるだけ効率化したいもんです。
目次
Markdownとは
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
Markdown記法に対応したテキストエディタでは、<h1>〜</h1>や、<strong>〜/strong>などのHTMLタグをとても簡単にしてマークアップすることができます。
ボクは、Macアプリの「Day One」という日記アプリで毎日 日記を付けているのですが、このアプリがMarkdown記法に対応しているので、日記を書く際にはMarkdown記法で書くようにしています。
下の画像のように、テキストの頭に「#」を付けたら見出しになったり、ハイフン（-）で箇条書きリストを記述できたりします。
これを普通にHTMLで書くと下記のようになります。
<h2>見出しだよ</h2>
<ul>
<li>リストだよ</li>
<li>リストですよ</li>
<li>リストだぜ</li>
</ul>
ここは<strong>強調</strong>しようかな。
<em>イタリック</em>にしとくか。
<blockquote>引用するぜ。</blockquote>
<hr>
水平線で区切るか。
文章を書くのにHTMLタグを書いていくのはちょっと面倒です。
Markdownの記述方法はシンプルなので、慣れてしまえば効率的に文章が書けます。
閉じタグを書かなくてよいのが特に素敵です。
今回は「JP Markdown」プラグインを使用して、WordPressでもMarkdownを使えるようにしました。
プラグインのインストール
- WordPress管理画面の「プラグイン」→「新規追加」で「JP Markdown」を検索。
- インストールして有効化でOK。
プラグインの設定
設定は特にありません。インストールして有効化するだけで使えます。
コメント欄でMarkdownを使用したい場合は、管理画面の「設定」→「ディスカッション」で、「Use Markdown for comments」にチェックを入れて保存で有効化できます。
使い方
WordPressのビジュアルエディタ上で、Markdown記法でテキストを書くと、自動でHTMLに変換されます。
下の画像は実際に入力した様子です。
エディタのテキストモードでも普通に使用できます。ボクは普段はこっちで書いています。
Markdownの記述方法
よく使いそうな記述方法を一部ご紹介します。
見出し（h1〜h6）
ハッシュ（#）を先頭に書くと見出しになります。ハッシュの数によってhタグの番号が変わります。
Markdown
# h1見出し
## h2見出し
### h3見出し
#### h4見出し
##### h5見出し
###### h6見出し
HTML
<h1>h1見出し</h1>
<h2>h2見出し</h2>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<h5>h5見出し</h5>
<h6>h6見出し</h6>
id、class属性の指定
id、class属性の指定もできます。
Markdown
## idをつける {#title}
## classをつける {.title}
HTML
<h2 id="title">idをつける</h2>
<h2 class="title">classをつける</h2>
リンクの指定（a）
Markdown
<https://www.miso.blog>
[misoblog](https://www.miso.blog)
[misoblog](https://www.miso.blog "misoblog")
HTML
<a href="https://www.miso.blog">https://www.miso.blog</a>
<a href="https://www.miso.blog">misoblog</a>
<a href="https://www.miso.blog" title="misoblog">misoblog</a>
リスト（ul, ol）
Markdown
順不同リスト（ul）
- リスト
- リスト
- リスト
順序付きリスト（ol）
1. リスト
2. リスト
3. リスト
HTML
順不同リスト（ul）
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
順序付きリスト（ol）
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
参考
他にも便利な書き方が沢山ありますので、その他の記法については下記のサイトをご確認ください。
