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

ウェブ

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

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

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

ブロガーこそ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

操作MacWindows
プレビュー表示control+shift+mCtrl+Shift+M

 

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

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

151201-5

操作MacWindows
新しいタブを開くcommand+NCtrl+N

 

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

ハイライトする言語選択

151201-6

操作MacWindows
ハイライトする言語選択control+shift+LCtrl+Shift+L

 

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

151201-7

行をまるごと移動する

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

 

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

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

ファイル内検索+置換

151201-8

操作MacWindows
ファイル内検索+置換command+FCtrl+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は書くことに集中できる最高のエディタです。みなさんもカスタマイズして自分仕様のエディタ使ってみませんか?

タイトルとURLをコピーしました