ワードプレスやブログ運営に役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

JP Markdown - マークダウン記法で記事が書けるWordPressプラグイン

このエントリーをはてなブックマークに追加

記事公開 2015.12.05

最終更新 2017.01.07

JP Markdownは、WordPressの記事をマークダウン記法で書くことができるプラグインです。テキストエディタを利用して記事を書く際に、少ない労力でHTMLを記述できます。上手く活用すると、記事作成の効率化に役立ちます。

このプラグインは、Jetpackからマークダウン機能のみを抜き出しています。機能や記法は、Jetpackに搭載されているものと同じです。

マークダウンの記述方法は、非常にシンプルで簡単です。少し癖がある記述方法ですが、一度慣れてしまえば、効率的に記事が書けるようになるので活用しましょう。

はじめに

このプラグインが優れている点

  1. WordPressの記事がマークダウン記法で書ける。記事作成の効率化に役立つ。
  2. テキストエディタを利用して記事を書く際に、少ない労力でHTMLを記述できる。
  3. Jetpackからマークダウン機能のみを抜き出したプラグイン。他の余計な機能が一切無い。
  4. プラグインを有効化するだけで機能を利用できる。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「JP Markdown」で検索
  2. WordPress.org からダウンロード

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

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

参考

ウィキペディア – Markdown

プラグインの使い方

テキストエディタに下記コードのように記述すると、自動的にHTMLに変換されます。特に、見出し(H1〜H6)、箇条書き(UL、OL)を書くのに役立ちます。

サンプルコードを用意しました。コピー&ペーストして自分のサイトで試してみてください。

実際に動作する見本

下記サンプルコードをテストサーバーの記事に投稿しています。実際に出力されるHTMLをご確認ください。

JP Markdownを利用して書いた記事

記事に入力する内容

