キャリまが

30代で未経験からグローバル企業に転職した筆者が、英語、お金、子育てなどについて語るブログ

Markdown記法の使い方!すべてのスマホブロガーがマスターすべき、そのメリットを紹介します


Markdown記法って聞いたことあるけど、実際どうなの?←そんな人にオススメです。
こんにちは、キャリまが管理人のヘルペスもちです。
8月に2万PV、収益1.7万円を達成したときにも書きましたが、9月からはてなブログのMarkdown記法を使って記事を書いています。
みなさんMarkdown記法って聞いたことありますか?
僕はこれまでずっとはてなブログの「見たまま記法」で書いてきましたが、ここ3日間Markdown記法を使ってみた感想は、結蘭から言うと、Markdown最高ですね。

何故もっと早くマスターしなかったのか悔やまれます。
すべての副業ブロガー、特にスマホを主に書いているブロガーは今すぐMarkdown記法をマスターすべきですよ。
なぜなら。
Markdown記法を使えばスマホだけで完成度の高い記事が書けてしまうからです!
時間のない副業ブロガーはスマホで記事を書くことが多いと思いますが、スマホだけだとどうしても出来ない部分があり、最終的にPCで編集しているという人がほとんどだと思います。
ですが、Markdown記法を使えば、スマホだけでPC並みの記事が書けてしまいます。
ちなみにこの記事も100%スマホだけで書きました!

というわけで、Markdown記法について紹介したいと思います。


Markdown記法を使ってスマホだけで完成度の高いブログ記事を書く方法:そもそもMarkdown記法とは

Markdown記法についてよく知らない人のために、簡単に説明すると、要するにHTMLの簡易版みたいなものですかね。
ごめんなさい、専門的には全然違うかも知れないけれど、素人のイメージとしてはそんな感じです。

ちなみにWikipediaによると

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
中略
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グルーバー(英語版)により作成された。

とのこと。
HTMLのように決まったルールがあるのですが、あんなに「いかにもコード」といった、書きにくくて読みにくい文面ではなく、かなり普通の文章に近い感じで記述することが出来ます。

Markdown記法の一例

「ルール」といってもHTMLに比べるとかなり簡単なので、エディタなどなくてもメモ帳でも簡単に書くことが出来てしまいます(エディタがあった方が便利なことは言うまでもありませんが)。
たとえば、HTMLで「見出し」を付けようと思ったら<h3></h3>のようなタグで囲みますが、Markdownでは頭に###(#3つ+半角スペース)をつけるだけです。ちなみに #の数でh2〜h6まで使用できます。
他にも、箇条書きやリンクなども簡単な記法で反映させることが可能です。
くわしくはこの辺のブログを参照してみてください。

Markdownは共通規格

しかも、Markdownは「はてなブログ」特有のものでなく、業界に共通の規格ですので、Markdown記法で書いたテキストを例えばワードプレスにコピペすることも出来てしまいます。
Webコンテンツだけでなく、対応したアプリならメモやノートの記述にも適用出来てしまいます。

「見たまま記法」に比べたメリット:スマホだけで記事が完成させられる!

僕はこれまで「見たまま記法」+アプリ・ブラウザのコンビネーションで記事を書いてきました。
基本的に本文は通勤電車の中でiPhoneのメモ帳で書いて、それをアプリにコピペしていたのですが、どうしてもはてなのスマホアプリだけでは完成させられない部分があったので、そうした部分は最終的にPCからブラウザで清書していました。

「見たまま記法」+アプリ・ブラウザでは出来ないけど、Markdownなら出来ること

HTMLがそのまま書ける

はてなのスマホアプリだけではどうしても出来ないこと。それはHTMLを編集することです。
スマホのメモ帳で本文は書くことはできますが、HTMLタグをいじろうと思うと、どうしてもPC版ブラウザの「HTML編集モード」を開く必要がありました。
例えばCSSに依存した装飾や、アフィリエイトのコードを差し込もうと思ったら、「見たまま記法」ではHTML編集モードを使うしかありません。
iPhoneやiPadでも、ブラウザを開くことは出来ますが、さすがにHTMLの編集は無理がありますよね…。
しかし、MarkdownならHTMLを直接本文に記入できてしまうのです!

