旧・中川勉社会保険労務士事務所FPウェブシュフ

【WordPress】ライティングを爆速化！Markdown導入プラグイン2つ＆記法を簡単に紹介

By: Erin Kohlenberg

ブログ記事を書くときにHTMLマークアップで時間をとられる@web_shufuです。そこで、プラグインを使って、Markdown記法を導入しました。簡単な記号をつけるだけで、文書がHTMLに変換されるので楽です。
[toc heading_levels=”2″]

Markdown導入用WordPressプラグイン2選

私が今まで使ったプラグインを列記します。いずれも、ワードプレス管理画面の左サイドバーの「プラグイン」→「新規追加」から、ダウンロード・有効化するだけで使えます。

JetpackのMarkdown機能だけを提供するJP Markdownがイチオシ

現在私が愛用しているのはJP Markdownです。

記法の規則はwordpress.comと同様なので下記を参考にすればいいです。

今のところ何の問題もなく快適に運用できています。

余談ですが、調べてみると、Jetpackの一機能のみを切り売りしているプラグインはJP Markdownの他にもありました。

Jetpackの○○機能だけを使いたい！！という方にはとても便利だと思います。

Jetpackそのものも悪くはない

「jetpack MarkDown」を使う前は、超多機能プラグインくJetpackのMarkdown機能を使っていました。

  • Markdown以外の機能を全く使わないのでオーバースペック。
  • OGP設定に関するHTMLコードを吐き出してくれるのですが、既に自分で設定してあるのでコードが重複してしまう。
  • 自分でテーマファイルに書き込んだコードや、既にインストールしているプラグインと、コンフリクトが起きるかも…

といったような不都合や懸念が出てきたので、JetPackの利用はやめました。

そして、「JetpackのMarkdown機能だけ使うとかできないのかな？」と思ってググっていたら、最初に紹介した「jetpack MarkDown」プラグインが見つかり、愛用するようになりました。

ただ、Markdown以外のJetPackの機能を沢山使いたい人にとって、JetPackは素晴らしいプラグインです。

私は、Markdown機能以外要らなかったので、JetPackが合わなかっただけです。

Markdown対応テキストエディタを使えばさらに便利

プラグインを使えばWordPressのエディタで自由にMarkdown記法が使えます。

しかし私は字を打つだけならWordPressのテキストエディタよりもっと広々としたエディタが好きです。

そんな方におすすめなのがGoogle Chrome 拡張機能LiveMdです。

デフォルトで左側にMakdown/html編集画面、右側にプレビューが表示されます。

入力したテキストはオートセーブされます。

直感的な操作で使えるので私にとっては神ツールです。

2014-10-08_2107

WordPressのエディタ以外にLiveMdも用意しておくととても便利です。

Markdown記法の書き方

Markdown記法は、とても簡単な文法でHTMLをコーディングする仕組みです。

以下にMarkdown記法の基本的な使い方を示しますが、Markdown quick reference|€Support|WordPress.comに則った使い方をしてください。

見出し

Markdownでは、htmlの見出しタグの書式は「#」です。

半角スペースを忘れずに。

ワードプレス投稿編集画面

# 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>

段落

Markdown記法では上下に空白行を作って段落を表現します。

ワードプレス投稿編集画面

これが最初の段落です。これが最初の段落です。これが最初の段落です。

これが2つ目の段落です。これが2つ目の段落です。これが2つ目の段落です。

これが3つ目の段落です。これが3つ目の段落です。これが3つ目の段落です。

HTML出力

<p>これが最初の段落です。これが最初の段落です。これが最初の段落です。</p>

<p>これが2つ目の段落です。これが2つ目の段落です。これが2つ目の段落です。</p>

<p>これが3つ目の段落です。これが2つ目の段落です。これが2つ目の段落です。</p>

wordpressはもともと上下に空白行のあるテキストの集合を段落として扱っていますから、段落の表現についてはMarkdown記法を意識する必要はありません。

引用

Markdownでは引用を以下のようにして表現します。

  • 引用したテキストの集合の上下を空白行で囲み
  • 先頭に「>」を付ける

ワードプレス投稿編集画面

ここはオリジナルです。ここはオリジナルです。ここはオリジナルです。

>ここは引用です。ここは引用です。ここは引用です。ここは引用です。

ここもオリジナルです。ここもオリジナルです。ここもオリジナルです。

HTML出力

<p>ここはオリジナルです。ここはオリジナルです。ここはオリジナルです。</p>

<blockquote>ここは引用です。ここは引用です。ここは引用です。</blockquote>

