editor-atom-customize

アプリ

Atomを最高のブログエディタにカスタマイズする方法

Atomは一手間かけるだけで、最高のブログエディタになります。

もちろん、無料!

記事を書くために有料のエディタをダウンロードする必要はないんですよ。

今回は、Atomをカスタマイズしてブログエディタにする方法をまとめます。

よかったら参考にしてください。

Atomをインストールしよう

eac-toppage

Atomのインストールは簡単です。以下のリンク先よりダウンロードしてください。

無料で、且つMac、Win、Linuxに対応しています。

Atom公式サイト

Atomを日本語化しよう

インストールして起動するとこんな感じになります。英語表記になっているので、日本語に直しましょう。

eac-japanese1

日本語化の手順は以下の通り。

eac-japanese2
eac-japanese3
eac-japanese4
eac-japanese5

Atomの基本設定をして使いやすくしよう

実際に文章を書いてみると、以下のように文字が折り返してくれないはず。

eac-editor1

これは環境設定にて調整します。

eac-editor2
eac-editor3
eac-editor4

フォントサイズや行間の設定は以下を参照してください。

eac-editor5
eac-editor6

AtomをMarkdownエディタとして使ってみよう

eac-md

Atomには最初からMarkdown機能が備わっているので、すぐMarkdown形式で記述することが可能です。

例えば、

# 見出し

と書くと「h1見出し」になります。

Markdown書式の記号は半角英数表記で記述し、「見出し」との間には半角スペースを入れるのがルール。

簡単でしょ?

shift + control + M でプレビュー画面を表示して記述しましょう。

Atomに入れておきたい機能拡張

Markdown記述を便利にしてくれる機能拡張(パッケージ)を2つ紹介します。

eac-osusume

markdown-scroll-sync

eac-mss1

左側のMarkdown記述画面と右側のプレビュー画面を連動してくれる機能拡張。これを入れるだけで、視認性が上がります。

ただ、ちゃんと連動させるにはMarkdown記述画面の設定を「GitHub Markdown」にする必要あり。

eac-mss2

markdown-writer

eac-mw

インストールすると以下のように機能が追加されます。

Markdownの記述法がわからなくても、これがあればMarkdown形式でマークアップすることができます。

ポイントは、とにかくこの段階でできるだけマークアップしてしまうこと。WordPressなどでマークアップするよりもこの方が圧倒的に楽で早いです。

AtomからHTMLに書き出そう

eac-html

書き出し方は簡単。

右側のプレビュー画面で右クリックして「HTMLを保存」を選択するだけ。

あとは名前と保存先を決めて出力しましょう。

まとめ

出力したものは、もうHTML化されています。

出力したものを再度Atomで開き、その中から必要な部分だけをコピーしてWordPressに貼り付ければ、記事の完成です。

お疲れ様でした!

あとがき

今回は、Markdownで記述してHTMLに出力するところまでを簡単にまとめました。

ただ、Markdownによる記述方式は、HTMLのすべてのタグに対応しているわけではありません。

一般的なMarkdownエディタの場合、例えばidやclassを指定することはできないので、そのあたりの細かい記述をしたいときはMarkdown記述画面に直接HTMLタグを記述してしまいましょう。

Markdown記号とHTMLタグを混在させられるのが、AtomをはじめとするMarkdownエディタの長所です。

まずは文章の骨組みだけをMarkdownで書き、そのあとで必要なHTMLタグを適宜挿入していくといったやり方がいいと思いますが、やり方は人それぞれなので自分なりに書きやすいやり方を見つけて、ブログ記事の作成を効率化しましょう。

-アプリ

Copyright© ゆるくやって人生優勝 , 2019 All Rights Reserved.