エディター(Brackets)

Perl
101 Views

Bracketsでコードを書くエリアに好きな画像を定義する場合。

main.js

define(function (require, exports, module) {
 var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
 ExtensionUtils.loadStyleSheet(module, 'style.css');
});
style.css

/* style.css */
.CodeMirror-wrap::before {
    content: '';
    position: fixed;
    bottom: 0;
    right: 0;
    width: 89.6%; /*幅を微調整して下さい*/
    height: 100%;
    background: url("background.jpg") no-repeat right;/*画像までのパス*/
    background-size: cover;
}
.CodeMirror-scroll, .CodeMirror-linenumber, .CodeMirror-gutters {
    background: rgba(51, 51, 51, .6) !important;/*色を微調整して下さい*/
}
.CodeMirror-activeline-background, .CodeMirror-gutter-elt {
    background: rgba(60, 63, 65, 1) !important;/*色を微調整して下さい*/
}

上記↑の2つのコードを書いたら、1つのフォルダーに納めて下さい。
フォルダー名は、好きなフォルダーネームで、構わないと思います。
僕は、backgroundとしています。

今度はフォルダーの中に、style.cssで定義したbackground.jpgの画像もフォルダーの中に納めて下さい。

最後に、何処にフォルダーを移動させるか?ですが。
僕は、windowsを使っているので、windowsで説明して行きます。
エクスプローラーを立ち上げたら、
1PCのアイコンをクリック

2Cドライブをクリック

3userもしくはユーザー、フォルダーをクリック

4user nameもしくは、ユーザーネームをクリック

5AppDataフォルダーをクリック※隠しファイル(フォルダー)なので、非表示を表示にしてください。

6Roamingフォルダーをクリック

7Bracketsフォルダーをクリック

8extensionsフォルダーをクリック

9userフォルダーをクリック※このuserフォルダーの中に移動して再起動すれば、OKだと思います。

ここ→

コメント