知識がなくても無料のAtomエディタで執筆効率を上げる方法

• HTML記法って、なんなんだい？
• 書き方わかるけど、どんなツールでやればいいの？

という方に向けて、本記事は書きます。

設定に必要な時間は、大体10~15分ほどを見積もっていただけますといいかもしれません！

HTML記法に関しての記事を書いたのですが、 きっと「HTML記法って全然難しくない」と知っていただけると思います。

わたし自身が、今週の頭からこの記法で記事を書いているのですが、

時間でいうと、文字を起こしてから公開するまで、大体1記事あたりにかかる時間が、30〜45分程度の時間短縮になりました！

さあ、ではまずHTML記法で書くために必要な手順を見ていきましょう。

実は、たった3つだけ！

1. Atomというツールをダウンロードする
2. ツール内でササッとカスタマイズをする
3. すごく簡単な書き方に従って書く

これだけなんです！

では、以下でこの3つに関して、詳しく見て見ましょう！😊

1. Atomというツールをダウンロードする

• 使うツール名：Atom
• 金額：無料
• 設定有無：必要なし

Atomを知らない方のために、一言でご説明しますと、「プログラマも使う、世界的に有名なツール」です

もし「怖い」という方は、ササッとWikipediaなどで調べて、どれだけ有名なツール化を、確認してみてきて下さい👍

では、まず以下のサイトから、Atomをダウンロードしてください。

まずはダウンロードをしましょう！

• 「Atom」公式サイトにアクセス（https://atom.io/)
• インストールします
  • Macユーザー
    • 「DownLoad for Mac」をクリック
    • zipファイルがダウンロードされたら、解凍をして下さい
  • Windowsユーザー
    • ダウンロード完了後、「AtomSetup.exe」をクリックし、インストール完了
• すると、Atomのアイコンが表示されるはずです
• そのアイコンを、アプリケーションフォルダにドラッグ＆ドロップ
• インストール完了

初期は英語なので、日本語にしましょう！

• Atomを起動して下さい
• メニューバーにあるHelpをクリック➡WelComeGuideをクリック
• Install a Package をクリック
• Open Installer をクリック
• 画面上方に入力ボックスがあるので、そこに「japanese」と入力し、Packages をクリック
• パッケージの一覧が表示されたら、japanese-menu のInstall をクリック
• 日本語化完了✨

さあ、皆さんに朗報です！

実は、ここまで来たら、8割終わった も同然なんです！笑

「え！？」って感じですよね笑

あともう少しです！笑

2. ツール内でササッとカスタマイズする

カスタマイズといっても、ココでやらなければならないのは、先の日本語化と同じ様にパッケージのインストールをしましょう！

さて、詳しく書きますと、以下のようになります！😊

• Atomを起動して下さい
• メニューバーにあるHelpをクリック➡WelComeGuideをクリック
• Install a Package をクリック
• Open Installer をクリック
• 画面上方に入力ボックスがあるので、そこに「markdown-scroll-sync」と入力し、Packages をクリック
• パッケージの一覧が表示されたら、「markdown-scroll-sync」のInstall をクリック
• 同じ要領で、「markdown-writer」のパッケージもダウンロード
• 日本語化完了✨

3. すごく簡単な書き方に従って書く

お判りいただけた方もいらっしゃるかもしれませんが、実は本記事はHTML記法で書くために、 HTMLでの書き方は、覚えなくてもいいんです！！

HTML記法で書くために必要なのは、「マークダウン記法」という書き方です。

では、ざっと手順をご紹介いたします。

• マークダウン記法で書く
• HTML化する

では、以下で詳しく見ていきましょう！

プレビューを表示する

作業するテキストで、shift + control + M を同時押ししてください。

すると、画面にプレビュー画面が出てきます！

この画面が、マークダウン記法で書いた内容がHTMLで表示されています！

マークダウン記法で書く

簡単に説明すると、「-」や「＊」や「#」をちょこっと使うだけで、 「リスト」を作成出来たり、「太文字」や「見出し」まで作成できる書き方です！

では、実際に私が用いている書き方を見てみましょう！

わたしが使っているのは、4つだけ！

• 見出し

「# あああ」を文頭につける。#の数でどんどん小見出しになっていく。

• 太文字

 「 ** あああ ** 」の様に、**で囲む。うまくいかない場合は、前後に半角スペースを入れるといいかも！

• リスト（・型と番号型の2つがあります）

「- 」「1. 」を文頭に付ける

• 改行

文末に半角スペースを2つ付ける。「  」←これ

試しに、こちらをコピペしてみてください！

# 見出し1

## 見出し2

### 見出し3

**太文字** この左は半角スペース開けた方が良い

- リスト パターン１

- リスト パターン１

1. リスト パターン２

2. リスト パターン２

改行は最後に半角スペース2個置くと  

うまく改行される

これだけなんです！

実際の作業中の画面は、こんな感じになってます！

HTML化

あとは、プレビューの画面で「HTMLを保存」を押せば、HTML化されます。

以上で出力したものは、既にHTML化されています。

ですので、出力したものを再度Atomで開き、コピーしてブログに貼り付ければ、完成 です！

ここまで、お疲れ様でした！

まとめ

今回は、マークダウン記法で書いて、それを技術を使ってHTML記法に出力するまでの手順を、簡単にまとめてみました！

ただ、マークダウンによる記述方式は、HTML記法で用いるすべてのタグに対応しているわけではないため、例えばidやclassを指定したい時は、マークダウンで書いている画面に、直接HTMLタグを記述してしましょう！

マークダウン記法とHTMLタグが混在出来るのが、テキストエディタで作業できる最大の長所です！！

おわりに

やりやすいやり方は人それぞれなので、どんどん自分なりに書きやすいやり方を見つけて、ブログ記事の作成を効率化しましょう！

もし本記事を読み、少しでも記事の作成効率が上がりましたら幸いです！