ノンプログラマがAtomをブログ用に使用するための設定やショートカットキーについて

エディタはプログラマのためだけじゃありません。ブロガーもエディタを使ってブログを書いてもいいのではないかと強く提言したい!

WordPressのエディタ画面はすごくいいんですよ。TinyMCE Advancedをインストールすれば自分好みにカスタマイズしたりリアルタイムプレビューも最近ホンモノっぽくなってきてるし……

でもあのエディタは「早く書いてくださいよ」と言われてる気がしてプレッシャーハンパないんですよ。ブロガーの方なら分かると思いますが「今日はブログ書くぞ!」って意気込んで机に座ったがいいが書けない現象が結構な確率で起こるという。

sponsored link

ブロガーこそAtomを使ってブログを書こう

151201-1

そこでAtomの登場です。
Windowsならメモ帳でMacならテキストエディットと呼ばれているあれです。

これがAtomのエディタ画面です。シンプルでいい感じですよね。これなら「書く」ということに集中できます。

151201-2

ちなみにUI Themeは「Atom Light」でSyntax Themeは「One Light」に設定しています。

151201-3

プログラマーの方が使うイメージが強いエディタですがAtomはノンプログラマでもごちゃごちゃしてない使いやすいインターフェースや自分好みにカスタマイズできる点がかなりオススメです。
またMac、WindowとLinuxに対応しているという環境を選ばず誰でも使える点も非常にいいポイントですよね。

こちらから無料でダウンロードできます。
Atom

ブロガーがAtomを使う上でオススメしたいショートカットーキー

ショートカットキーを覚えれば一段と便利になります。とりあえずこれだけは押さえておきましょう。

プレビュー表示

1512-5

操作 Mac Windows
プレビュー表示 control+shift+m Ctrl+Shift+M

 

これが出来なかったらAtomを使っていなかったかもしれませんと思うくらい神機能。ちなみにプレビューはひとつしか開くことができません。

新しいファイル(タブ)を開く

151201-5

操作 Mac Windows
新しいタブを開く command+N Ctrl+N

 

普段使っているブラウザがGoogleChromeなら問題なく使えますよね。とりあえず何かをメモしたくなった時に使ってます。

ハイライトする言語選択

151201-6

操作 Mac Windows
ハイライトする言語選択 control+shift+L Ctrl+Shift+L

 

これはただの趣味レベルの話なんですがハイライトする言語を選択できることによりプログラマっぽい雰囲気を出すことができます。ていうのは冗談で言語を「HTML」に設定しておくことにより後述するコードを書くときに便利な補完候補を表示してくれるようになります。

151201-7

行をまるごと移動する

操作 Mac Windows
行をまるごと移動する control+command+上or下 Ctrl+上or下

 

前後の文章を入れ替えたいなと思ったらこのショートカットキーで一発です。マウスで行を選択して「切り取り」して「貼り付け」する手間も必要ありません。

ちなみに行を選択するときは、Macなら「Command+L」、Windowsは「Ctrl+M」で出来ます。

ファイル内検索+置換

151201-8

操作 Mac Windows
ファイル内検索+置換 command+F Ctrl+F

 

ファイル内の任意のテキストを検索してしかも置換することもできちゃいます。例えば何回も出てくる言葉に統一性がなかったため一括で変更したいってなったときに使うとめっちゃ捗ります。

HTMLが書けない?それなら最低限5つコードだけ覚えておこう

Atomがすごいのはなんとなく分かったけどHTML書けないしWordpressエディタで十分やわーと思っているそこのあなた!

最低限これだけ覚えれば大体の記事書けます。

 

用途 コード 実際の表示
リンクを貼る <a href=”サイトのURL”>テキスト</a> テキスト
見出しタグ <h1>テキスト</h1>※1 テキスト※2
打ち消し戦 <del>テキスト</del> テキスト
箇条書きリスト <ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
  • テキスト
  • テキスト
  • テキスト
数字付きリスト <ol>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ol>
  1. テキスト
  2. テキスト
  3. テキスト

※1.見出しタグの数字は1〜5まで設定できます。
※2.SEO上ここにh1タグがくるのはマズイのでフォントサイズを変更して太字にしてタグを適用したっぽくしています。

たった5つコードを覚えればいいので楽勝ですよね。最初は慣れないと思いますが使っていくうちに自然と体が覚えていきますよ。

またもう少しHTMLについて勉強したければこのサイトがオススメです。

参考:HTMLクイックリファレンス

またサイト運営者さんは本も出しているそうです。

 

さいごにひとこと

Web素人がブログを効率よく書くために編み出した世界で一番Atomを活かしきれてない使用方法をご紹介しました。いろいろ矛盾してるけど。

もっとWebに詳しくてイジることができるなら最高の環境を構築することができますよ。ブロガーからしてもAtomは書くことに集中できる最高のエディタです。みなさんもカスタマイズして自分仕様のエディタ使ってみませんか?

この記事が気に入ったら
いいね!しよう

Twitter で

AT HOME GEEKのLINE@スタート!

ブログのご意見ご感想をお待ちしています!

僕の得意分野は、カナダへの成人向け留学、将来のこと、ハタラキカタ、離婚問題(バツ1です)、ブログや人生の悩みなどなんでも大歓迎!どんどんお待ちしております!

友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


こちらもオススメ!