CSSに依存する装飾もそのまま記入可能

もう少し詳しく説明します。
さっきから言っている「CSSに依存する装飾」とは↓

こんなの

や、

こんなの

のことです。
これ、HTMLを直接いじるので見たまま記法だとどうしてもブラウザ開くしかないんですよね…。
人によっては「こんなの洒落くせぇ!」という方もいるかも知れませんが、ある程度長文の記事や比較まとめ記事なんかを書くときには必須だと僕は考えています。

これらはHTMLで書くとこんな感じ↓

<div class="broken-line-box">
こんなの
</div>

なのですが、これをわざわざブラウザを起動してHTML編集モードを開かなくても、手元のスマホで記入出来てしまうのです。
ちなみに編集画面はこんな感じです。このように、本文とならべて直接HTMLが記入できます。

もちろんアフィリエイトのコードも直接記載可能

もちろん、アフィリエイトのコードも本文にそのまま記入することが出来ます。
これも、HTML編集しなくていいので、とっても楽チンです。

画像の大きさも簡単に設定可能

アプリからでも画像は貼り付けられますが、サイズの変更が出来ず、フルサイズで貼り付けられてしまいます。
このブログの過去の記事をPCから見ると、画面いっぱいにデカデカと画像が表示されてウザいのがまだいくつかあります…。
なので僕は最近では、アプリから投稿した画像は、後でPCのブラウザで編集し、画像の四隅をドラッグしてサイズを変更するようにしていました。

これが、Markdownモードでアプリから画像を貼り付けると、このように画像タイトルが文字列として記載されます。

この文字列の末尾に:w300と付け足してやると、画像の縦横比はそのままに、幅を300に指定してやることが出来ます。こんなふうに↓
[f:id:herpes_carrier:20180903232344j:image:w300]
ちなみに高さを指定したい場合は:h300と記入します。

Markdown便利すぎる!

もう一度書きますが、これまではHTMLや画像の編集をするには、家に帰ってPCを開く必要がありました。
これが、通勤途中や会社の昼休み、トイレの個室など、いつでもどこでもスマホだけで出来るというのは、僕にとって画期的なことでした!


はてなブログでのMarkdown記法の切り替え方法

はてなブログでのMarkdown記法への切り替え方法はブラウザ・アプリともに

「設定」→「編集モード」→Markdownに切り替え

これだけです。

ただここで注意したいのが、ブラウザとアプリの記法設定は独立しており、例えばブラウザ側で見たまま記法で書いた記事は、アプリ側でも見たまま記法でしか編集出来ません。
また、ブラウザ・アプリ関係なく、過去に見たまま記法で書いた記事は見たまま記法でしか編集出来ません。その逆も然りです。


オススメエディタアプリ「MWeb」

さて、こんなに便利なMarkdown記法ですが、やはりメモ帳やはてなブログの公式アプリだけで書くのは大変です。はてなのアプリ、編集画面小さすぎですし!
というわけで色々探して見て便利なエディタアプリを見つけました。MWebというアプリです。

MWeb - Powerful Markdown App

MWeb - Powerful Markdown App

  • ou lvhai
  • 仕事効率化
  • 無料

MWebを使えば大変効率よくMarkdownで記事を書くことが出来ます。

多彩なショートカット

###など、Markdownのコードをわざわざ打たなくても、このようにショートカットキーが用意されています↓

はてなの公式アプリのMarkdown記法でもショートカットはありますが、こっちの方が多いし気が利いています。

簡易プレビュー機能

画面下の目玉のボタンをタップすると、いつでも簡易プレビューを確認することが出来ます。
リンクや見出しがきちんと思った通りになっているか、すぐに確認できます。
ちなみに、先ほど紹介したCSSに依存する装飾は反映されません。


便利なアウトライン機能

個人的に気に入っているのは、この左下のボタンのアウトライン機能です。

このように、記事を見出しだけ階層的に表示してくれます。
これにより、記事全体の構成が確かめやすくなっています。
また、現在の文字数も表示されるため、今書いている記事がどのくらいのボリュームになったか、いつでも確認できます。


