使ってますか、痛エディタ。

　私もね、日番谷くんを背景に設定してますよ。テンション上がるわ……。ただただ上がるわ……。
　最近Atomに乗り換えたので、その前に使っていたBracketsもご紹介。

そもそも何が面倒なのか

　cssなどのスタイルで背景画像を指定する際、cssファイルと画像が同階層にあったら、こんな風に相対パスで記述しますよね。

　エディタのテーマではこのような相対パスが使えないのです。拡張機能やパッケージとしてテーマを入れているため、格納場所から素直に呼び出しているわけではないようです。

Bracketsを痛エディタ化

　Bracketsでは二通りの方法があります。
　base64形式で読み込む方法と、相対パスの場所を特定して画像を置いておく方法です。

base64方式

　線画のオシャレな嫁の画像に見守ってもらう痛エディタを作りたい場合や、パターンのような小さく単純な画像の場合はbase64でいいと思います。大きいと地獄を見ます！！！！
　画像をbas64に変換して、url部分に入力します。base64への変換は、photoshopで画像レイヤーを右クリックしてSVGコピーするのが簡単でした。そのまま張り付けるとsvgになってしまうのではじめと終わりを削る必要がありますが……。
　photoshopがない方は[winキー]+[R]でファイル名を指定して実行し、[cmd]と入力してOKをクリック、コマンドラインで頑張ってください。cdでフォルダを変更していって、[base64 ファイル名]のコマンドでbase64形式で書き出してくれるはずです。
　その際、下記のようにdata:img/png;base64というbase64で書き出していますよという指定が必要です。pngのところは変わるかも。

相対パスに先回り方式

　嫁を全画面表示するような痛エディタを作りたかったら、テーマファイルが呼び出される場所に画像を入れてしまうという方法もあります。
　先程の相対パスを入れてみて、F12でコンソールを見てみますと、指定された画像がないというエラーが出ています。
　その場所はfile:///C:/Program　Files　(x86)/Brackets/www/styles/img.jpgとなっています。
　試しに、そのフォルダをのぞいてみると、imagesフォルダがあり、その配下に様々なアイコンが格納されていました。下記のように入力すると、元々入っていたBracketsのアイコンが呼び出されてBrackets愛のあるエディタになります。

　このように、呼び出し元の相対パスに画像を入れ込むと、大きな画像でも入れられます。

Atomを痛エディタ化

　Atomも相対パスじゃ通らなかったのですが、Atomはもっと簡単です。
　例えば、atom-syntaxというテーマパッケージの中にimagesディレクトリを作成して、img.jpgという背景画像を格納した場合、呼び出し方は下記のようになります。

　絶対パスなんだけど、atom基準。
　どういう仕組みなんだろうなぁ……。

　表示されない場合は、背景色が上にかぶっている可能性があります。
　新規テーマ作成時のbase.lessの上数行は

　という感じになっているかと思います。
　ここでatom-text-editorにbackground-imageを単純につけても背景色のほうがなぜか強い。
　そのため、背景色はもっと下のレイヤーにつけてあげる必要があります。

　こんな感じ。
　もしくは、@syntax-background-colorを半透明にしてあげたら可読性上がるかもしれませんね。

　ちなみに、既存のテーマをいじるのは嫌だなぁと思って新規でテーマを作成することにしたのですが、こちらの【Atom】完全版！オリジナルテーマを作って公開！～自作テーマの作成と公開の仕方③～という記事がとても参考になりました。
　
　Atomは背景を付けることができるパッケージがありますが、あのパッケージはクソ重いのでテーマ作っちゃうほうがストレスないですね。アニメーションも好きな感じにできるし。

ちなみに

　日番谷くんエディタはこんな感じです。新規で作って色そのまま。そのうち色を十番隊カラーにする。
　このスクショはAtomですが、Bracketsでも同じような見た目でした。なので、BracketsではBase64方式で表示してました。最初画像を大きくしすぎて編集中に地獄を見ましたが。

　羽織も素敵だけど軍服っぽい日番谷くんもたまらないですね。