読者です 読者をやめる 読者になる 読者になる

KIMBLO

web関係の仕事についている漫画好きのキムラさんが役に立つ情報を発信します。

markdownのeditorを使ったらブログを書くのが5倍は早くなりました

テクノロジー

スポンサーリンク

markdownのeditorを使ったらブログを書くのが5倍は早くなりました

ご存知ですか、markdownという言葉。markdownとは、手軽に書いた文書からHTMLを生成するために開発された軽量マークアップ言語の事です。こちらを使う事で、たとえば<p> こんにちは </p>なんてわざわざ書いていたものが、さくさく*1かけてしまいます。文字数で言えば、5文字分書かねばならないところを一文字で書けてしまいます。

そんなmarkdownのeditor使ってブログを書く方法について具体的に述べていきたいと思います。

markdownのeditorを使う事のメリット

markdownのeditorを使う事で得られるメリットは以下の通りです。

  1. 規則さえ覚えてしまえば、htmlベタ書きよりもはるかに早く書ける
  2. htmlタグと地の文をまぜて書く事が出来る
  3. (はてなブログで記載をする場合)見たままモード編集では余計なタグが入ってしまうのでそれを防ぐ事が出来る

こんなメリットがあるため、私はmarkdownのeditorを使う事を強く強くお勧めしています。

markdownのeditorの設定方法

本ブログははてなブログで記載をしております。また、エディタについては、無料でさくさく使える事からAtomのmarkdownエディタを使うのがもっともベストだと考えています。以下ではまず、はてなとAtomを使ったmarkdownのeditor設定方法について述べたいと思います。

はてなのmarkdownのeditorについて(PCバージョン)

PCでmarkdownのeditorにするにはとても簡単です。

設定から編集モードでmarkdownを選んでみてください。それだけです。

はてなのmarkdownのeditorについて(iphoneアプリバージョン)

iphoneアプリでも簡単です。まず、トップページの左上のギアボタンを押してみてください。 ここを押すと一番上に編集モードというのが出てきます。これをmarkdownにしちゃえば、設定は完了です。

Atomエディタでのマークダウンの使い方

まず、Atomエディタについてです。

Atomエディタとは、GitHub*2の創業者Chris Wanstrath氏がオープンソースのエディターです。

このエディタは無料で使えプラグインがめちゃくちゃあるので、eidtorとしてめちゃくちゃお勧めです。

そして、Atomには最初からmarkdownのeditorが入っています。 こちらでAtomエディタをインストールして、「control + shift + M」と押してもらうだけで、markdownのeditorが立ち上がります。

markdownのeditorの具体的な記法

いくつもありますが*3、以下6つを押さえておけば、記載に困る事は一切ありません。

「見出しタグ」は「#」の数

例えば、見出しタグの「<h2>」を使いたいなら、「##」と記載してください。 「<h3>」を使いたいなら、「###」、「<h4>」を使いたいなら、「####」、文章の頭に記載してください。

「<p>タグ」は改行

これめちゃくちゃ便利です。

一行分改行を開ければ、それらを<p></p>で囲ってくれます。

「リスト」は「*」を頭につける

これもめちゃくちゃ便利です。

一行分改行して頭に「*」を入れて箇条書きにすれば自動的に「<ul>タグ<li>タグ」で囲ってくれます!

「注釈」は「*4」が使えます。

使い方はめちゃくちゃ簡単。文章の注釈にしたい部分を「(())」で囲うだけ。囲うことでその部分には「*1」と言った注意書きがふられ文末に、囲った文言が移動します。

「引用」は「>」

他からの文言を引用したい場合には「>」が使えます。文の頭に「>」をつけてあげてください

「強調」は「*」で囲う

一つで囲うとこんな風にイタリックに、二つで囲うと太字になります。

「markdownのeditorを使ったらブログを書くのが5倍は早くなりました」のまとめ

今回はmarkdownのeditorを使ったブログの記載方法についてご紹介させていただきました。markdown記法、理解してしまうとめちゃくちゃ早くなります。この記事を元にぜひあなたが快適にブログを書けるようになればいいと思っております。

*1:具体的には本文中で述べます

*2:ざっくり言うと、ファイル管理システム。参考:GitHub · Where software is built

*3:参考:qiita.com

*4:))」

注釈をつけたいならば、「((