引き算の美学マークダウン記法とは、WordPressブログ下書き

WordPressブログに限らず、Webライティングをする場合、下書きはどのようにされていますか?

直接WordPressエディタ上だったり、Googleドキュメント、Microsoftワード、メモ帳ほか無数の方法があり、それぞれ一長一短あるかと思います。

わたしは当初、直接WordPressで下書きをしていたのですが、動作というかレスポンスがもっさりしていたり、見出し(H2、H3等)の設定が手間だったり、満足はしてはいなかったのですが、WordPressの操作方法に慣れる目的を第一に、惰性で続けていました。

自動で下書きを保存してくれますが、たまにオンライン接続が途切れたりして、上手く保存できていなかった事も何回かありました。

ある程度WordPressに慣れてきたところで、下書きの方法を色々と調べていたらマークダウン記法というものを知り、以来その虜になりテキストエディタを愛用しています。

HTMLやCSSなどWebサイト製作の知識が無くてもOK、オフライン・無料で使えるテキストエディタは軽快な動作で作業効率が大幅に改善するので、WordPressブログの下書きと好相性です!

本記事ではマークダウン記法とは、そのメリット、要となるショートカット(Syntax)、おすすめのテキストエディタ等について説明したいと思います。

スポンサーリンク

マークダウン記法とは

マークダウン記法をつくった一人John Gruber氏の言葉を借りると、「マークダウンはWebライター向けのテキストからHTMLへの変換ツールで、読み書きし易いプレーンテキスト形式で記述されたものを、構造的に有効なXHTML(或いはHTML)に変換可能です。」とあります。

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

引用元リンク:https://daringfireball.net/projects/markdown/


プレーンテキストとは、文字の大きさや色など修飾情報が含まれない(つまり書式が無い)文字列の形式、或いはファイルフォーマットです。

例えばOutlookメールでは、書式設定から以下3つが選択できるかと思います。

  • HTML(HyperText Markup Language)
  • テキスト
  • リッチテキスト

書式が無く、最も簡素なのがテキストです。

Windowsであれば「メモ帳」、Macであれば「メモ」という純正ソフトがありますが、これらもプレーンテキストと言えます。

文法と言うと大袈裟ですが、マークダウンには独特の記法(後述)があり、必ずしも暗記する必要はありませんが、いくつかのショートカット(Syntax)を活用する事で、下書きの手間が大幅に改善されます。

ショートカット(Syntax)は簡単な記号の類で、構造的に有効なXHTML(或いはHTML)を出力する要です。

構造的に有効なXHTML(或いはHTML)とは、文字の大きさや色など修飾情報を指します。

マークダウン記法で下書きするには、専用のテキストエディタが必要です。

ファイルの拡張子は.mdや.markdown等です。

誰が使うと、どんなメリットが

テキストエディタを用いてマークダウン記法するとメリットがあるのは、Webライティングをしている人です。

わたしの場合Wordpressでブログをしていて、下書きをマークダウン記法でするようになってから、作業効率が大幅に改善しました。

「メモ帳」や「メモ」などは、ちょっとしたメモを取る目的としては、動作も爆速だし手軽です。

しかしブログなどに投稿するような「文章」となると、長文になるほどプレーンテキストで文字の修飾情報が一切ない場合、どこか無味乾燥としていて、見辛いものがあります。

またプレーンテキストで下書きしたものをコピーして、WordPressに貼り付けると、結局WordPress上で文字の修飾情報を付す必要があり結構手間です。

わたしの場合、直接WordPressエディタ上で下書きをしていた時期がありましたが、H2やH3などの見出し、表テーブルなどを都度設定するのが地味に億劫でした。


かといって筆者のように全くプログラミングができない場合、HTMLやCSSでゴリゴリに文字の修飾情報などを記述するのは、かなりハードルが高いし、プレーンテキストとは別の意味で、本文以外にHTML言語があると、素人的には視覚的な見辛さがあります。

そこでテキストの軽快さや手軽さとHTMLの見栄え、それぞれの良いとこどりをしたマークダウンの出番です。

まさにHTMLに対する引き算の美学こそが、マークダウン記法と言えそうです。

