【モブログ】覚えておきたいマークダウン記法とおすすめエディタ

wpid-20150823084457.jpg

「モブログと言えばこっこさん!」と言われたい、こっこ(@cocco00)です。

モバイル端末でブログを書くことを「モブログ」と言っていますが、私は生粋のモブロガーです。
当ブログの記事は95%くらい(感覚値ですw)がiPhoneのみで書かれており、モブログという執筆スタイルがなければ私はブログを続けていられなかったと思います。

いかに快適にモブログするか。
そのひとつに、「いかに楽にhtmlタグを入力するか」があります。

アイキャッチ

マークダウン記法ならタグ打ちが超ラク!

いかに楽にタグを打つか。
その答えのひとつがTextExpanderというアプリ。

TextExpander 3 + custom keyboard
カテゴリ: ユーティリティ, 仕事効率化
価格: ¥600
アプリをダウンロードする

特定の文字を入力すると、自動的に登録してあるテキストを呼び出してくれるアプリで、モブロガーには欠かせないアプリのひとつです。

Macアプリもあるので、モブログじゃなくPCで記事を書くときにも使うことができます。
が、私はwinユーザーw

たまにPCで記事を書くときにTextExpanderが使えないのは不便。

なので、最近はマークダウンで記事を書くようにしています。マークダウンで書くなら、PCでのテキストエディタはメモ帳で十分。

モブログで私が使うタグは限られている

記事を書くときに使うタグって、私はそう多くはありません。

使うのって、

  • 見出しタグ(h2,h3)
  • 強調タグ(strong)
  • 引用タグ(blockquote)
  • リストタグ(ul,ol,li)
  • 改行タグ(br,p)

くらい。

これらをTextExpanderで呼び出して書いていましたが、「マークダウンで書いておけば、PCとiPhone間でテキストを授受しながらシームレスに執筆できるんじゃないか」と遅まきながら気付いたんです。

覚えておきたいマークダウン記法

マークダウン記法はとても簡単。

例えば見出しタグ。

h2タグを入力したいときは

## これが見出しになる

こんな感じで書きます。文頭に#を2つ並べるだけ。
これをhtml変換すると、

<h2>これが見出しになる</h2>

というように置き換わります。
※表示の関係で<>を全角にしています。

タグを手打ちするより圧倒的に楽ですね。使っているタグのマークダウンだけ覚えておけば良いわけです。

見出しタグ

上の例で紹介したとおり、見出しタグは「#」を文頭に付けるだけ。#の数が見出しのレベルと合致します。

マークダウン

### 見出しh3

HTML

<h3>見出しh3</h3>

強調タグ

強調タグは「**」もしくは「__」でテキストを囲います。

マークダウン

**アスタリスクで囲うと強調**
__アンダースコア2個で囲ってもOK__

HTML

<strong>アスタリスクで囲うと強調</strong>
<strong>アンダースコア2個で囲ってもOK</strong>

引用タグ

引用したいときは文頭に「>」を入れます。

マークダウン

> 引用する

HTML

<blockquote>
引用する</blockquote>

※改行があるときは、すべての段落の文頭に>を入れる必要があります。

リスト(箇条書き)タグ

箇条書きのリスト(ul)は、「-」「+」「*」のいずれかを文頭に入れればOK。

マークダウン

– マイナス
– プラス
– アスタリスク

HTML

<ul>
<li>マイナス</li>
<li>プラス</li>
<li>アスタリスク</li></ul>

リスト(順序有り)タグ

頭に数字の入った順序有りのリスト(ol)は「1.」「2.」のように、数字に.を付けたものを文頭に入れます。
このとき、数字は何でもOK。

マークダウン

1. 数字入りのリスト
3. 文頭の数字と
1. 実際に表示される数字は
4. 合致しません

HTML

<ol>
<li>数字入りのリスト</li>
<li>文頭の数字と</li>
<li>実際に表示される数字は</li>
<li>合致しません</li></ol>

改行タグ

brタグを入れたいときは、半角スペースを2つ並べます。
pタグを入れたいときは、空白の行を入れます。

マークダウン

祇園精舎の鐘の声(半角スペース2つ)
諸行無常の響きあり

沙羅双樹の花の色(半角スペース2つ)
盛者必衰の理をあらはす

HTML

<P>祇園精舎の鐘の声<br />
諸行無常の響きあり</p>

<p>沙羅双樹の花の色<br />
盛者必衰の理をあらはす</p>

おすすめのマークダウンエディタ

マークダウンで書いたら、これをHTMLに直す必要があります。

マークダウンをHTMLに変換したり、プレビューしたりするiPhoneアプリはいろいろありますが、やはりオススメはTextwellです。

Textwell
カテゴリ: 仕事効率化, ユーティリティ
価格: ¥360
アプリをダウンロードする

Textwellがないと私はブログが書けませんw

Textwellはアクションという便利な機能を使うことでいろいろなことができます。
私がモブログで使っているアクションをまとめた記事はこちら。

iPhoneでブログを書くために使っているTextwellアクション(2015年6月) |
当ブログ『イロトリドリ』の記事は大半がiPhoneだけで書かれています。ちょっとした移動時間やスキマ時間にちょこちょこっと記事を書いて仕上げる、というのが私のライフスタイルにはマッチしています。私がi…

マークダウンをHTMLに変換するアクションが、「Markdown Preview」という公式アクション。アクション集からインストールできます。

マークダウンで書く

△マークダウンで記事を書き、

アクション起動

△Markdown Previewを実行。

HTMLを取得

△プレビューが表示されます。確認したら左上の×をタップ。HTMLを取得をタップすると

HTMLに変換される

△マークダウンがHTMLに置き換わります。

これなら簡単にタグ入力できますね。

Textwellは本当に神アプリだ。htmlタグも、画像も、アフィリエイトリンクも、すべてこのアプリだけで簡単に作れちゃう。

トリまとめ

マークダウン、めちゃくちゃラクです。htmlへの変換も一瞬で出来るし。

TextExpanderももちろんラクなんですが、リストタグはマークダウンのほうがラクだし、TextExpanderだと後からタグを付けるのが手間。

TextExpanderのタグ入力とマークダウンを併用して、最後に全部html化、というのが、実際の今の私のスタイルだったりします。

タグ入力の手間軽減策として、マークダウン記法をぜひ試してみてください。

それでは。
こっこ(@cocco00)でした!

Textwell
カテゴリ: 仕事効率化, ユーティリティ
価格: ¥360
アプリをダウンロードする

wpid-20150823084457.jpg
ジブン手帳2018予約開始!

JT2018

話題のジブン手帳2018の予約販売がスタートしています!特にBizのminiは人気が予想されます。お買い漏れのないように!

コメントを残す