Markdown記法
WordPressでブログを書く際に書きやすい方法を探していたのですが、一旦今の方法で落ち着いていたのでご紹介いたします。
テキストモード
WordPressで記事を書く際に、ビジュアルモードとテキストモードで記事を書けるのですが、私はテキストモードで記事を書いています。ビジュアルモードだと書いた内容と実際に投稿した記事の表示が同じようになるので分かりやすいのですが、文字を強調したり、打ち消し線を入れたりなどを行う際にマウス操作が必要なります。（最近マウスの調子が悪いので余計にマウス操作は抑えたいです。）
なるべくキーボード操作のみで記事を作成したいので、テキストモードで記事を作成していました。テキストモードではHTMLのタグなどで文字の装飾ができるので、キーボードのみで記事を作成することができます。しかし、それでもタグの種類を覚える必要があったり、キーボードの打鍵数が増えるのが面倒でした。
Markdown記法
そこで導入したのがMarkdown記法です。
HTMLはHyper Text Markup Languageの略でマークアップ言語と呼ばれるものです。Markdown記法は更にそれを簡略化した軽量マークアップ言語で、プレーンテキスト（普通のテキスト形式）で記述された文書をHTMLやXTHMLに変換することができるものです。
つまりMarkdown記法を使うと、少ない打鍵数で楽にHTML形式の文書や記事が作れます！ Markdown記法もいくつかHTMLでいうタグのような記述を覚えないといけませんが、タグよりは簡単で種類も少ないので覚えやすいと思います。
私がよく使っているMarkdown記法の例を紹介します。
見出し
markdown記法
# 見出し
HTML表示
<h1>見出し</h1>
「#」の数を増やせば見出しの大きさが変わります。
強調
markdown記法
*イタリック体*
**太字**
~~打ち消し~~
HTML表示
<em>イタリック体</em> <strong>太字</strong> <del>打ち消し</del>
実際の表示
イタリック体 italic
太字
打ち消し
(jetpackのプラグインでは打ち消し線にならないみたいです）
折りたたみ
markdown記法
<details><summary>松尾芭蕉</summary>
夏草や
兵どもが
夢の跡
</details>
HTML表示: markdown記法と同じです。
実際の表示
松尾芭蕉
夏草や
兵どもが
夢の跡
リスト
markdown記法
* リスト1
* リスト2
* リスト3
HTML表示
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
実際の表示
- リスト1
- リスト2
- リスト3
リンク
markdown記法
[Google](https://www.google.co.jp/)
HTML表示
<p><a href="https://www.google.co.jp/">Google</a></p>
実際の表示 Google
引用
markdown記法
>引用
HTML表示
<blockquote>
<p>引用</p>
</blockquote>
実際の表示
引用
画像
markdown記法
HTML表示
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/ic041223/20190522/20190522213556.png" alt="icon">
実際の表示
ソースコード
markdown記法
``` java
public class Main {
public static void main(String[] args) throws Exception {
System.out.println("HelloWorld");
}
}
</code></pre>
HTML表示
<pre><code><pre><code class="lang-java">public class Main {
public static void main(String[] args) throws Exception {
System.out.println(&quot;HelloWorld&quot;);
}
}
</code></pre>
</code></pre>
実際の表示
<pre><code class="language-java">public class Main {
public static void main(String[] args) throws Exception {
System.out.println("HelloWorld");
}
}
</code></pre>
<h2>テーブル記法</h2>
markdown記法
(「:」セミコロンの位置で左揃え、中央揃え、右揃えが指定できます)
<pre><code>| 商品 | 価格 | コメント |
|:-----------|--------:|---------|
| りんご | 120円 | 本日入荷 |
| みかん | 100円 | 鮮度抜群 |
| キャベツ | 98円 | 自産自消 |
| きゅうり | 300円 | |
| メロン | 2000円 | おすすめ |
</code></pre>
HTML表示
<pre class="lang:default decode:true " ><table>
<thead>
<tr>
<th style="text-align:left">商品 </th>
<th style="text-align:right">価格</th>
<th>コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">りんご</td>
<td style="text-align:right">120円</td>
<td>本日入荷</td>
</tr>
<tr>
<td style="text-align:left">みかん</td>
<td style="text-align:right">100円</td>
<td>鮮度抜群</td>
</tr>
<tr>
<td style="text-align:left">キャベツ</td>
<td style="text-align:right">98円</td>
<td>自産自消</td>
</tr>
<tr>
<td style="text-align:left">きゅうり</td>
<td style="text-align:right">300円</td>
<td></td>
</tr>
<tr>
<td style="text-align:left">メロン</td>
<td style="text-align:right">2000円</td>
<td>おすすめ</td>
</tr>
</tbody>
</table></pre>
実際の表示
<table>
<thead>
<tr>
<th align="left">商品 </th>
<th align="right">価格</th>
<th>コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">りんご</td>
<td align="right">120円</td>
<td>本日入荷</td>
</tr>
<tr>
<td align="left">みかん</td>
<td align="right">100円</td>
<td>鮮度抜群</td>
</tr>
<tr>
<td align="left">キャベツ</td>
<td align="right">98円</td>
<td>自産自消</td>
</tr>
<tr>
<td align="left">きゅうり</td>
<td align="right">300円</td>
<td></td>
</tr>
<tr>
<td align="left">メロン</td>
<td align="right">2000円</td>
<td>おすすめ</td>
</tr>
</tbody>
</table>
<h1>環境設定</h1>
以上が私がよく使うmarkdown記法の一覧です。
WordPressの初期設定ではおそらく、Markdown記法は使えないと思います。なのでプラグインなどでMarkdown記法が使えるように設定する必要があります。
Markdown記法のプラグインはいくつかありますが、私はjetpackというプラグインを使ってMarkdown記法を使っています。
<a href="https://ja.wordpress.org/plugins/jetpack/">https://ja.wordpress.org/plugins/jetpack/</a>
jetpackはWordPressが提供している公式のプラグインなので安心して使用できると思います。
またjetpackはMarkdown記法の機能だけではなく、様々な機能があるので導入していても良いのかもしれません。
これでWordPressのテキストモードでMarkdown記法が使えるようになりました。
<h1>プレビューアクセス数の増加</h1>
テキストモードでMarkdown記法で記述して、プレビューで実際の表示を確認することを続けていたらgoogle analyticsなどのアクセス解析ツールなどでプレビューページのアクセス数が増えてしまいました。なんとなくプレビューページのアクセス数が増えるのを抑えなかったので、別ツールで記述してプレビューは最終確認ぐらいに使うようにしました。
別ツールとは「Visual Studio Code」（以下VSCode)というソースコードエディタです。
https://code.visualstudio.com/
VSCodeを使うと、インストールするだけでMarkdown記法が使えます。またMarkdown記法で記述しながら実際の表示を確認することができます。
確認の仕方はmarkdown記法ファイル(.mdファイル)を開いて、Ctrl+K→Vをすることでプレビュー画面が開けます。
VSCodeはmarkdown記法のためだけではなく、その他プログラムの作成や実行、Git等によるバージョン管理などもできるので興味がある方は使用してみてください。
<h1>注意事項</h1>
VSCodeのMarkdownのプレビュー機能で表示されている内容と、WordPressで表示されている内容が違う場合が多いです。
WordPressのテーマやプラグインによってもデザインが変わることがあるので、二度手間になることがあります。実際、この記事を書く際も大分デザインが崩れたので微調整が必要でした。
なので、実際にVSCodeで作成して、WordPressにコピペで投稿する際は一度プレビューで内容を確認することをお勧めいたします。
特にHTMLのソースコードを記述する際に「<>」の記号が特殊な文字らしく、自動的に変換されるので私はHTMLのソースコードだけは別のツールを使って入力しました。
