WordPressはMarkdown記法も試してみて！速く書けて表も簡単に入れられるよ

ブログ運営3年目の卯野ハンナです。

はてなブログのころからMarkdownモードを利用しているので、WordPressに移行してからもMarkdown記法以外で記事を書こうと思ったことはありません。

いまだにWordPressの標準エディタであるGutenberg(グーテンベルク)を使ったことがありません(苦笑)

Markdown記法を使う理由としては、特別な知識がなくても少しの記号を覚えるだけで、記事の執筆がスムーズになることと、表が簡単に挿入できるところです。

そして右側に表示されるリアルタイムプレビュー機能がとても便利です。

しかしMarkdown記法はたくさんの装飾にはむいていません。

ですからMarkdown記法はシンプルな文章をさくさく書きたい人におすすめです。

↓この記事でお伝えする内容

• WordPressでMarkdownを利用する方法
• Markdownのメリット
• 一押しプラグイン「WP Githuber MD」

WordPressでMarkdownを利用する方法

WordPressでMarkdownを使うには主に3つの方法が考えられます。

1. Markdownで記事の執筆ができるプラグインを使う
2. WordPressの標準エディタであるGutenbergでMarkdownを書く
3. 別のMarkdownエディタで下書きし、WordPressにコピペしてはりつける

Markdownで記事の執筆ができるプラグインを使う

Markdown記法が使えるプラグインはいくつかあります。

代表的なものがこちら

• Jetpack
• Markdown Editor
• WP Editor.md
• WP Githuber MD

今は「WP Githuber MD」を使っています。

「WP Githuber MD」を選んだ理由は、余計な機能がなく設定も直感的に使える点です。

余分な機能が多かったり、ずっとバージョンアップされていなかったり、WordPressのアップグレードでうまく動かなかったりした中で、WP Githuber MDは変わらず使えているので愛用しています。

WordPressの標準エディタであるGutenbergでMarkdownを書く

実は標準エディタであるGutenbergはMarkdownにも対応しています。

Gutenbergで「## 」「＊＊テキスト＊＊」とMarkdownのコードを入れてプレビューされたページを見ると、しっかりと見出しや太字になっています。

しかし、すでにMarkdownのリアルタイムプレビューやブロック分けのないエディタに慣れてしまうと、うまく使いこなせませんでした。

といいますか、プラグインを入れた方が早く文章が書けます(苦笑)

別のMarkdownエディタで下書きし、WordPressのテキストモードに貼り付ける

ダウンロードでも、オンラインで使えるタイプでも、Markdownエディタはたくさん存在しますね。

一度これらのMarkdownエディタで下書きし、HTMLをコピーしてGutenbergに貼り付けるのも有効です。

オンラインで利用できるMarkdownエディタ（無料）

• StackEdit
• Dillinger
• Marxico

私の場合はプラグインの「WP Githuber MD」に慣れてしまったので、結局プラグインを使って書いています。

Markdownのメリット！単語登録と最小限の記号を覚えれば記事がさくさく書けちゃう！

Markdownはシンプルな文章を早く書きたい方におすすめとお伝えしましたが、ある程度は文章の装飾ができます。

↓ 私がよく使う装飾

• 見出し
• 太字
• 文字の大きさを変える
• リスト
• 引用
• ボックス
• 文字の色を変える
• マーカー表示
• リンク　過ぎし子育ての日々はほぼ笑い話
• 画像の挿入
• 表

Markdownの良いところは、Markdown特有の記号だけではなく、HTMLのコードもあわせて記述できるところです。

ですから私の場合は見出しの「#」は使いますが、文字の色や大きさを変えたり、ボックスや画像を挿入したりするときはHTMLコードを使っています。

「HTMLコードって面倒くさいじゃないの？」と思われるかもしれませんが、ここを単語登録してしまえば、本当に簡単です。

実際に単語登録しているリスト（一例）

※表示されないので、大なり「＞」小なり「＜」を全角にしています

ほんの一例です。50個くらい登録していますが、自分で単語登録した分覚えやすいです。

ツールバーも使えるからコードのすべてを覚える必要なし

「#」「**」「> 」「- 」など、いくつかMarkdownでよく使うコードがありますが、ツールバーも使えるので、すべてを覚える必要はありません。

