Atomを使いやすいようにカスタマイズしてみよう

私は数あるテキストエディタの中でも「Atom」というエディタを愛用しています。

atom.io

拡張性が非常に高く、公開されているパッケージをインストールすれば
簡単に機能を拡張することが出来ます。
また、自分でAtom内のcssを書き換えることでも文字色などを変更することも出来ます。

基本的なインストール方法や、パッケージの導入のやり方などは
こちらのサイトが非常に分かりやすいです。
blog.codecamp.jp

今回は私が使用しているパッケージや、 シンタックステーマを紹介します。

まずはパッケージの紹介です。

「japanese-menu」
Atomの日本語化パッケージです。 英語の方がしっくりくる方には無縁かもしれませんが、 英語が読めない私には手放せないパッケージです。

「file-icons」

このfile-iconsを導入すると、

このようにファイルの拡張子に合わせて アイコンを変更してくれます。

小さな変更ですが、使ってみると 意外と便利です。

「minimap」 このパッケージを導入すると、 右側に別のエディタで見たことあるようなアレが 表示されます。

こちらも使い勝手がよいので とりあえず入れておくことをお勧めします。

「highlight-line」

このパッケージを導入すると
これが
こうなります。

去年あたりまで、 「japanese-wrap」 というパッケージも導入していましたが、
不具合があったようなので、アンインストールしました。

次にシンタックステーマの紹介です。 Atomの文字の色はデフォルトのままだと 非常に見づらいです。

そこで、シンタックステーマを導入して、 見やすい文字色に変更しましょう。 　

あのVisualStudio2015とほぼ同じような 色で表示してくれるテーマです。 　
見慣れている色が一番使いやすいので、 私はこのテーマを使用しています。 　
他にも探してみると、 ピンク一色など非常にユニークなテーマをあるので、 自分に合うものを探してみてください。

Bootstrap3のレスポンシブ機能を無効化する

Bootstap3にはレスポンシブデザイン、

ウィンドウの幅に合わせて表示方法を変更する処理が含まれています。

スマートフォンなどに向けたデザインをする際には、

非常に優れたフレームワークだと思います。

しかしレスポンシブにする必要のない場合に

邪魔になる可能性もあります。

そこで今回はBootstrapのグリッドシステムなどは

使いつつレスポンシブの機能だけ変更したいと思います。

参考

今回の記事はこちらを参考にしました。

getbootstrap.com

レスポンシブを無効化するためのcssも用意されているようです。

自分で書きたいんだって訳ではない人は使ってみるのもありだと思います。

http://bootstrap.s1.adexd.net/non-responsive.css

使用する場合はhead内などにこの1行を追加するだけです。

概要としてはこんな感じ

・meta要素のviewportを削除する。

・レスポンシブを無効にするcssを読み込む。

・グリッドシステムを仕様する場合は"col-xs- "を使用する。

今回は最低限の機能を自分で実装したいと思います。

パスなどは自分の環境に合わせて変更してください。

HTML

css

これでグリッドシステムなどを使用したまま、

レスポンシブの機能を無効化することができます。