サイト制作に関するメモ書き

HOME > その他 > サクラエディタのインストール後の設定

サクラエディタのインストール後の設定

新しいパソコンにサクラエディタをインストールしたときに行った設定をメモしておきます。

ダウンロード

こちらのページからダウンロードを行います。
今回はVersion 2をダウンロードしました。

setting-of-sakura-editor01

ダウンロードしたファイルを実行してインストールします。
インストールは特に設定を変更せずに進めました。
 

タブの表示

サクラエディタを開いて設定を行います。
デフォルトだと新しいファイルを開くたびに新しくウインドウが開くため、タブ表示にして1つのウインドウで切り替えられるようにします。

設定 > タブバーの表示 を選択することで設定できます。

setting-of-sakura-editor02

このようにタブで複数ファイルを開くことができるようになります。

setting-of-sakura-editor03

 

HTMLファイルの設定

拡張子毎の設定を行います。
設定 > タイプ別設定一覧 をクリックします。

setting-of-sakura-editor04

HTMLを選択して、設定変更をクリックします。

setting-of-sakura-editor05

ウインドウタブを選択します。

setting-of-sakura-editor06

デフォルトの文字コードをUTF-8にして、OKをクリックします

setting-of-sakura-editor07

これで設定完了です。
他にも色々と設定できるので、好みに合わせて設定を行ってください。
 

CSSファイルの設定

基本的にはHTMLと同じですが、CSSはデフォルトでは設定がないので設定の追加を行う必要があります。
設定 > 共通設定 をクリックします。

setting-of-sakura-editor08

強調キーワードタブを選択します。

setting-of-sakura-editor09

セット追加をクリックします。

setting-of-sakura-editor10

セット名にCSSと入力してOKをクリックします。

setting-of-sakura-editor11

インポートをクリックします。
C:\Program Files (x86)\sakura\keyword 内に強調キーワードで使用するファイルが入っているので、この中からCSS2.kwdを選択します。
(ファイルの場所はインストールした場所によって異なります。)

setting-of-sakura-editor12

強調するキーワードが表示されました。
OKをクリックします。

setting-of-sakura-editor13

設定 > タイプ別設定一覧 をクリックします。

setting-of-sakura-editor14

追加をクリックすると、設定が追加されます。

setting-of-sakura-editor15

追加した設定を選択した状態で設定変更をクリックします。

setting-of-sakura-editor16

スクリーンタブを開いて、設定の名前をCSSに、ファイル拡張子をcssに設定します。

setting-of-sakura-editor17

ウインドウタブを開いて、デフォルトの文字コードをUTF-8にします。

setting-of-sakura-editor18

カラータブを開いて、協調キーワードをCSSに、コメントスタイルのブロック型に/* */を追加します。

setting-of-sakura-editor19

OKをクリックすると設定完了です。
 

JavaScriptファイルの設定

JavaScriptの設定もCSSとほぼ同じ流れです。
設定 > 共通設定 をクリックします。

setting-of-sakura-editor20

強調キーワードタブを選択します。

setting-of-sakura-editor21

セット追加をクリックします。

setting-of-sakura-editor22

セット名にJavaScriptと入力してOKをクリックします。

setting-of-sakura-editor23

インポートをクリックして、C:\Program Files (x86)\sakura\keyword からJavaScript.kwdを選択します。
(ファイルの場所はインストールした場所によって異なります。)

setting-of-sakura-editor24

OKをクリックします。

setting-of-sakura-editor25

設定 > タイプ別設定一覧をクリックします。

setting-of-sakura-editor26

追加をクリックします。

setting-of-sakura-editor27

追加した設定を選択した状態で設定変更をクリックします。

setting-of-sakura-editor28

スクリーンタブを開いて、設定の名前をJavaScriptに、ファイル拡張子をjsに設定します。

setting-of-sakura-editor29

ウインドウタブを開いて、デフォルトの文字コードをUTF-8にします。

setting-of-sakura-editor30

カラータブを開いて、強調キーワードをJavaScriptに、コメントスタイルのブロック型に/* */を追加、行型に// を追加します。

setting-of-sakura-editor31

OKをクリックするとJavaScriptの設定が完了しました。
他に言語を設定したい場合、同じように追加していってください。
 

Zen Codingの追加

