新しいパソコンにサクラエディタをインストールしたときに行った設定をメモしておきます。
ダウンロード
こちらのページからダウンロードを行います。
今回はVersion 2をダウンロードしました。
ダウンロードしたファイルを実行してインストールします。
インストールは特に設定を変更せずに進めました。
タブの表示
サクラエディタを開いて設定を行います。
デフォルトだと新しいファイルを開くたびに新しくウインドウが開くため、タブ表示にして1つのウインドウで切り替えられるようにします。
設定 > タブバーの表示 を選択することで設定できます。
このようにタブで複数ファイルを開くことができるようになります。
HTMLファイルの設定
拡張子毎の設定を行います。
設定 > タイプ別設定一覧 をクリックします。
HTMLを選択して、設定変更をクリックします。
ウインドウタブを選択します。
デフォルトの文字コードをUTF-8にして、OKをクリックします
これで設定完了です。
他にも色々と設定できるので、好みに合わせて設定を行ってください。
CSSファイルの設定
基本的にはHTMLと同じですが、CSSはデフォルトでは設定がないので設定の追加を行う必要があります。
設定 > 共通設定 をクリックします。
強調キーワードタブを選択します。
セット追加をクリックします。
セット名にCSSと入力してOKをクリックします。
インポートをクリックします。
C:\Program Files (x86)\sakura\keyword 内に強調キーワードで使用するファイルが入っているので、この中からCSS2.kwdを選択します。
(ファイルの場所はインストールした場所によって異なります。)
強調するキーワードが表示されました。
OKをクリックします。
設定 > タイプ別設定一覧 をクリックします。
追加をクリックすると、設定が追加されます。
追加した設定を選択した状態で設定変更をクリックします。
スクリーンタブを開いて、設定の名前をCSSに、ファイル拡張子をcssに設定します。
ウインドウタブを開いて、デフォルトの文字コードをUTF-8にします。
カラータブを開いて、協調キーワードをCSSに、コメントスタイルのブロック型に/* */を追加します。
OKをクリックすると設定完了です。
JavaScriptファイルの設定
JavaScriptの設定もCSSとほぼ同じ流れです。
設定 > 共通設定 をクリックします。
強調キーワードタブを選択します。
セット追加をクリックします。
セット名にJavaScriptと入力してOKをクリックします。
インポートをクリックして、C:\Program Files (x86)\sakura\keyword からJavaScript.kwdを選択します。
(ファイルの場所はインストールした場所によって異なります。)
OKをクリックします。
設定 > タイプ別設定一覧をクリックします。
追加をクリックします。
追加した設定を選択した状態で設定変更をクリックします。
スクリーンタブを開いて、設定の名前をJavaScriptに、ファイル拡張子をjsに設定します。
ウインドウタブを開いて、デフォルトの文字コードをUTF-8にします。
カラータブを開いて、強調キーワードをJavaScriptに、コメントスタイルのブロック型に/* */を追加、行型に// を追加します。
OKをクリックするとJavaScriptの設定が完了しました。
他に言語を設定したい場合、同じように追加していってください。
Zen Codingの追加
こちらのページからダウンロードを行います。
解凍後、C:\Program Files (x86)\sakuraにmacroという名前のディレクトリを作成して、ZenCoding.jsをコピーします。
サクラエディタに戻って、設定 > 共通設定 をクリックします。
マクロタブを選択します。
参照をクリックして、C:\Program Files (x86)\sakura\macro\を選択します。
(ファイルの場所はインストールした場所によって異なります。)
FileからZenCoding.jsを選択して、名前にZenCodingを入力して設定をクリックします。
マクロ一覧にZenCodingが追加されました。
続いてキー割り当てタブを選択します。
Zen CodingをCtrl + Eで使いたのですが、サクラエディタでは「機能から行切り取り(折り返し単位)」ですでに使われているので、まずは割り当ての解除から行います。
種別で編集系を選択して、機能から行切り取り(折り返し単位)を選択します。
機能に割り当てられているキーのCtrl+Eを選択して、解除をクリックします。
これで割り当ての解除が完了しました。
続いてAltにチェックを入れ、Alt + Zを選択して割付をクリックします。
行切り取り(折り返し単位)に別のショートカットキーが割り当てられました。
次にZen CodingにCtrl + Eを割り当てます。
種別で外部マクロを選択して、機能からZenCodingを選択します。
Ctrlにチェックを入れ、Ctrl + Eを選択して割付をクリックします。
これで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を展開できるようになりました。
カラーの変更
サクラエディタの配色を変更してみたいと思います。
設定 > タイプ別設定一覧をクリックします。
HTMLを選択して設定変更をクリックします。
カラータブを選択します。
左側の部分を変更することで、配色を細かく変更できます。
今回は以前使っていた設定をエクスポートしていたので、インポートで設定を行いました。
配色が変更されたのが確認できました。
JavaScript・CSSも同様に設定すればOKです。
ショートカットキーの変更
Zen Codingの設定でも少し触りましたが、ショートカットキーを自分で使いやすいように変更してみます。
今回はCtrl + W でファイルを閉じるようにしてみます。
設定 > 共通設定をクリック。
キー割り当てタブを選択します。
デフォルトではCtrl + Wは現在位置の単語で使われているので、割り当ての解除から行います。
種別で選択系を選択して、機能から現在位置の単語を選択、機能に割り当てられているキーのCtrl + Wを選択して解除します。
割り当ての解除が完了しました。
種別からファイル操作系を選択して、機能から閉じるを選択します。
Ctrlにチェックを入れて、Ctrl + Wを選択して割付をクリックします。
これでCtrl + Wでファイルを閉じられるようになりました。
【参考サイト】
コメントが承認されるまで時間がかかります。