ショートカット(Syntax)の一覧

マークダウン記法では、プレーンテキストにショートカット(Syntax)を用いる事で、文字の修飾情報を付す事ができます。

ショートカット(Syntax)自体は、何れも単なる記号に過ぎないので、HTMLやCSSなど特段Webサイト製作に関する知識が無い人でも、容易にマークダウンを使う事ができます。


ショートカット(Syntax)は、身近な例だとTwitterのハッシュタグ記号(#)を想像すると分かり易いと思います。ツイート本文で該当箇所が青文字になり、Twitter内で検索可能になります。

恐らく、記事を何本かマークダウン記法で下書きをしていれば、自分が頻繁に使うショートカット(Syntax)は自然に覚えてしまうのではないでしょうか。

全てを暗記する必要は全くありませんがショートカット(Syntax)を活用する事で、下書きの手間が驚くほど改善します。

無料テキストエディタ2選

オープンソースのテキストエディタ2選です。

テキストディタ名開発元初回リリース年
Visual Studio CodeMicrosoft2015年
AtomGitHub2014年

どちらも無料で使えます、その他テキストエディタは無数にありますが、独断と偏見で選んでみました。

因みにAtomの開発元であるGitHubは、2018年Microsoftにより買収されています(Microsoft to acquire GitHub for $7.5 billion)。

買収後もAtomは存続していて、現在でも問題無く使えます。わたしが一番最初に使ったテキストエディタはAtomでした。

軽快さでいうと、どのテキストエディタでもマークダウン記法で下書きする分には、そこまで体感速度は変わらないと思います。

日本語設定にしたり、マークダウン記法する為の準備(いくつか拡張機能をインストールする必要あり)は、Visual Studio Code(VS Code)の方がAtomより簡単に初期設定できると思います。

なので初めてテキストエディタを使用するなら、VS Codeが個人的にはおすすめです。

.sqlファイル形式のデータベース内文字列を一括置換するなど、作業内容次第ではパフォーマンスに違いが出てきて、VS Codeの方がAtomより早いと言えます。

例えば本番環境のWordPressをローカル環境に移行する場合(逆の場合も然り)、データベース内の文字列置換が必要になってきます。

当ブログのデータベースで試してみたところ、約12,000のURLを対象に一括で置換した場合、VS Codeで5秒程度のところ、Atomは50秒程度の時間を要しました(なんと10倍差!)

PCのスペック、動作環境などにもよるかと思いますが、一括置換などを頻繁にする機会がある場合、VS Codeの方がストレス無く使えそうです。


見た目(UI)は、慣れているせいか個人的にはAtomの方が好みです。

あとAtomだとH1・H2・H3など、それぞれの見出し(ヘッダー)に別の色が割り振られ、階層ごとに識別し易い点は、VS Codeより優れていると言えます。

最後に

マークダウン記法とは、そのメリット、要となるショートカット(Syntax)、おすすめのテキストエディタ等についての記事でした。

以下、最後にまとめです。

  • マークダウンとは軽量化されたマークアップ言語の一つ
  • 専用のテキストエディタ(無料)が必要
  • HTMLやCSSなどWebサイト製作に関する知識が無くてもOK
  • ショートカット(Syntax)を活用し、プレーンテキストに文字の修飾情報を加えHTML出力が可能
  • テキストエディタは、総合的に鑑みてVisual Studio Codeがおすすめ
  • ファイル形式(拡張子)は.mdや.markdownなど


テキストエディタを用いる事で、WordPressエディタ上で直接下書きをしていた時に比べ、保存やプレビュー画面を表示する回数が激減しました。

WordPressでは特に削除しない限り、デフォルトでは全ての保存された下書きバージョンが増え続けていくので、データベース的にもスッキリするかと思います。

またアドセンスなどを配置し、自身がログイン中に広告を表示させない設定を別途していない場合、プレビュー画面を表示し過ぎると故意なインプレッション操作と誤解を招きかねないリスクがあり、注意が必要です。





※本文は以上です。
もし記事を気に入っていただけたら、是非、SNS等でシェアいただけたらと思います!

テキストのコピーはできません。
タイトルとURLをコピーしました