【WordPress】Markdownでブログの執筆速度は早くなる。

WordPress Markdown

From: アキヤマ ユウスケ (@ay8_jp)

ブログを書く時、WordPressにログインして、「投稿」→「新規追加」で書いたりしてませんか?

今はバックアップ機能とかで「書いてた文章がミスって消えた」ってことも少なくなったと思うけど、でもやっぱりブラウザで書くのはオススメしません。

じゃぁ何で書くのか?それは「エディタ」と呼ばれるテキストアプリです。

エディタで記事を書いて、WordPressに貼り付けるもしくは、アップロードします。

エディタアプリはブラウザに比べたら軽いからサクサク書けるし、オフラインでも書けるからネット環境が無くても執筆できます。

さらに今回紹介するMarkdownマークダウン記法を使えば執筆速度も向上するから、ブログの執筆がさらに快適になること間違いなしです。

ということで、このページではWordPressでMarkdown記法を使って記事を書く方法をご紹介します。

Markdownとは?

難しい話はすっ飛ばして、Markdownってのは、マークアップ言語(HTML)で使うタグを単略化できる記述法です。

たとえば、HTMLマークアップでは見出しタグとして、

<h1>見出し1(h1)</h1>

って感じでタグと呼ばれるもので表示する文字を囲んで記述します。

でも、Markdownだと、

# 見出し1(h1)

↑これだけでOKです。

もしWordPressのビジュアルディタで書いてる人からすれば、
「そんな面倒くさいタグなんて書かんでもよくね?」と思うかもしれませんね。

でもビジュアルエディタで見出し1にするには、書いた文字を選択して、ツールバーから「見出し1」を選んでってしないとイケませんよね?

Markdownなら「#」これだけです。見出しにしたい文字の前にシャープ入れるだけ。

どっちが早いかは明らかですよね?

Markdownはブログの執筆速度を格段に早くしてくれる便利な記法ってことです。

WordPressでMarkdownを使う準備

WordPressは標準の状態ではMarkdown記法を認識してくれません。

なので、プラグインを使ってMarkdownを認識できるようにしておく必要があります。

WordPressのMarkdownプラグインは色々あるけど、今回はみんな大好き「Jetpack」の機能を使います。

「Jetpack」入れてないよって人は、「JP Markdown」というプラグインをインストールして有効化するだけでOKです。

プラグインの新規追加で「JP Markdown」と検索すれば直ぐにヒットします。

Jetpackの設定

まずはJetpackの設定を開きます。

Jetpack1

サイドバーのJetpackの設定

そしたら「Writing」タブの「Composing」で「プレーンテキストの Markdown 構文で投稿やページに書き込み」をONにします。

Jetpack2

この状態でOK

これであなたのWordPressでもMarkdown記法が使えるようになりました。

Markdownの書き方

ほんなら具体的にMarkdownの記述方法を紹介していきます。

特にブログの執筆に良く使うであろうモノだけに絞って説明するんで、他が気になる人はググってください。

まぁここで紹介したモノだけで十分だと思います。僕はこれ以外使ってないんで。

※Markdownで記事を書く時は、エディタを標準テキスト(プレーンテキスト)に設定して書いてください。

リッチテキスト(ビジュアルエディタ)でMarkdown記法を使うと意図しない表示になる場合があります。

見出しタグ

見出しタグはさっきチラッと紹介したけど、シャープと「半角スペース」を入力するだけです。


# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

#の数に応じて見出し1〜見出し6まで対応します。

※#の後に半角スペースを忘れずに。

実際に出力されるHTMLはコチラ↓


<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

HTMLに比べてメチャクチャ単略化できてることがわかりますね。

段落と改行

次に段落と改行の方法です。

っとその前に、段落と改行の違いを明確に理解していますか?

意味の違いは国語の授業でお勉強したから誰でも知ってると思うけど、ことブログに関してはゴッチャに考えてる人がたまに居ます。

Enterを押すことが改行だと思ってる人がいるんだけど、WordPressのビジュアルエディタの場合は、Enter1回で段落、ShiftとEnterで改行です。

「改行してスペース(一行)を空ける」とか言ってる人がいますが、基本的に1行空くのは段落ですからね。

あっ!ちなみに、使ってるテンプレートのCSSで<p>タグの下に1行分のマージンが入っていれば、段落の下に1行空きます。

<p>タグの下にマージンが入っていないと、1行分の行間は空きません。

それを無理やり、空の<p>タグや<br>タグを連発して行間を空けてるように見せると、キレイなコードとは言い難く、多分SEO的にもよろしくないと思います。

だから、もし使ってるテンプレートで、空の段落を入れないと行間が空かないなら、CSSを編集して、<p>タグの下に1行分以上のマージンを入れてやりましょう。

ちょっと脱線したけど、本題に戻ります。

Markdownで段落と改行を入力するには、


段落にしたい文章の下に1行空ければ段落になります

改行の場合は文末に ←(ここに半角スペース2個)  
半角スペース2個入れて改行します。

出力HTMLはこうなります↓


<p>段落にしたい文章の下に1行空ければ段落になります</p>
<p>改行の場合は文末に<br>半角スペース2個入れて改行します。</p>

※ 改行する時の半角スペース2個は忘れがちだから注意してください。

より実際の見た目に近い感覚で記述できるのもMarkdownの魅了です。

文字の強調

次に文字を強調(太文字斜体(イタリック))する方法です。

Markdown


アスタリスクかアンダーバー1つで囲むと*斜体*になります。
アスタリスクかアンダーバー1つで囲むと_斜体_になります。

