ブログ執筆をマークダウンで効率化しよう!書き方とエディタを紹介

  • 2020年9月29日
  • SEO
Eye catch: How to Markdown

こんにちは。和雨(@waublg)です!

あなたはマークダウン(Markdown)形式って知っていますか?

マークダウン?何それ?

見出しとかリストとかを、省略して書ける形式のことです!

正直な話、マークダウンを知らないというのは結構損です。

マークダウン記法を覚えれば、楽に執筆速度が上がりますよ!

HTMLタグを覚えるよりは100倍楽なので、ぜひ覚えてくださいね!

この記事では以下の解説をします

・マークダウンとは?
・マークダウンの書き方
・マークダウンが書けるテキストエディタ

マークダウンとは?

マークダウンはテキスト形式の一つで、h(見出し)やul(箇条書き)などのHTMLタグを簡略化して書ける形式です。

ブログ記事に適した形式という事ですね!

下書きでHTMLタグを付けたり、ひとつひとつWordPressで装飾してって面倒じゃないですか?

マークダウンで書けば、基本的なタグぐらいならちゃちゃっと書けちゃす!

WordPress上でも(Gutenbergなら)直接入力するとき、マークダウンの書き方をすると自動的に見出しや箇条書きブロックに変換してくれるんですよ!

正直かなり時短になります。

マークダウンを使った例

例えばこんな風に書きたい時

<h2>マークダウンとは?<h2>
マークダウンの魅力は以下のとおり。
<ul>
<li>ブログに適したテキスト形式</li>
<li>HTMLを簡略化できる</li>
<li>執筆速度が上がる!</li>
</ul>
記法は<a href="https://example.com">こちら</a>

これをマークダウンで書くと、

## マークダウンとは?
マークダウンの魅力は以下のとおり。
- ブログに適したテキスト形式
- HTMLを簡略化できる
- 執筆速度が上がる!
記法は[こちら](https://example.com)

どうでしょう、とてもシンプルになっていると思いませんか?

難しい書きかたをしているわけでもないので、簡単に覚えられますよ!

マークダウン記法の書きかた

冒頭でも言いましたが、WordPressのGutenberg(ブロックエディタ)なら直接マークダウンで書こうとするとブロックが自動で変換されます。

もし先にテキストエディタで書いてからWordPressに入れたいという場合は、ファイルの拡張子を「.md」に変更します。

「memo.txt」とかの「.txt」を「.md」にするだけです!

これでマークダウン形式で書き始められます。

書き終わった後、そのままコピペだと反映されないことが多いのですが、そこの操作は使っているテキストエディタで変わってきます・・・

多くはプレビュー画面をコピペすればOKなので、とりあえずそれで試してみてくださいね!

よく使うマークダウン記法

見出し

見出しは階層の数と同じだけ、シャープ「#」を付け、半角スペースを入れて見出し文を書きます。

具体的には、

- 見出し1:「# 見出し1」- 見出し2:「## 見出し2」- 見出し3:「### 見出し3」

という具合ですね、もちろん見出し4, 5もいけますよ!

箇条書き

箇条書きをするときは、頭に「-」か「*」か「+」を付け、半角スペースを入れてから箇条書き文を書きます。

インデント(文字の開始位置)をずらせば、箇条書きの中に箇条書きを入れられます。

- 箇条書き1 - 箇条書き1.1+ 箇条書き2 + 箇条書き2.1* 箇条書き3 * 箇条書き3.1

「-, +, *」に違いは特にないので、好きなものを使いましょう。

もし番号付きの箇条書きしたいときは、「1. 」という形で、「番号. (カンマ,半角スペース必須)」という書き方をします。

1. 箇条書き1 1. 箇条書き1-12. 箇条書き2 1. 箇条書き2-13. 箇条書き3 1. 箇条書き3-1

引用

引用したいときは、「> (スペース必須)」を頭に付けます。

> 引用したい文字を書きます。

テキストリンク、画像

テキストリンクは「[テキスト](URL)」という形で書きます。

[~はこちら](https:asptokanolink)

画像もマークダウンで書けます。

書き方はテキストリンクの形式に似ていて、先頭にエクスクラメーション「!」が付きます。

![altに入る文字](画像のURL)リンク付きの画像の場合:[![alt文字](画像のURL)](リンク)

コード

HTMLやCSS,プログラムなどの文字をそのまま表示させるコードブロックは、「```」で囲みます。

```ソースコード複数行でも大丈夫です。```

文字装飾

そのほかに文字を装飾する場合の書きかたも紹介します。

太字

太字はアスタリスク「*」2つで囲みます。

**挟まれた文字が太字になります**

取り消し線

ブラックジョーク書くときとか、たまに使いますよね。

取り消し線はにょろにょろ「~」(名前知らない…)で囲みます。

~取り消し線を付けたい文~

マークダウンに対応したテキストエディタ

最後に筆者が使っている(使っていた)マークダウン対応のテキストエディタを2つ紹介します!

どちらもWindows, Mac両方対応しているので、気になったら試してくださいね!

どちらも無料なのでぜひ!

Typora

Typoraは強力なマークダウンエディタの一つです!

リアルタイムプレビューもできるし、ショートカットも豊富。

シンプルでオシャレです。

昔はフリーズして書き途中の文章が保存できないで消えるなんて事故も多かったのですが、今は大丈夫(なハズ)

VisualStudioCode

エンジニア御用達「VSCode」ことVisual Studio Codeです!

こちらはテキストエディタなのですが、色々な機能を後付けできる凄い子です!

後付けできる機能にプレビューやHTML変換などがあるので、それを入れればOKです。

マークダウン用の後付け機能も含めて無料です!

もしプログラミングの勉強もしていたり、ブログに関連してHTMLやCSSを書くことがある人なら絶対こっちがおすすめですね!

さいごに

マークダウンについてのまとめは以上です!

ちなみにテキストエディタはブラウザ上で動かせるものもあるので、色々探してみてくださいね。

もし分からないことがあれば、気軽にお問い合わせください!

コメント欄も開放していますし、TwitterやLINE@もやっているのでお好きなところからご連絡いただいて大丈夫です。

マークダウンは慣れてしまえば早くて楽なので、ぜひ試してみてください!

あわせて読みたい

今日の記事では、ブログ記事の基本的な書き方について解説します!その中でも解説するのは面白い文章を書くスキルではなく、主に記事の構成についてです!これができることによって、以下のような利点があります。読みやす[…]

eye catch: writing composition


 

最後まで読んでいただき
ありがとうございます!

ブログに関する悩みはいつでもご相談くださいね!

 

\ Twitterのブログ仲間を募集中です/
⇒Twitterを見てみる

 

▼当サイトのテーマ『THE THOR』▼

The thor