ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

ブログ執筆にMarkdown記法を導入するための覚え書き。

f:id:gadgerepo:20151112233337j:plain

効率厨のガジェレポ!@gadgerepoです。こんにちわ。

筆者が WordPress でブログ記事を執筆する際、愛用している 「TextExpander」

TextExpander 3 + custom keyboard
カテゴリ: ユーティリティ
現在の価格: ¥600

Mac版は公式サイトから購入できます。

導入時の記事はコチラ。

www.gadgerepo.com

登録したスニペットによって HTML構文が簡単に入力出来るので記事執筆の時間短縮にもつながり、とても便利。

ただ、この TextExpander、Mac版と iOS版はリリースされているものの、Windows版がないので WinPC、あるいは Winタブレットで記事を執筆・更新したいときはスニペットが使えず、効率が落ちてしまいます。

Markdown とTextExpander を併用してさらに快適入力

Win環境で TextExpanderのようにスニペット入力を可能にするアプリもあるようですが、筆者的には “Mac でも Win でも iPhone でも同様の統一された方法で効率化を図りたい” ところ。 なにか他にはないものかと調べてみると、いまさらですが 「Markdown記法」 というものを知りました。

すでに多くのサイトで紹介・解説されていますが、備忘録として解説いたします。

Markdown とは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。

Markdown - Wikipedia

と紹介されているように、Markdown は簡単なルールに基づいて書かれたテキストを、HTML に変換することができる記法です。

対応するアプリや機能拡張・プラグインがあればMarkdown で書かれたテキストをHTML に変換するも、HTML をMarkdown記法に変換するも自由自在。

Markdown の構文自体も簡単なので覚えるのも楽勝。TextExpander で任意に設定していたスニペットが、シンプルな構文になったと考えればいいでしょう。

Wordpressへの Markdown記法導入

実際に Markdown記法を Wordpressで利用するには、プラグインのインストールが必要になります。

Wordpress の便利な機能が一つにまとめられたプラグイン 「Jetpack」 にMarkdown が使用可能になる機能が含まれているのでコチラをインストールします。

wordpress.org

インストール後、Jetpack の設定画面から「Markdown」を有効化します。
これで Wordpress の投稿画面、テキストエディタから Markdown記法が使用できます。

f:id:gadgerepo:20151112233722p:plain

Markdown記法の主な構文

以下に記すのは、ブログで多用する HTMLタグに変換される Markdown記法の主な構文です。

見出し

「#」の数で見出しのレベルが変わります。「#」の後にスペースが入ります。

Markdown

# 見出し h1

## 見出し h2

### 見出し h3

#### 見出し h4

HTML

<h1>見出し h1</h1>

<h2>見出し h2</h2>

<h3>見出し h3</h3>

<h4>見出し h4</h4>

段落・改行

空白行で囲まれた文章でひとつの段落となり、改行しても空白が入っていなければひとつの段落になります。

Markdown

効率厨のガジェレポ!@gadgerepoです。こんにちわ。

筆者が WordPress でブログ記事を執筆する際、愛用している「TextExpander」。
Mac版は公式サイトから購入できます。

HTML

<p>効率厨のガジェレポ!@gadgerepoです。こんにちわ。</p>

<p>筆者が WordPress でブログ記事を執筆する際、愛用している「TextExpander」。Mac版は公式サイトから購入できます。</p>

ひとつの段落の中で改行するには、改行したい行末に半角スペースを2個以上入れます。

Markdown

効率厨のガジェレポ!@gadgerepoです。こんにちわ。

筆者が WordPress でブログ記事を執筆する際、愛用している「TextExpander」。□□(半角スペース)
Mac版は公式サイトから購入できます。

HTML

<p>効率厨のガジェレポ!@gadgerepoです。こんにちわ。</p>

<p>筆者が WordPress でブログ記事を執筆する際、愛用している「TextExpander」。<br />
Mac版は公式サイトから購入できます。</p>

強調

2つの「*アスタリスク)」か「_(アンダーバー)」で文章を囲めば強調になります。

Markdown

**効率厨のガジェレポ!@gadgerepoです。こんにちわ。**

__効率厨のガジェレポ!@gadgerepoです。こんにちわ。__

HTML

 効率厨のガジェレポ!@gadgerepoです。こんにちわ。

 効率厨のガジェレポ!@gadgerepoです。こんにちわ。

引用

引用は文章の上下を空白行で囲み、文の先頭に「>」を付けます。

Markdown

Markdown とは

> Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。

と紹介されているように、Markdown は簡単なルールに基づいて書かれたテキストを、HTML に変換することができる記法です。

HTML

<p>Markdown とは</p>

<blockquote>Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。</blockquote>

<p>と紹介されているように、Markdown は簡単なルールに基づいて書かれたテキストを、HTML に変換することができる記法です。</p>

リスト

リスト表示は、行頭に「*(アスタリスク)」を入力し、スペース(あるいはタブ)を挿入します。
「-(ハイフン)」「+(プラス)」でもOKです。

Markdown

* リスト 1
* リスト 2
* リスト 3

HTML

<ul>
<li>リスト 1</li>
<li>リスト 2</li>
<li>リスト 3</li>
</ul>

番号付きリストの場合は、行頭に数字+ピリオドを入力し、スペース(あるいはタブ)を挿入します。

Markdown

1. リスト 1
2. リスト 2
3. リスト 3

HTML

<ol>
<li>リスト 1</li>
<li>リスト 2</li>
<li>リスト 3</li>
</ol>

リンク

[ ]で文章を、( )でリンク元の URL を囲むとリンクになります。

Markdown

[リンク用テキスト](http://◯◯◯.ne.jp)

HTML

<a href="http://◯◯◯.ne.jp">リンク用テキスト</a>

TextExpander との併用

Mac や iPhone での執筆時には TextExpander と併用することでさらに効率が上がります。

例えばリンクの場合、以下のように TextExpander に登録すれば……

リンク
[%|](%clipboard)
スニペット: [[

リンク元の URL をコピーした状態で「[[」と入力すれば効率的です。

iPhone や iPad で Markdown を使うには

iOS デバイスでの WordPress によるブログ記事投稿には、Markdown記法のアプリ内での HTML変換をサポートしている 「PressSync」 で執筆が可能です。

f:id:gadgerepo:20151112233822p:plain

PressSync Pro - WordPress Blogging App
カテゴリ: ソーシャルネットワーキング
現在の価格: ¥600

まとめ

構文さえ覚えてしまえば使用デバイスに係わらず入力時間が短縮化できるので便利。

ブログ執筆のスピードアップに、ぜひお試しください。