今回は「マークダウン記法」という、記事を書くときの効率がものすごくアップする方法を紹介します。
wordpressで記事を書いていて思うのが「タグを閉じるのが面倒くさい」ということ。私は基本テキストエディタですが、今まではAddQuicktagというプラグインを使って、マウスで選択範囲を選んで、タグを付けるというようなことをしていました。
まあ面倒ですよね。特にリストを入れ子で作る時なんて、発狂する面倒くささです。
ちなみにリストとはこんな感じのやつです。
全体を<ul>で囲み、さらに個別のリストを<li>で囲む。はっきりいってめちゃくちゃ面倒です。
目次
タグの入力が3倍以上早くなる方法
しかし!!こういったタグの入力を驚くほど簡単にするやりかたがあるんです。おそらく3倍以上早くなると思います。
それがマークダウン(markdown)記法です。
最近はかなり広まってきて大分一般的になりつつありますが、まだご存じない方のために紹介します。ブログを書いている人は絶対覚えたほうがいいですよ。
マークダウン記法とは?
Markdownの概要
Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、
●手軽に文章構造を明示できること
●簡単で、覚えやすいこと
●読み書きに特別なアプリを必要としないこと
●それでいて、対応アプリを使えば快適に読み書きできること
マークダウン記法というものを使えばHTMLをものすごく簡単に記述できるんです!
上でも書いたように普通リストタグって次のように書きますよね。
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<ul>
これがマークダウン方式なら次のような記述だけでOKになるんです。
- リスト1
- リスト2
- リスト3
わざわざタグで囲まなくても頭に【- 】をつけるだけ。(ハイフンの後には半角スペースが入ります)めっちゃ簡単でしょ。
ちなみに上のように書くと私のブログでは次のように表示されます。
- リスト1
- リスト2
- リスト3
こういったマークダウン記法をいくつか覚えるだけで、記事を書くスピードがめっちゃ早くなります。
覚えるの大変じゃないの?
私も最初覚えるの大変なんじゃないかと素通りしていましたが、はっきりいって10分もあれば覚えられます。
ブログを書くときに使うマークダウンなんてほんの少しですからね。覚えるのに全く苦労はしないはずです。
というか、10分間真剣に覚えるだけで、その後のブログ人生を大きく効率化出来るとしたらやらない手はないですよね。
wordpressで使う場合は現状プラグインが必要です。
実は、Wordpress4.3から標準でmarkdown記法が使えるようになっています!
ただこれは全てのマークダウン記法に対応しているわけではなく、ごく一部。しかもビジュアルエディタ上でしか使えないというなんとも中途半端なもの。
現状ではフルにサポートされていないので、マークダウン記法で記事を書きたいならプラグインは必須です。
おすすのプラグインは?
jetpackプラグインを使っている人は、その中にマークダウン記法の機能があるのでオンにするだけで使えます!
jetpackプラグインを使ってない人は、jetpackからマークダウン機能だけを抜き出して作成されたJP Markdownというプラグインがおすすめです。
導入はインストールして有効化を押すだけ。これでワードプレスでもマークダウン記法が使えるようになります。
マークダウン記法の記述の仕方。ワードプレスで使うならこれだけ覚えておけばOK!
マークダウン記述のやりかたはめちゃくちゃ簡単。ブログで使う程度のものならば5~7つ程度覚えておくだけで、ものすごく効率的になりますよ。
見出しタグ
記号(#)を増やした数だけ見出しの数字が増えていきます。
#のあとには半角スペースが入るので注意してください。
Hタグのマークダウン
# 見出し h1
## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
こう出力されます。
<h2>見出し h2</h2>
<h3>見出し h3</h3>
<h4>見出し h4</h4>
<h5>見出し h5</h5>
強調(<STRONG>タグ)
強調したい箇所を2つの*(アスタリスク)か、_(アンダースコア)で言葉を囲みます。どちらを使っても同じ意味になります。
<strong>タグのマークダウン
**強調表示**だよん。
__強調表示__だよん。
こう出力されます
表示例
強調(<em>タグ)
emタグの場合はstrongタグと違って1つの*か、_(アンダースコア)で言葉を囲みます。どちらを使っても同じ意味です。
<em>タグのマークダウン
*強調表示*です。
_強調表示_です。
こう出力されます
表示例
引用(<blockquote>タグ)
行頭に半角不等号 (>) を置くと引用表現になります。
<blockquote>タグのマークダウン
>これは引用です。
こう出力されます。
表示例
これは引用です。
リスト表示(<ul>タグ)
リストは、行頭に-(マイナス)、+(プラス)、*(アスタリスク)のどれかを入力し、半角スペースを挿入します。
記号の後の半角スペースを忘れないようにしてくださいね。
リストの途中で、スペース(タブ)を入れて記号を変更すると入れ子になります。
リストのマークダウン
- 日本
* 東京
* 大阪
- アメリカ
* ワシントン
- イギリス
こう出力されます。
<ul> <li>日本 <ul> <li>東京</li> <li>大阪</li> </ul> </li> <li>アメリカ <ul> <li>ワシントン</li> </ul> </li> <li>イギリス</li> </ul>
表示例
- 日本
- 東京
- 大阪
- アメリカ
- ワシントン
- イギリス
番号つきリスト表示(<ol>タグ)
番号付きリストは、行頭に「数字」+「.」+「半角スペース」をつけます。
数字の番号は適当で構いません。
番号付きリストのマークダウン
1. 反乱軍
1. ルーク
1. レイア
2. 帝国軍
2. ダースベイダー
3. ジェダイ評議会
こう出力されます。
<ol> <li>反乱軍 <ol> <li>ルーク</li> <li>レイア</li> </ol> </li> <li>帝国軍 <ol> <li>ダースベイダー</li> </ol> </li> <li>ジェダイ評議会</li> </ol>
表示例
- 反乱軍
- ルーク
- レイア
- 帝国軍
- ダースベイダー
- ジェダイ評議会
水平線(<hr>タグ)
3つ以上連続した*(アスタリスク), -(ハイフン), _(アンダースコア)は罫線として扱われます。
水平線<hr>タグのマークダウン
*************
---------
______
こう出力されます
表示例
ハイパーリンク(<a href>)
リンクのマークダウン
[アンカーテキスト](URL "title属性")
こう出力されます
表示例
マークダウン記法はまだ色々ありますが、wrodpressで記事を書くならこれくらいで十分。特に見出しとリストはマークダウンで記すと、本当に効率的に書けますよ。
マークダウンのデメリット
めちゃくちゃ便利なマークダウンですが、実はデメリットもあります。
- imgタグのwidthやheight属性を指定できない、
- aタグのtarget属性を指定できない
- dl,dt,ddタグを表すことができない
- idやclassの指定ができない
簡単な見出しやリストならマークダウンで十分ですが、凝ったデザインにしたい場合はマークダウンだけではちょっと力不足です。タグ打ちと使い分ければいいんじゃないでしょうか。
まとめ
wordpressでのマークダウンでの使い方を記事にしました。マークダウンはある程度成約も多いのですが、要所要所で使いこなせば、記事書きの効率は遥かにアップしますよ^^
私はマークダウン記法を覚えてから記事を書くのが楽しくなりました。