ブログで便利なマークダウン記法の書き方まとめ

マークダウンアイキャッチ

ブログを書く時におすすめの書き方のひとつ「マークダウン記法」の使い方を紹介します。チートシートとしてもどうぞ。

HTMLタグを直接書かなくても見出しやリストを簡単に書くことができます。

広告

マークダウン記法とは

Wikipediaによるとマークダウン記法は

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

via:Markdown – Wikipedia

とのことです。なんか小難しいことだけは分かります。

でも別に成り立ちとか覚えてなくてもマークダウン記法は使えるので心配する必要はありません。

要するに「ブログを書くスピードをアップできる便利なもの」というだけでそれ以上でもそれ以下でもありません。

ちなみにマークダウン記法はすべて半角文字で入力する必要があります。全角だとそのまま文字が表示されてしまうので気をつけましょう。

マークダウンの書き方

マークダウンの書き方は非常にシンプルなので一度書いてしまえば見返すこともないでしょうが例を挙げながら以下の順番で説明していきます。

  • マークダウン
  • HTML
  • 実際の見た目

まずはブログを書くのによく使われるマークダウンから。

  • 見出し
  • 箇条書き(リスト)
  • 番号付きリスト

この3つが利用頻度が高くて暗記しておくと便利です。

見出し

ブログでの使用頻度がとても多い見出し。

#(ハッシュ)の数に応じて見出しのレベルが変わります。

マークダウン

## 見出しh2
### 見出しh3
#### 見出しh4

HTML

<h2>見出し h2</h2>
<h3>見出し h3</h3>
<h4>見出し h4</h4>

結果

マークダウン見出し
※CSSによってデザインは違います。

箇条書き(リスト)

箇条書きもブログではよく使われます。箇条書きするための記号は何種類かあって自分が使いやすいものを選べばOKです。

  • *(アスタリスク)
  • -(ハイフン)
  • +(プラス)

上記いずれかの後ろに半角スペースで箇条書きになります。

「* 」「- 」「+ 」

個人的には入力のしやすさと視覚的なわかりやすさで「+」を使っています。

マークダウン

+ 箇条書き1
+ 箇条書き2
+ 箇条書き2

HTML

<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>

結果

マークダウン箇条書き

番号付きリスト

順番通りの手順を書く時によく使います。

半角数字の後に半角の「.(ピリオド)」その後ろに半角スペースを入力します。

実はマークダウンで書く先頭の数字は関係なく結果は連番になります。

なのでマークダウンで書く時はすべて「1. 」にしても問題ありません。

マークダウン

1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3

HTML

<ol>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ol>

結果

マークダウン番号付きリスト

使用頻度の低いマークダウン

見出し・箇条書き・番号付きリストの3種類は使用頻度が高くてHTMLよりも簡単に書けるので最初におすすめしました。

他にもマークダウン記法はいろいろありますが実はそこまでおすすめでもありません。

今時のブログエディタであれば無料ブログサービスでもボタンのクリックひとつで太字に出来たりするのでマークダウンのありがたみが薄れてしまうからです。

以下のものがその代表例です。

  • 水平線
  • 強調・斜体
  • リンク
  • 引用

水平線(罫線)

ブログの構成を区切るために使ったりします。

3個以上の*(アスタリスク)、-(ハイフン)、_(アンダースコア)がある行は水平線として表示されます。

マークダウン

***

___

HTML

<hr />
<hr />
<hr />

結果

マークダウン水平線

強調・斜体

strongやemタグで囲んで文字を強調する時に使われます。

変えたい部分を強調(strong)は2個の*(アスタリスク)や_(アンダースコア)で囲みます。斜体(em)は1個で囲みます。

マークダウン

これは**強調**に、
これは*斜体*になります。

HTML

これは<strong>強調</strong>に、
これは<em>斜体</em>になります。

結果

マークダウン強調斜体

リンク

リンクはマークダウンで書くと逆に面倒くさくなるのでおすすめしません。ブログエディタに付いているリンクの機能を使ったほうが良いでしょう。

角括弧で囲んだ部分がテキスト、普通のカッコで囲んだ部分がリンクされるURLになります。

マークダウン

[パソ活ラボ](http://pasokatu.com)

HTML

<a href=”http://pasokatu.com”>パソ活ラボ</a>

結果

マークダウンリンク

引用

他サイトのテキストなどを引用したい場合に使用されます。

引用したい文章の先頭に「>」マークをつけます。全部の行につけるのでかなり面倒です。

これも引用したい文章を選択してからブログエディタの引用ボタンを使ったほうが楽ですね。

マークダウン

> 引用したい文章に
>
> 不等号記号と半角スペースを<br />
> 入力します。

HTML

<blockquote>
<p>引用したい文章に</p>
<p>不等号と半角スペースを<br /> 入力します。</p>
</blockquote>

結果

マークダウン引用

他のマークダウンはほとんど使わない

まだマークダウン記法にはいろいろありますがブログを書くのに使うことを考えたらエディタにもショートカットボタンが搭載されているので単純なものしかマークダウンを使うメリットがありません。

自分がブログを書く限りでは見出しと箇条書きに使うことがほとんどです。

マークダウンの記号を単語登録すると便利

マークダウンはすべて半角入力しなければいけないのに日本語入力からいちいち半角入力に切り替えていたら手間がかかってしまいます。

なのでよく使うマークダウン記法は単語登録しておくと便利です。

例えばこんなふうに単語登録しておけばいちいち半角入力に切り替えたり何度も変換候補を探さなくてもよくなります。

全角→半角の単語登録をするだけでも結構便利ですよ。

読み 単語
「##」 「##」
「###」 「###」
「####」 「###」
「++」 「+ 」
「。1」 「1. 」

WordPress4.3から標準でマークダウンに対応

WordPressのバージョン4.3からプラグインを使わなくてもビジュアルエディタでマークダウン記法が使えるようになりました。

今までプラグインでマークダウンに対応していた人は試しにプラグインを停止してみて確かめてみたほうが良いかもしれませんよ。

Macでマークダウン記法が使えるブログエディタ

MarsEditというブログエディタがマークダウン記法に対応しています。

ただしWordPress標準のエディタがだんだん充実してきているのでだんだんとブログエディタの影も薄くなってきました。

それでもブログエディタにメリットがあるとしたらネットに繋がってなくても書けるってことぐらいでしょうか。

<関連>
WordPressビジュアルエディタのCSSに実際の表示を適用する方法

Firefoxアドオン「Stylish」でWorkFlowyをブログエディタにする

広告

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。