★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

記事作成が捗る!マークダウン記法をWordPress編集画面で使う方法

マークダウン記法とは・・・HTMLの基本的なタグ(見出し、テキスト装飾タグ、リンク)を簡単な記号で置き換えしたもの

タグ打ちをなくすことで記事更新にかかる時間を短縮することができます。

それで最近、マークダウン系でいいプラグインを見つけました。

ここではそのプラグインの導入とマークダウンの書き方について解説します。

マークダウン記法の利点

例えばWordPressで記事を編集しているときタグを挿入したり、テキスト装飾をする場合次の2つの方法があります。

  • エディターのテキスト装飾ボタンを押す
  • HTMLエディターでタグを手打ちで入力

ボタン操作する場合はキー入力をやめなくてはならないので無駄が生じます。またタグを手打ちしなければならない場面もありますが、見出しやテキスト装飾でいちいちタグ打ちするのは時間の無駄です。

そこでマークダウン記法が役に立ちます。

例えば見出しを定義する場合マークダウンでは

##見出し

と書きます。

これは次のようにh2タグを書いたのと同じ表示になります。

<h2>見出し</h2>

わざわざh2タグを打つ必要がなく、ボタン操作も必要ないので手間と時間が省けて便利ですよね。

特にスマホのような画面が小さく編集メニューが使いにくい端末でマークダウン記法は役に立ちます。また編集画面上の動線を少なくできるのでPCユーザーにもメリットがあります。

マークダウンを使うためのプラグイン

WordPressでマークダウン記法を利用できるプラグインはいくつかありますが、ここでは評判のいい「JP Markdown」というプラグインを導入します。

「プラグイン」ー>「新規追加」からプラグイン名で検索すると次のように検索結果に出てきます。

JP Markdown - WordPressの投稿画面でマークダウン記法が使えるようになるプラグイン

もしダウンロードして使う場合は以下のURLからダウンロードできます。

https://ja.wordpress.org/plugins/jetpack-markdown/

インストールして有効化するとすぐに以下の画像のように編集画面でマークダウンが使えるようになります。

例えば見出しだったら、こういう感じでボタン操作なしで挿入できる

一部のタグではこのように編集画面でマークアップを入力するとリアルタイムでタグに変換されます。ただし太字や斜体字などのようなテキスト装飾タグの場合は編集画面上ではタグに変換されません。(修正しやすくするため)

マークアップ記法の書きかた

次にマークダウンでは記述できるタグの書きかたについて紹介します。

見出し

見出しを定義する場合は文字列の前に # を書きます。 #の数によって次のように見出しが定義されます。

記法 対応するタグ
# h1タグ
## h2タグ
### h3タグ
#### h4タグ
##### h5タグ
###### h6タグ

見出しの大きさは最大6つまで定義できます。

リスト

マークダウンで定義できるリストには並列列挙型、順序型、定義型の3つがあります。それぞれの作り方は以下の通りです。

並列列挙型リスト

列挙型リストは文字列の前に *(アスタリスク) または -(ハイフン) を置くことで自動的にリスト項目が作成されます。

マークダウン例

* HTML
* CSS
* JavaScript
* PHP

表示結果

  • HTML
  • CSS
  • JavaScript
  • PHP

順序型リスト

項目の前に数字が振ってあるリストは項目の前に数字.(ドット)を置くことで作成できます。

マークダウン例

1. HTML
2. CSS
3. JavaScript
4. PHP

表示結果

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP

定義型リスト

定義型リストはリスト項目の下にその説明が来るようなリストのことです。マークダウンでは次の形式で定義できます。

リストアイテム
: アイテムの説明

マークダウン例

HTML
: Hyper Text Markup Language

CSS
: Cascading Style Sheets

JS
: JavsScript

PHP
: Hypertext Preprocessor

表示結果

HTML
Hyper Text Markup Language
CSS
Cascading Style Sheets
JS
JavsScript
PHP
Hypertext Preprocessor

テキスト装飾

強調(emタグ)や太字(strongタグ)は次のように記述できます。

マークダウン例

*強調*
_強調_

**太字**
__太字__

表示結果

強調
強調

太字
太字

リンク

リンクは次のような書きかたで定義します。

[アンカーテキスト](URL "タイトルテキスト")

アンカーテキストがリンクとしてクリックできるテキストで、タイトルテキストはリンクにマウスなどを重ねた際に表示される補足説明のことです。

ただし新規タブで開くように設定(target="_blank")する場合はタグに記述する必要があります。

マークダウン例

[リンク](https://wordpress.org/ "WordPressの公式サイト")を開く

表示結果

リンクを開く

引用

blockquoteタグで表される引用は次のように定義します。

>引用テキスト

引用テキストを入力してエンターを押すと自動的に引用タグに変換されます。

マークダウン例

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

表示結果

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

コード

codeタグでテキストを囲みたい場合は'(シングルクォート)で文字列を囲みます。

マークダウン例

`#button{border: none;}`

表示結果

#button{border: none;}

コードのハイライト

マークダウンでは次のように記述することでコードのハイライトができます。

```[ハイライト言語クラス]

ソースコード
```

[ハイライト言語クラス]はプラグインなどで定義されているハイライト用のクラス名に置き換えてください。例えばPrism.jsを使っていてCSSコードをハイライトしたい場合は language-css と書くとCSSとしてハイライトされます。

マークダウン例(Prism.jsをインストールしている場合)

```language-css
#button 
{ 
    font-size: x-large;
    border: none;
}
```

表示結果

#button
{
font-size: x-large;
border: none;
}

まとめ

マークダウンを覚えておけば、記事の作成スピードが上がること間違いなし!

記法を覚えるまでは少し大変かもですが、一度習得してしまえば後はスラスラとマークアップができるようになるはずです。

以上 JP Markdown プラグインを使ってWordPressでもマークダウンが使えるようにする手順でした。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press