Atom

ブログを快適に書く道具として、エディタはホント重要だと思うんですよ。

こんにちは。ブログエディタ迷子、赤ペソ先生(@spinf60 )です。


今回は、ブログエディタ迷子の私が試行錯誤の末たどり着いたオススメのエディタ『Atom』についてのお話です。


SPONSORED LINK


Windows Live Writerよりも良いブログエディタは無いのか?

わたしは、ブログを書く時Windows Live Writerというブログエディタを使っています。


Windows Live Writerは、わたしが使っているライブドアブログでも使えますし、WordPressなどでも使えます。

ブログのデザインをダウンロードして、ブラウザで見た時と同じ状態で確認しながらブログを書くことができます。

プラグインで機能追加できるのも便利だし、記事を書いたらそのまま投稿できるのもすごく便利。


が、わたしがライブドアブログの設定をいじりすぎたせいか、プレビュータブで表示を確認しようとしてもうまく表示されなくなってしまったんです(^_^;)

かと言って、ブラウザでライブドアブログにアクセスして直接書くのはめんどくさい。そんなわけで、より良いエディタが無いか調べてみました。

その調査途中でWindows Live Writerの後継ソフト Open Live Writer というのがリリースされているのを知ったのでインストールしたんですが、機能的にはほぼ変わらなかったので華麗にスルーします(^_^;)


ブログエディタに求める機能

わたしがブログエディタに求めるのは、こんな機能。

  • ソースコードで記述できる(結局修正するから最初からソースコードでいい)
  • ブログに実際投稿した時と同様のスタイルを、プレビューしながら書けると嬉しい
  • マークダウン記法が使えると便利(らしい)

マークダウン記法ってのを使うと、ブログ書くのが早くなるとのことで調べて、kobitoってもよさげだったのですが、CSSが適用できなくなったっぽいので見送り。

結局たどり着いたのは、プログラマが使うAtomアトムというエディタでした。


Atomアトムとは

atom-hp

2015年6月25日に正式版v.1.0.0がリリースされた、今注目のテキストエディターです。Web開発者が作業を効率化するための様々な機能を網羅し、拡張機能も数多く公開されている優れもの。

このAtom、ホントはプログラマ向けなんでしょうけど、マークダウン記法について調べている時に偶然見つけました(笑)


Atomをブログエディタとして使う設定

Atomダウンロード

Atom公式サイトからダウンロードできます。

実行すると勝手に動きます(笑)

日本語化する

そのままだと英語表示でわかりにくいので、こちらの記事を参考に日本語化

記事の中にインストールの方法のページリンクがあります。

そのリンク先に、設定画面を出す時はcommand + , と書かれていますがWindowsユーザーならばCtrl + , で設定画面を開くことができます。


その他の設定

設定に関しては、こちらのブログに詳しく書いてありました

ハイライトする言語はhtmlに変更しておいたほうがいいです。それに関連してデータを保存する時は、htmlファイル形式で保存しておくと、次回開く時にhtmlハイライトされるのでやりやすいです


プレビューにCSSを適用する

テーマ

設定画面を開いて左側に表示されるテーマを選択すると、右側の画面に

Atom は スタイルシート を編集してスタイルを変更することもできます。

という文字が表示されています。


そのスタイルシートの部分をクリックすると、styles.lessというタブが開きます。そこにCSSを記述するとプレビュー画面で適用されます


よく使うショートカット

Windows Mac
新しいタブを開く Ctrl + N command + N
プレビュー画面を表示 Ctrl + Shift + M control + Shift + M
ハイライトする言語の変更 Ctrl + Shift + L control + Shift + L
検索・置換 Ctrl + F command + F
設定画面を開く Ctrl + , command + ,


おまけの動画


※12分くらいあるので時間がある時にごらんください♪


ちなみに、実際にAtomで入力している様子をアニメーションGIFにしてみました。

ちょっと小さいけどごらんください(クリックすると大きい画像で見れます)


Atomのいいところ

CSS適用したプレビューがリアルタイムで見れる。

Windows Live Writerでは、プレビューするのにタブを切り替えなければ行けなかったなんですが、記事を書きながらリアルタイムで変わっていくのはとてもいい。


プラグインが豊富

いろいろな機能を追加することでもっと便利にできるのがイイね。最初は最低限なんだけど。

おすすめの拡張機能

atom-beautify

適当に書いたhtmlをキレイに整形してくれます。(笑)

インストール方法は、設定画面を開いて、インストール → パッケージのインストール → 検索して出てきたら Installボタンを押す。

ちなみに、こちらのページにオススメのプラグインが書かれています。WordPressだけじゃなく、ブログを書く人にはいいので導入するといいかも。


まとめ

AtomはWindows、Mac、Linuxどれでも使えるのがいいなぁ。

ソースコードでブログを書く人には超オススメ。

ツイッターやInstagram、ブログカードなどのリンクを貼る時も結局ソースコードをいじらないといけないので、ソースコードで書きながらプレビューできるのは本当に超便利です。


そんなわけできょうの備忘録はここまで。

最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~


読者登録すると、ブログ更新した時にLINEでお知らせします♪


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


この記事が気に入ったら
いいね!お願いします♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!