Markdownの記号は覚えていますが、実際は単語登録を多用しているのでそれほど多くは使っていません。

さらに実際に文章を打ち込んでいると、半角に切り替えるのも面倒な作業になってくるので、単語登録はとてもおすすめです。

「WP Githuber MD」一押しプラグイン

WordPressでMarkdownを使えるプラグインはいくつかありますが、私は「WP Githuber MD」を使っています。

リアルタイムプレビュー機能搭載と設定が直感的であることが決め手です。

初期設定のままでも使えるので、MarkdownやHTMLについて知識がない方でも、使いやすいと思います。

「WP Githuber MD」のインストール方法

プラグインの新規追加で検索できますので、インストールは簡単です。

WordPressのダッシュボード
　↓
プラグイン
　↓
上部の「新規追加」ボタンをクリック
　↓
右側のプラグインの検索欄に「WP Githuber MD」と入力（「Markdown」でも出てきます）
　↓
「今すぐインストール」をクリック
　↓
「有効化」をクリック

これで投稿ページを新規に追加すると、Markdownで書けるようになります。

左側が直接文字や記号を入力するスペースで、右側がリアルタイムプレビューです。

「WP Githuber MD」の設定

初期設定のままでも使えますが、おもしろい機能があったのでご紹介します。

設定画面は英語です。私は日本語に翻訳したり、Google翻訳で確認したりして設定しています。

設定画面のメタボックス内のスイッチを切り替えると、投稿エディタの下やサイドにボタンが表示されます。

「HTML-to-Markdown」をONにすると、古い投稿をMarkdownモードに変換するボタンが表示されます。

「マークダウンエディタースイッチャー」をONにすると、特定の投稿ではデフォルトのエディタを使いたい場合の切り替えスイッチが表示されます。

「キーワード提案ツール」をオンにすると、入力したキーワードに基づいてロングテール用語のリストが表示されます。

WordPressに引っ越した当初から、Markdownで記事を書き続けているので私は利用していないのですが、人によっては役立つ機能だと思います。

「マークダウンエディタースイッチャー」には注意をしてください。

Markdownと標準エディタに切り替えができる便利なスイッチですが、基本はMarkdownからの一方通行だと思った方がよいです。

↓ 設定画面の注意書きを日本語に翻訳

この機能は、Markdownを使用したくない特定の投稿用であり、Markdownエディターをリッチエディター（またはGutenberg）に切り替えることができます
この機能の使用には注意してください-リッチエディターに切り替えて保存すると、Markdownテキストが消去されます。

はじめから標準エディタを利用したい場合や、最後の装飾を標準エディタで作業したい場合は有効ですが、標準エディタからMarkdownには戻れないようですから、お気を付けください。

「WP Githuber MD」のメリット

使っていて便利だと思うところをご紹介します。

リアルタイムプレビュー

記事を作成する途中に仕上げを確認したくてプレビューを見ると思いますが、リアルタイムプレビューが右側にあると、別タブにプレビューを開く頻度が減ります。

cssでカスタマイズしているデザインや、タグ管理機能を利用している部分はリアルタイムプレビューに表示されません。

それでも画像の位置や、マーカー、文字色、リンク、引用、表を確認しながら作業ができるのは楽です。

画像や表を入れると左右で文章の位置にずれが生じます。

長文になるほど確認がしにくくなりますが、いたし方ないと思っています(苦笑)

キー操作でショートカットが使える

他のプラグインでも使えるのかもしれませんが、このショートが意外と便利です。

これもよく使うものだげ覚えておくと作業が早いですね。

ショートカットの内容は、上部のツールバーのヘルプボタン（はてなマーク）でいつでも確認できます。

↓ キーボードショートカットの一例

↓ 私がよく利用するキーボードショートカット

• 作業画面を全画面に切り替える（F11 ）
• 全てを選択（Ctrl + A）
• 太字にする（Ctrl + B）
• 作業を戻す（Ctrl + Z）
• インラインコードを入れる（Ctrl + K ）
• リスト化する（Ctrl + L）

ちょっとショートカットを覚えるだけでも作業の進みがかわります。

広告のコードを直接本文にコピペできる

アドセンス広告のコードや、ASPの広告コード、カエレバのコードなどを直接本文に貼り付けることができます。