こちらのページからダウンロードを行います。
解凍後、C:\Program Files (x86)\sakuraにmacroという名前のディレクトリを作成して、ZenCoding.jsをコピーします。

サクラエディタに戻って、設定 > 共通設定 をクリックします。

setting-of-sakura-editor32

マクロタブを選択します。

setting-of-sakura-editor33

参照をクリックして、C:\Program Files (x86)\sakura\macro\を選択します。
(ファイルの場所はインストールした場所によって異なります。)

setting-of-sakura-editor34

FileからZenCoding.jsを選択して、名前にZenCodingを入力して設定をクリックします。

setting-of-sakura-editor35

マクロ一覧にZenCodingが追加されました。
続いてキー割り当てタブを選択します。

setting-of-sakura-editor36

Zen CodingをCtrl + Eで使いたのですが、サクラエディタでは「機能から行切り取り(折り返し単位)」ですでに使われているので、まずは割り当ての解除から行います。

setting-of-sakura-editor37

種別で編集系を選択して、機能から行切り取り(折り返し単位)を選択します。
機能に割り当てられているキーのCtrl+Eを選択して、解除をクリックします。

setting-of-sakura-editor38

これで割り当ての解除が完了しました。
続いてAltにチェックを入れ、Alt + Zを選択して割付をクリックします。

setting-of-sakura-editor39

行切り取り(折り返し単位)に別のショートカットキーが割り当てられました。

setting-of-sakura-editor40

次にZen CodingにCtrl + Eを割り当てます。
種別で外部マクロを選択して、機能からZenCodingを選択します。

setting-of-sakura-editor41

Ctrlにチェックを入れ、Ctrl + Eを選択して割付をクリックします。

setting-of-sakura-editor42

これでZen CodingをCtrl + Eで使えるようになりました。
 

Zen Codingの内容変更

このままでもZen Codingを使えますが、ZenCoding.jsの中身を少し書き換えて、自分が使いやすいようにカスタマイズしてみたいと思います。
その際、一旦別のディレクトリに移して変更する必要があるので注意してください。

display:table; と display:table-cell; をそれぞれ d:t と d:tc でも展開できるようにしたいので、126行目に以下を追加します。

"d:t" : "display:table;",
"d:tc" : "display:table-cell;",

行数を指定していますが、必ずその行でなければいけないということはありません。
保存後、ファイルを上書きすると適用されます。

続いて、jsファイルでforを展開できるようにしてみます。
601行目に以下を追加します。
600行目の最後に,を忘れないように注意してください。

// js
'for' : 'for (var i = 0; i < Things.length; i++) {${newline}'
+ '${indentation}|${newline}'
+ '}'

厳密にはhtmlファイルでも展開できるようになっていますが、jsファイルでforを展開できるようになりました。
 

カラーの変更

サクラエディタの配色を変更してみたいと思います。
設定 > タイプ別設定一覧をクリックします。

setting-of-sakura-editor43

HTMLを選択して設定変更をクリックします。

setting-of-sakura-editor44

カラータブを選択します。

setting-of-sakura-editor45

左側の部分を変更することで、配色を細かく変更できます。
今回は以前使っていた設定をエクスポートしていたので、インポートで設定を行いました。

setting-of-sakura-editor46

配色が変更されたのが確認できました。

setting-of-sakura-editor47

JavaScript・CSSも同様に設定すればOKです。
 

ショートカットキーの変更

Zen Codingの設定でも少し触りましたが、ショートカットキーを自分で使いやすいように変更してみます。
今回はCtrl + W でファイルを閉じるようにしてみます。

設定 > 共通設定をクリック。

setting-of-sakura-editor48

キー割り当てタブを選択します。

setting-of-sakura-editor49

デフォルトではCtrl + Wは現在位置の単語で使われているので、割り当ての解除から行います。

種別で選択系を選択して、機能から現在位置の単語を選択、機能に割り当てられているキーのCtrl + Wを選択して解除します。

setting-of-sakura-editor50

割り当ての解除が完了しました。
種別からファイル操作系を選択して、機能から閉じるを選択します。

setting-of-sakura-editor51

Ctrlにチェックを入れて、Ctrl + Wを選択して割付をクリックします。

setting-of-sakura-editor52

これでCtrl + Wでファイルを閉じられるようになりました。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP