とにかく早い、WP_Markdownプラグインのインストールと記事の書き方!

記事入力を早くするWP_Markdownプラグインを紹介しよう。これまで記事入力の手間がかなり少なくなります。

Initializing...

最新のwordpress4.3でも使えます! 筆者はマークダウン記法による簡単入力をおすすめします。htmlタグぐらい覚えているという方ならこのWP_Markdownプラグインによるマークダウン記法がおすすめです。記事入力が3倍早くなります。

WP_Markdownのメリット

  • htmlタグと一対一に対応した記述法を覚えるだけ
  • wordpress4.3に導入されたマークダウンは一部だけ、W_Markdownの対応はフルスペック
  • htmlタグも一緒に使える
  • 旧携帯(フューチャフォン)でも記事作成ができます。

使用した環境

この記事執筆にあたり使用した環境は以下のとおりです。

  • wordpress4.3
  • Jetpack 3.8
  • WP_Markdown 1.5.1

※マークダウンを正式に導入したwordpress4.3でも、動作させることが出来ています。

 

WP_Markdownのインストール

インストール方法は、その他のプラグインと同様で、プラグイン → 新規追加よりプラグインの検索窓に”WP_Markdown”と入力、プラグインが見つかったなら、右上の”今すぐインストール”をクリック!

インストールが完了したらこのプラグインを有効化してください。

wp_markdownプラグインを検索

もし、zipファイルをダウンロードしたい場合は、下記のサイトからダウンロードしてください。
WP_Markdownダウンロードサイト

このプラグインを使う前の設定

プラグインを有効化したら以下の画面の通り、設定 → 投稿設定のメニューから投稿、固定ページ、Post editorにチェックをいれ、記事入力・編集画面を有効にしてください。

使う前の設定

これで、記事入力画面が従来の画面と置き換わり、マークダウンによる記事入力ができるようになります。

Jetpackにもmarkdown機能がありますが、こちらはOffにしてください。

入力画面は従来の入力画面を置き換えます

これまで使っていたビジュアルとテキスト入力画面は、WP_Markdown専用画面に置き換わりますので注意してください。以前の入力は同時に使用することが出来ません。

wp_markdown入力画面

マークダウン記法の入力中の注意点

マークダウン記法で入力する場合は、以下の2点に注意してください。

  1. 画面上の改行は無視します。強制的に改行させたい場所に半角スペースを2個置いてください。
  2. マークダウンのコマンドとパラメータの間には必ず半角スペースで間を空けてください

実践!マークダウンの記述方法

見出し作成

hタグによる見出し作成も#の数でh1~h6まで対応出来ます。

htmlタグによる記述
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
マークダウンによる記述
# 大見出し
## 中見出し
### 小見出し
#### 見出し4
##### 見出し5
###### 見出し6
見出しにIDを付ける場合

見出しにIDをつけてアンカーとする場合は、#部に続けて{}の中にID名を入力することで可能です。

htmlタグによる記述
<h3 id=”ここ”>小見出し</h3>
マークダウンによる記述
### 小見出し {#ここ}

文字修飾

斜め文字や太文字などは、*(アスタリスク)や_(アンダーバー)の数で指定することが出来ます。

htmlタグによる記述
<em>斜体</em> //斜体
<strong>太字</strong> //太字
<strong><em>斜め太文字</em></strong> //斜め太文字
マークダウンによる記述
*斜体* or _斜体_
**太文字** or __太文字__
***斜め太文字*** or ___斜め太文字___

順序なし箇条書き

順序なしの箇条書きは、*と半角スペースを続けて入力することで記述できます。’*’の代わりに’+’や’-‘も使えます。

htmlタグによる記述
<ul>
<li>オレンジ</li>
<li>アップル</li>
<li>バナナ</li>
</ul>
マークダウンによる記述
* オレンジ
* アップル
* バナナ

箇条書き(数字)

箇条書き(数字)は、数字と半角ドットを続けて入力することで記述できます。数字は実際には無視され、指定の連番に置き換えられます

htmlタグによる記述
<ol>
<li>オレンジ</li>
<li>アップル</li>
<li>バナナ</li>
</ol>
マークダウンによる記述
1. オレンジ
2. アップル
3. バナナ

引用

引用は、半角の>を先行させることで記述します。空行が指定されるまで引用は続きます。

htmlタグによる記述
<blockquote>昨日株価は2万円を切りました。</blockquote>
マークダウンによる記述
>昨日株価は2万円を切りました。

テーブル作成

簡単なテーブルは以下のように入力することで作成できます。

htmlタグによる記述
<table>
<thead>
<tr>
<th>ヘッダ1</th>
<th>ヘッダ2</th>
</tr>
</thead>
<tbody>
<tr>
<td>カラム1</td>
<td>カラム2</td>
</tr>
</tbody>
</table>
マークダウンによる記述
|ヘッダ1|ヘッダ2|
|-|
|カラム1|カラム2|

リンク

リンクを作成するには、以下のように入力します。

htmlタグによる記述
<a href=”リンク先URL” title=”タイトル”>名称</a>
マークダウンによる記述
[名称](リンク先URL “タイトル”)

画像リンク

画像リンクは、先にリンクと同じ入力となりますが、先頭に!(びっくりマーク)を先行させてください。

htmlタグによる記述
<img=”画像URL” alt=”代替テキスト” title=”画像タイトル”>
マークダウンによる記述
![代替テキスト](画像URL “画像タイトル”)

サンプルコーディング

では、これまでに説明したマークダウン記法でサンプルコーディングを紹介しましょう。

下記のサンプルをコピペして、入力画面に貼り付けてください
#ホンダ、高速道路で公開実験

##2020年までに各自動車会社は、高速道路での自動運転を実現する
東京オリンピックが開催される2020年は、大勢の外国人が日本に訪れる事が必死で、トヨタ自動車、ホンダ、日産自動車などの日本の自動車会社は、高速道路での自動運転を実現する計画である。去る11月3日、ホンダは同社の最高級車であるレジェンドで、自動運転の試作車を製造。東京、お台場の高速道路で公開実験をおこなった。

###実験の条件

1. 料金所の通過
2. 平常走行
3. 追い越し走行
4. 料金所出口で停止

###実験結果

* 高速道路の走行車線では、適度な車間距離の維持や走行車線内の運転はスムーズ
* 加速して追い越し車線へ編入も問題なくパス

> ドライバーがハンドルやペダルの操作をしなくても、前の車について走ったり、混んでくると自動的にブレーキをかけて速度を落としたり。走り方に不自然さはなく、助手席に座っていても違和感はない。

元記事:[カーブも合流も滑らか(朝日新聞](www.asahi.com/articles/ASHCK6QGYHCKULFA02K.html "カーブも合流も滑らか")

![自動運転試作車](//wp-content/uploads/2015/11/honda_auto_testcar.png "使用されたホンダの高級車レジェンド")

サンプルを表示すると

サンプルを実際に表示

サンプルを実際に表示

旧携帯からの記事作成可能!
別途Jetpackプラグインを導入して、メール投稿を可能にすれば旧携帯(フューチャフォン)からでもビジュアルな記事を作成することが出来ます。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る