コード類はタグ管理機能を使うことが多いですが、この投稿ページしか使わないであろうコードは直接入れてしまうので便利です。

タグで挿入した広告コードはリアルタイムプレビューに表示されませんが、直接コードを張り付けたものはリアルタイムプレビューで確認しながら作業できます。

表が簡単に作れる

Markdown記法を気に入っている理由に、表が簡単に作成でき、リアルタイムプレビューで確認しながら作業できることは声を大にしてお伝えしたいです。

「|」「-」「:」しか使いませんからね(笑)

表の中でHTMLコードも使えるので、一部の文字サイズや色を変えたり、改行したりすることが簡単です。

表でもシンプルなものに限ります。

セルを統合したり線の太さを変えたりするのは、きれいに表示されないこともあるので気を付けてください。

こういった簡単な表なら記号と単語登録で1分くらいです。

これをHTMLのコードだけで作成するのは大変ですよね。

標準エディタの方がいろいろなデザインの表が楽しめますが、シンプルな表だけでかまわない方にはおすすめです。

「WP Githuber MD」のデメリット

実際に使って「ここはちょっとな・・・」と思ったところもあわせてお伝えします。

コードミスで文章の装飾が表示されなくなる

あたり前と言えばあたり前なのですが、コードのミスがあると、ミスがあった部分の前後から文章に装飾した設定がうまく表示されなくなります。

見出しも正常に表示されなくなるので、目次も途中までしか表示されません。

コードのミスを探して修正すればきれいに表示されます。

はじめからMarkdowで書いているものではプレビューで気づきますが、古い記事を修正したときに何度かきれいに表示されないことがありました。

はてなブログの見たままモードで書いていた記事を移行したものが一番大変でしたね。

↓ ＜p＞タグの閉じ忘れをプレビューした画像

装飾が反映されず、そのままの表示されてしまいます。

私の場合はHTMLの閉じ忘れが多かったです。

Twitterの埋め込みを入れるとそのあとの装飾が表示されない

引用コードの閉じる（＜/blockquote＞）を最後に移動することで改善しました。

ツイートの埋め込みコードを直接そのまま貼り付けると、ツイート自体は表示されますが、ツイート以降の見出しや文章の装飾が反映されなくなります。

ツイートの埋め込みコードは引用の「＜blockquote＞」から始まります。

通常だと、閉じるコード「＜/blockquote＞」のあとにもscriptのコードが入りますよね。

なぜかこのままだと埋め込みツイートのあとの装飾が表示されなくなってしまうのです。

閉じるコード「＜/blockquote＞」をscriptの後に置くことで改善しました。

コードの位置を変えることは、自己責任でお願いします。

古い記事を編集するときはどうしたらいい？

はてなブログで書いていた記事をWordPressで開くとすべてHTMLのテキストモードになっていました。

MarkdownはHTMLコードを一緒に書き込めるため、編集する部分以外はそのままにして更新しても大丈夫ですが、プレビューで正常に表示されるかよく確認してからの方がいいですね。

上記でも書きましたが、コードミスできれいに表示されないことがあります。

コードのミスを探すのが少し面倒でした。

最後に

本日はWordPressでもMarkdown記法で書く方法と、プラグインの「WP Githuber MD」について書きました。

文章の中でたくさん装飾をする場合はむいていませんが、シンプルな文章をたくさん書きたい方にはおすすめです。

最後まで読んでいただきありがとうございました。

あわせて読みたい関連記事

サブドメインにテスト環境を作る【ConoHa WINGのサイトコピー機能が簡単】

サブディレクトリにテスト環境を作る【ConoHa WINGのサイトコピー機能がすてき】ト

ConoHa WINGを1年利用してメリット・デメリットをお伝えするよ【WP初心者こそ使ってみて】

WPのカスタマイズが保存できない！WAFを疑って【ConoHa WING編】WP初心者さん向け

独自ドメイン移管【ムームードメイン→ConoHa WING】画像付きでご紹介

羽田空港サーバーさんの移行代行サービスを利用【はてな→WP】移行して1年経った今

＼ ConoHa WING(コノハウィング) ／

はてなブログはMarkdownモードで書いてみて！便利で高速だよ