FXトレーダーの汎用型備忘録

FX以外でも色々書き留めていく

NEW ARTICLE
2022.3.18 AUDJPYのトレード
  • 【WordPress】Markdownでブログの執筆速度は早くなる。

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

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

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

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

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

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

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

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

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

Advertisement
目次

Markdownとは？

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

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

<h1>見出し１（ｈ１）</h1>

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

でも、Markdownだと、

# 見出し１（ｈ１）

↑これだけでOKです。

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

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

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記法を使うと意図しない表示になる場合があります。

見出しタグ

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


# 見出し１
## 見出し２
### 見出し３
#### 見出し４
##### 見出し５
###### 見出し６

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

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

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


<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>

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

段落と改行

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

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

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

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

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

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

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

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

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

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

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


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

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

出力（HTML）はこうなります↓


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

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

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

文字の強調

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

Markdown


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

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

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

HTML


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

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

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

実際の表示

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

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

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

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

リンク

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

Markdown


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

これだけです。

HTML


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

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

リスト

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

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

Markdown


- リスト１
- リスト２
- リスト３
- リスト４
 + 入れ子１
 + 入れ子２
- リスト５
- リスト６

HTML


<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４
    <ul>
        <li>入れ子１</li>
        <li>入れ子２</li>
    </ul>
</li>
<li>リスト５</li>
<li>リスト６</li>
</ul>

実際の表示

  • リスト１
  • リスト２
  • リスト３
  • リスト４
    • 入れ子１
    • 入れ子２
  • リスト５
  • リスト６

順序リスト

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

Markdown


1. リスト１
2. リスト２
3. リスト３
6. リスト４
4. リスト５
9. リスト６

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

HTML


<ol>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
</ol>

実際の表示

  1. リスト１
  2. リスト２
  3. リスト３
  4. リスト４
  5. リスト５
  6. リスト６

引用

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


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

HTML


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

実際の表示

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

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

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

WordPressに貼り付け

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

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

新規投稿を追加

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

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

まとめ

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

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

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

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