***
## 見出し(H1〜H6)
シャープ(#)を先頭に記述すると見出しになります。

# 見出し H1
## 見出し H2
### 見出し H3
#### 見出し H4
##### 見出し H5
###### 見出し H6

***
## テキストの装飾
アスタリスク(*)、アンダーバー(_)でテキストを囲むと文字を装飾できます。

*テキストを強調する(EM)*
_テキストを強調する(EM)_

**テキストを太字にする(STRONG)**
__テキストを太字にする(STRONG)__

***
## 箇条書きリスト(UL)
アスタリスク(*)、ハイフン(-)、プラス(+)を先頭に記述すると箇条書きになります。

* リスト
* リスト
   * リスト
   * リスト
      * リスト
      * リスト
   * リスト
* リスト

***
## 数字の箇条書きリスト(OL)
数字、ドット(.)を先頭に記述すると数字の箇条書きになります。

1. リスト
1. リスト
   1. リスト
   1. リスト
      1. リスト
      1. リスト
   1. リスト
1. リスト

***
## 引用(BLOCKQUOTE)
文章の先頭に大なり記号(>)を記述すると引用になります。

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

***
## リンク(A)

テキストに[リンク](http://netaone.com/ "ネタワン")を設定できます。

***
## 複数のリンクをまとめて記述する

検索エンジンといえば、[Google][1] と [Yahoo!JAPAN][2] が定番ですが、[Bing][3] のことも時々思い出してやってください。

[1]: http://www.google.co.jp/ "グーグル"
[2]: http://www.yahoo.co.jp/ "ヤフー"
[3]: http://www.bing.com/ "Bing"

***
## 脚注
記事下に補足を挿入できます。

Markdown(マークダウン)[^1]記法を利用すると、記事作成を効率化[^2]できます。

[^1]: Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。(Wikipediaより)
[^2]: 全ての場合において効率化になるわけではありません。自分で試して、役立つようであれば活用してください。

***
## 略語(ABBR)
略語を利用する場合に正式名称を表示できます。

このプラグインはテキストをHTMLに自動変換します。
*[HTML]: HyperText Markup Language

***
## 水平罫線(HR)
ハイフン(*)、アンダーバー(_)、ハイフン(-)を3連続で記述すると水平の罫線になります。

***
___
---

自動変換後のHTMLソース

<hr />
<h2>見出し(H1〜H6)</h2>
<p>シャープ(#)を先頭に記述すると見出しになります。</p>
<h1>見出し H1</h1>
<h2>見出し H2</h2>
<h3>見出し H3</h3>
<h4>見出し H4</h4>
<h5>見出し H5</h5>
<h6>見出し H6</h6>

<hr />
<h2>テキストの装飾</h2>
<p>アスタリスク(*)、アンダーバー(_)でテキストを囲むと文字を装飾できます。</p>
<p><em>テキストを強調する(EM)</em><br />
<em>テキストを強調する(EM)</em></p>
<p><strong>テキストを太字にする(STRONG)</strong><br />
<strong>テキストを太字にする(STRONG)</strong></p>

<hr />
<h2>箇条書きリスト(UL)</h2>
<p>アスタリスク(*)、ハイフン(-)、プラス(+)を先頭に記述すると箇条書きになります。</p>
<ul>
<li>リスト</li>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</li>
<li>リスト</li>
</ul>
</li>
<li>リスト</li>
</ul>

<hr />
<h2>数字の箇条書きリスト(OL)</h2>
<p>数字、ドット(.)を先頭に記述すると数字の箇条書きになります。</p>
<ol>
<li>リスト</li>
<li>リスト
<ol>
<li>リスト</li>
<li>リスト
<ol>
<li>リスト</li>
<li>リスト</li>
</ol>
</li>
<li>リスト</li>
</ol>
</li>
<li>リスト</li>
</ol>

<hr />
<h2>引用(BLOCKQUOTE)</h2>
<p>文章の先頭に大なり記号(>)を記述すると引用になります。</p>
<blockquote><p>
  Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書から<abbr title="HyperText Markup Language">HTML</abbr>を生成するために開発された。
</p></blockquote>

<hr />
<h2>リンク(A)</h2>
<p>テキストに<a href="http://netaone.com/" title="ネタワン">リンク</a>を設定できます。</p>

<hr />
<h2>複数のリンクをまとめて記述する</h2>
<p>検索エンジンといえば、<a href="http://www.google.co.jp/" title="グーグル">Google</a> と <a href="http://www.yahoo.co.jp/" title="ヤフー">Yahoo!JAPAN</a> が定番ですが、<a href="http://www.bing.com/" title="Bing">Bing</a> のことも時々思い出してやってください。</p>

<hr />
<h2>脚注</h2>
<p>記事下に補足を挿入できます。</p>
<p>Markdown(マークダウン)<sup id="fnref-203-1"><a href="#fn-203-1" rel="footnote">1</a></sup>記法を利用すると、記事作成を効率化<sup id="fnref-203-2"><a href="#fn-203-2" rel="footnote">2</a></sup>できます。</p>

<hr />
<h2>略語(ABBR)</h2>
<p>略語を利用する場合に正式名称を表示できます。</p>
<p>このプラグインはテキストを<abbr title="HyperText Markup Language">HTML</abbr>に自動変換します。</p>
<hr />
<h2>水平罫線(HR)</h2>
<p>ハイフン(*)、アンダーバー(_)、ハイフン(-)を3連続で記述すると水平の罫線になります。</p>

<hr />
<hr />
<hr />

MEMO

  1. マークダウン記法は、普通のHTMLと併用できます。画像やリンクなどは普通のHTMLで記述しても問題ありません。
  2. Syntax highlighting はプラグインなどを利用して管理した方が良いかもしれません。

他にも機能が沢山あります

マークダウン記法は、他にも機能が沢山あります。全ては紹介しきれないので、役立ちそうな機能のみ紹介しています。その他の機能は下記サイトの情報をご確認ください。

参考

Markdown quick reference(英語)

プラグインの設定

インストールするだけで利用できる

マークダウン機能は、プラグインをインストールして有効化するだけで利用できます。設定などはありません。

コメント欄でマークダウンを利用する場合

もし、記事のコメント欄でマークダウン記法を利用したい場合は、ディスカッションの設定画面で機能を有効化させてください。

管理画面の場所

WordPress管理画面 > 設定 > ディスカッション

ディスカッション

ディスカッション

まとめ

JP Markdownは、WordPressの記事をマークダウン記法で書くことができるプラグインです。テキストエディタを利用して記事を書く際に、少ない労力でHTMLを記述できます。上手く活用すると、記事作成の効率化に役立ちます。

マークダウンの記述方法は、非常にシンプルで簡単です。少し癖がある記述方法ですが、一度慣れてしまえば、効率的に記事が書けるようになります。

マークダウン記法は、ウィキペディアのような「用語集サイト、情報解説サイト、情報データベース」などを運用する際に役立ちます。文章量が多いサイトを更新するのに最適です。非常に役立つプラグインなので活用しましょう。

スポンサーリンク

最後までお読み頂きありがとうございます

ネタワンは皆様の善意に支えられています。
この記事の内容が役に立ったと思ったら、記事をソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ネタワンを購読する

  • Twitter
  • Facebook
  • Google Plus
  • Feedly
  • RSS
  • Push7

初心者向け

WordPress使い方ガイド
WordPress入門

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

MAG(TCD036)

WordPressテーマ「MAG(TCD036)」

ハイクオリティーな人気ブログを構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら