サーモンのおすし

日々の雑記や、ブログを運営していく中で気づいた事を記載していきます。

Atomの使い方〜Mac編〜その1、MarkdownからHTMLへ。便利すぎるエディタの使い方。

Google Adsense

f:id:takuyakonno1989:20150909180128p:plain

画像はこちらから引用しました。
atom.io

 

ブログを書くのに効率化を図っていたんですけど、この「書く」こと自体を効率化させようとした時に、「Markdownで書く」というのが私に合っている、一番早い方法だなと思いだしたんです。


昔は(といってもブログ歴は本当に浅いです)Marseditで書いていたのですが、試用期間しか使っていないし、なんだか4000円もあれに払うのはってケチくさいことを思っていました。


そんな時に出会ったのが今回紹介するMarkdownエディタの「Atom」です。これは本当に優秀でした。

はてなブログのエディタでMarkdownしてみるものの。

最初は調子良く書いていたんですけど、色々と弊害が起こってきたんです。例えば「途中でHTML記法に変えられない」ということもひとつ。


こうなると望みは「Markdownで書いて、それをHTMLに自動変換してくれるようなエディタを探す」ということになります。

無料のエディタを漁ってみた結果

無料のエディタについては色々な所で色々と紹介されていたのでさほど苦労せずに見つけて、実際にダウンロード、執筆といったところまでやってみました。
その中でもやはり「Atom」は筆者にピッタリでした。

さあAtomをダウンロードだ!その方法は?

Atomには公式ページがありますのでそこからダウンロードをしていきます。


公式HPはこちら


ダウンロードをしたらDownloadフォルダにアプリケーションがあるかと思いますので立ち上げてみましょう。

Atomの使い方。まずは日本語化!

日本語化についてはこちらの方が作成してくださったものをインストールしていきます。  

syonxさんHP

やり方です。

  1. Atomを立ち上げる。

    f:id:takuyakonno1989:20150909180248p:plain

  2. 左上のメニューバーから「Atom」→「preferences」を開く。 f:id:takuyakonno1989:20150909180316p:plain

  3. Installをクリック  

    f:id:takuyakonno1989:20150909180413p:plain

  4. 「japanese-menu」と入力、ダウンロードをする。

    f:id:takuyakonno1989:20150909180427p:plain

  5. ダウンロードが終わると見事日本語化されている!

    f:id:takuyakonno1989:20150909180438p:plain

いやあ、作成してくださった方、本当に感謝です。そのお陰でこうして快適にブログの執筆を行えているわけですからね。


そしてこのAtomの記事がある雑誌はこちら。詳しく知りたい方におすすめです。

 

Atomは途中でHTMLを入れても大丈夫!

この記事はもちろんAtomで執筆を行っているのですが、この通り、上のAmazonのリンクをHTMLのまま挟んでもしっかりとプレビュー表示されるんです。すごい!

f:id:takuyakonno1989:20150909180507p:plain

ちなみにプレビューは「Shift + control + M」で見ることができます。新しい仕様になって標準装備されたようです。嬉しいですね。

HTMLとして出力するには。

はてなブログへと移す場合、HTMLに変換して移しています。その場合は、「プレビュー画面で右クリックをします」。

f:id:takuyakonno1989:20150909180536p:plain

すると「Save as HTML」という項目がありますのでこちらを選択。するとHTMLのコードがプレビュー画面に表示されます。

 

f:id:takuyakonno1989:20150909180612p:plain

 

上の方のコードは使用せず、本文にまつわる所のみを抜粋しましょう。 

f:id:takuyakonno1989:20150909180628p:plain

日々アップデートされるAtom  

まだまだ発展途上のエディタなのか、日々アップデートされているようです。 

 このオシャレな感じに機能満載なAtom。今の所言うこと無しです。

ただ、まだまだ手探りで使っています。便利な使い方をご存知の方、ご教授願います〜。

終わり。

Google Adsense span.author.vcard { display: none; }