Markdown記法を使ってスマホだけで記事を作成する具体的な方法

さて、最後に僕が実際にMarkdown記法で記事を書いている実際のながれを紹介したいと思います。
ちなみに僕は、これまではメモ帳で下書きし、アプリまたはブラウザにコピペし、PCで画像の貼り付け&HTMLの編集をしていました。
そのため、記事を仕上げるのにどうしても家に帰ってPCの前に座る必要がありました。
僕と同じような書き方の人も多いのではないでしょうか?

今では、まずはMWebで記事本文を仕上げます。
先ほど紹介したアウトライン機能などを使って、構成だけでなく、記事本文はMwebだけで清書まで仕上げます。
あくまで僕のやり方ですが、その際、内部リンクやアフィリエイトのリンク、カエレバのURL貼りなども後回しにせず、できるところは出来る時にリンクも貼ってしまいます。

そうすると、Mwebでの編集が終わった時点で、残りの作業は画像の貼り付けだけになります。

あとはMWebで作ったMarkdownのテキストをアプリにコピペします。
画像だけはコピペ出来ませんので、アプリ上で貼ります。サイズ指定もこの時に行います。

画像まで貼れたら、これで記事は完成ですね。
あとはアプリのプレビューでおかしなところがないかチェックし、投稿です!

つまづきポイント

実際に記事を書いてみてつまづいたポイントとして、HTMLタグで囲んだ中のMarkdownが無効になる問題がありましたね。
どういう事かと言うと、たとえばMarkdownでは本文に*を打つ事で簡単に箇条書きを作成出来ます。こんな感じに↓

* あ
* い
* う

↑これがこうなります↓

ところが、先ほど紹介したような

こういう装飾

を使いたい時、

<div class="broken-line-box">
* あ
* い
* う
</div>

と打っても、タグで囲まれた部分はこのようにMarkdownの機能が無効になってしまうのです↓

* あ * い * う

これは箇条書きだけでなく、あらゆる機能が無効になります。これはMarkdownの仕様です。

これを回避するには、このようにMarkdownではなくHTMLタグで記述する必要があります↓

<div class="broken-line-box">
<ul>
<li>あ</li>
<li>い</li>
<li>う</li>
</ul>
</div>


なんかめんどくさそうですよね?
そこは知恵と工夫で乗り切ります↓。

便利なTips

上記のように、HTMLタグを本文に併記出来るとは言え、若干の制約があるのも事実。
そこで僕は、このようによく使うHTMLタグをメモ帳にストックしてあります↓

他にも、よく使うアフィリエイトコードや内部リンクなども、全てメモ帳にストックして、そこからコピペして使うようにしています。

また、<a href="URL"></a>のようなタグはあらかじめユーザー辞書に登録してあります。


こちらは文字を赤くするタグ↓


こうしとく事で、使いたいと思った時に一瞬で記述できて便利です。

なんだか面倒なことをやっているように見えますが、これらはあくまでスマホのみで効率的に書くためのテクニックです。
そりゃもちろん毎日PCに向かって書ければそれに越したことは無いのでしょうが、僕のような副業ブロガーはスキマ時間を最大限効率化するために、こういったテクニックを使うしかありません。


まとめ:スゴ過ぎて笑えてくるレベル

いかがでしたでしょうか。
最初は少しとっつきにくいMarkdown記法ですが、慣れれば「見たまま記法」よりも確実に便利です。
何より、スマホだけでかなり完成度の高い記事が書けるのはMarkdownならではだと思います。
編集画面は本文とHTMLを併記するため、見たまま記法に比べると若干、読みづらくはなりますが、そのうち脳内でリアルタイムプレビュー出来るようになります笑。本当です。
要は慣れの問題なのです。
本当にいいもん見つけたと思いました。
副業ブロガーは効率化こそ正義です。
過去の記事でも紹介しましたが、ブログ執筆作業を効率化する方法はドンドン取り入れていくべきです。


スキマ時間でスマホで書いているという僕のような副業ブロガーの方は是非試してみてください!

それでは〜。


スポンサーリンク