アスタリスクかアンダーバー2つで囲むと**太文字**になります。
アスタリスクかアンダーバー2つで囲むと__太文字__になります。

アスタリスクかアンダーバー3つで囲むと***太文字で斜体***になります。
アスタリスクかアンダーバー3つで囲むと___太文字で斜体___になります。

HTML


アスタリスクかアンダーバー1つで囲むと<em>斜体</em>になります。
アスタリスクかアンダーバー1つで囲むと<em>斜体</em>になります。

アスタリスクかアンダーバー2つで囲むと<strong>太文字</strong>になります。
アスタリスクかアンダーバー2つで囲むと<strong>太文字</strong>になります。

アスタリスクかアンダーバー3つで囲むと<em><strong>太文字で斜体</em></strong>になります。
アスタリスクかアンダーバー3つで囲むと<em><strong>太文字で斜体</em></strong>になります。

実際の表示

アスタリスクかアンダーバー1つで囲むと斜体になります。
アスタリスクかアンダーバー1つで囲むと斜体になります。

アスタリスクかアンダーバー2つで囲むと太文字になります。
アスタリスクかアンダーバー2つで囲むと太文字になります。

アスタリスクかアンダーバー3つで囲むと太文字で斜体になります。
アスタリスクかアンダーバー3つで囲むと太文字で斜体になります。

※ 斜体(イタリック)はメイリオなど使っているフォントによっては斜めにならないから注意。このブログでは斜体にはなってないと思います

リンク

ハイパーリンクに設定するのもMarkdownだとメチャクチャ楽です。

Markdown


[ここに表示する文字](http://URL)

これだけです。

HTML


<a href="http://URL">ここに表示する文字</a>

圧倒的にMarkdownは楽ですよね?

リスト

リスト表示は*(アスタリスク)、-(ハイフン)、 +(プラス)の後に半角スペース1つです。

リストの途中でスペースを空けて記号を変えると入れ子として扱われます。

Markdown


- リスト1
- リスト2
- リスト3
- リスト4
 + 入れ子1
 + 入れ子2
- リスト5
- リスト6

HTML


<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4
    <ul>
        <li>入れ子1</li>
        <li>入れ子2</li>
    </ul>
</li>
<li>リスト5</li>
<li>リスト6</li>
</ul>

実際の表示

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    • 入れ子1
    • 入れ子2
  • リスト5
  • リスト6

順序リスト

さっきの記号を半角英数字の数字とピリオドに変えると順序リストになります(半角スペース忘れずにね)。

Markdown


1. リスト1
2. リスト2
3. リスト3
6. リスト4
4. リスト5
9. リスト6

↑数字であれば順番は関係ありません。数字はごちゃごちゃでもちゃんと順序通りに表示されます。

HTML


<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
</ol>

実際の表示

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5
  6. リスト6

引用

Markdownで引用の表示をする場合は、


> 文頭に`>`と半角スペースで引用になります。  
> 文末に半角スペース2個で改行もできますし。
> 
> こうすれば1行空けることもできます。
>> `>`を2つにすれば入れ子です。

HTML


<blockquote>
<p>文頭に>と半角スペースで引用になります。<br>
文末に半角スペース2個で改行もできますし。</p>
<p>こうすれば1行空けることもできます。</p>
<blockquote>>を2つにすれば入れ子です。</blockquote>
</blockquote>

実際の表示

文頭に>と半角スペースで引用になります。
文末に半角スペース2個で改行もできますし。
こうすれば1行空けることもできます。

>を2つにすれば入れ子です。

ブログで実際によく使うのはこれぐらいだと思うんで、こんだけ覚えておけばまぁ困ることはないでしょう。

WordPressに貼り付け

さて、これらのMarkdownを使って素早く記事を書き上げたら、全文コピーしてWordPressに貼り付けましょう。

「投稿」→「新規追加」でエディタを開き、「テキスト」にしてから貼り付けます。

新規投稿を追加

必ずテキストエディタに貼り付けてください。

後は画像なり、文字の装飾なりをイジれば完成です。

まとめ

画像メインの記事だとそこまでMarkdownの便利さは感じないけど、文字主体の記事ならMarkdownはもはや必須レベル。

リッチテキストで書いても思ったように表示されない不具合とかがあるから、プレーンテキストでMarkdownを使って書きましょう。

ビジュアルエディタで書くよりも早く書けるようになるはずですよ。

まだ他にMarkdownの記法はあるから、知りたい方はググってみてください。

僕が会社を辞めて起業するためにやったこと

ホントはやりたくない仕事を我慢してイヤイヤ続けていませんか?

どうせなら楽しいことを仕事にして生きていきたいと思いませんか?

会社に縛られず、自分の好きなライフスタイルに憧れるなら起業して自由になるしかありません。

「起業」って言っても難しいことじゃなくて、自宅で一人仕事をするのだって立派な起業。

好きな時間に起きて、好きな時間仕事して、好きな時間に寝る。

そんな自由を手に入れるために、やるべきことがあります。

メルマガでは「僕が9年務めた会社を辞めて、起業するためにやったこと」をお伝えしています。

ブログには書けない濃い内容になってるんで、今の現状に満足してない方はぜひご購読ください。

↓下のボタンを押せばメールが開くんで、そのまま送信してください。

今すぐ無料で読んでみる

SNSでも最新情報を受け取れます

Photoshop(フォトショッ...

値段と価値のお話|価格を上げて価...