<p>ここもオリジナルです。ここもオリジナルです。ここもオリジナルです。</p>

ハイパーリンク

Markdownではリンクを以下の形で書きます。

[アンカーテキスト](URL "title属性")

title属性は省略してもかまいません。

ワードプレス投稿編集画面

[ウェブシュフトップページ](https://webshufu.com/)

[ウェブシュフトップページ](https://webshufu.com/ "ウェブシュフトップページ")

HTML出力

<a href="https://webshufu.com/">ウェブシュフトップページ</a>

<a href="https://webshufu.com/" title="ウェブシュフトップページ">ウェブシュフトップページ</a>

番号つきリスト(ol)

Markdownでは番号つきのリストを以下の形で書きます。

  • リストにしたい部分の上下を空白行にする
  • 各リスト項目の先頭に「数字」+「.」+「半角スペース」をつける
  • 数字のふりかたは、1,2,3,4… の連番が基本（実は連番でなくてもいいのですがかえってややこしいです）

ワードプレス投稿編集画面

リスト直前の文章

1. 東京
2. 大阪
3. 名古屋

リスト直後の文章

HTML出力

<p>リスト直前の文章</p>

<ol>
<li>東京</li>
<li>大阪</li>
<li>名古屋</li>
</ol>

<p>リスト直後の文章</p>

番号なしリスト(ul)

Markdownでは番号なしリストを以下の形で書きます。

  • リストにしたい部分の上下を空白行にする
  • 各リスト項目の先頭に（「*」または「+」または「-」）+「半角スペース」をつける

入れ子（ネスト）を表現する場合は、リストの途中で、半角スペースのインデントを入れて記号を変えます。
ワードプレス投稿編集画面

リスト直前の文章

* 東京
 - 千代田
 - 中央
 - 港
* 大阪
 - 北
 - 中央
 - 此花
* 名古屋
 - 中川
 - 中村

リスト直後の文章

HTML出力

<p>リスト直前の文章</p>

<ul>
<li>東京

<ul>
<li>千代田</li>
<li>中央</li>
<li>港</li>
</ul></li>
<li>大阪

<ul>
<li>北</li>
<li>中央</li>
<li>此花</li>
</ul></li>
<li>名古屋

<ul>
<li>中川</li>
<li>中村</li>
</ul></li>
</ul>

<p>リスト直後の文章</p>

コードの表示

コードブロックを表示するには、コードの上下を空白行にしたうえで、コード部分の各行の左側にタブを入れます。（半角スペース4つでも良いです。）

ワードプレス投稿編集画面

　　ソース
　　ソース
　　ソース
　　ソース
　　ソース

HTML出力

<pre><code>ソース
ソース
ソース
ソース
ソース
</code></pre>

テーブル

Markdownならテーブルを作るのも簡単です。説明が長くなるので別エントリで説明しました。

[img-link url=”https://webshufu.com/how-to-make-responsive-tables-in-wordpress/” title=”WordPressでテーブル・表を作成するプラグイン7個まとめ – FPウェブシュフ”]

表のセルの結合やソートなどの複雑の機能は実現できません。しかしCSSをいじれば見た目が綺麗な表組みが作れます。

Markdownの限界

Markdownには上に挙げた以外にも様々なHTMLタグを簡単に書く記法がありますが、限界もあります。

classやidの指定が出来ない

表組みのところでも言いましたが、細かいスタイルシートをあてたりページ内リンクを張ったりする場合は、面倒でもHTMLのタグを書かないといけません。

画像の大きさの指定が出来ない

Markdownには画像の記法もあるのですが、 大きさの指定が出来ません 。

もちろん、クラスやidの指定も出来ないので使い勝手が悪いです。

HTMLの効率的な入力には入力補助ボタン(クイックタグ)の活用も必要

HTMLを楽に入力するためには、Markdownnだけでは少々不足です。

投稿画面の入力補助ボタンを上手く活用しましょう。

[img-link url=”https://webshufu.com/edit-quicktags/” title=”WordPress投稿画面のボタンの使い方、ボタンを追加・削除してカスタマイズする方法 – FPウェブシュフ”]

最後に

以下の記事には大変お世話になりました。

Markdownには多少制約がありますが、見出し、リスト、引用、リンクについては、とても楽に記述できます。

使える場所ではMarkdownをどんどん使っていくことで記事投稿が大幅に効率化できそうな気がします。

投稿日

カテゴリー:

投稿者:

webshufu

　最終更新日:

タグ: