サクラエディタを暗転させる方法(背景色を黒・文字を白にする)

サクラエディタを暗転させる方法(背景色を黒・文字を白にする)

サクラエディタを暗転させる方法(背景色を黒・文字を白にする)

サクラエディタで背景を黒、文字を白に反転させる方法をご紹介します。

こうしておくと、通常の状態より目が疲れにくくなるのでお勧めです。

色を反転できる箇所とできない箇所とありますので注意しましょう。

サクラエディタの背景色を黒・文字を白にする

私も大概な年なので仕事上目が疲れる事が多いです。何とか目を休めつつやり過ごしています。

本記事では「サクラエディタ」画面を黒の背景で白の文字にする、いわゆる暗転させる方法をご紹介します。

通常の状態(白背景に黒文字)のままの画面を長時間見続けると疲れますからね。

テキストファイル(メモ帳)として使う場合とHTMLソースとして使う場合での設定方法(一例)になります。

テキストを暗転させる方法

まずは背景を黒にして文字を白にする方法です。

タイプ別設定

サクラエディタを開き、上部横並びメニューの「設定」から「タイプ別設定」を選びます。

「カラー」のタブ

タイプ別設定の各種タブの欄から「カラー」をクリックしましょう。

左の欄に「色指定」の項目があります。文字色と背景色を反転させるため、まずは一番上にある「テキスト」の欄を変更します。

※文字形式の中にはテキスト以外にも様々なものがあり、形式ごとに変更ができるようになっています。

文字色と背景色の反転

文字色と背景色

「テキスト」をクリックすると、下の方にテキストに設定された文字色と背景色が表示されます。

色だけでなく太文字や下線も選択できるチェックマークも付いています。

選択した形式ごとに個別に設定ができる訳ですね。

カラーパレット

それぞれについた色のマークをクリックし、文字色を「白」にして背景色を「黒」にします。

最後にタイプ別設定ウィンドウの「OK」を押せば設定完了です。

色はカラーパレット内にたくさんの種類があるので、真っ白・真っ黒でなくても好きな色で構いません。

それ以外の色の変更

色指定の項目欄を見るとお分かりですが、テキスト以外にも様々な項目があります。

例えばテキストだけを暗転させた場合、それまで点滅していたカーソルが見えなくなりましたよね。

それにTabによる空白も白地のままだったりします。

カーソルやtab空白など

こういった白地に黒が残る所を全て、見やすい形に変更しましょう。

変更した方が良い項目例

・カーソル
・改行記号
・折り返し記号
・Tabや半角全角の空白

色は基本にテキストと同じ色で良いと思いますが、何らかの識別が必要な場合は適宜色を変更してください。

HTMLソースを暗転させる方法

基本的にはHTMLソースもメモ帳の場合と変わりなく、テキストをまずは暗転させます。

HTMLソースはテキスト部分以外にHTMLタグなどがありますので、それに応じた暗転作業が必要です。

HTMLソースの場合の暗転箇所(重複箇所は除く)

・ダブルクォーテーション文字列
・シングルクォーテーション文字列
・コメント
・選択範囲
・URL

各項目は色指定の欄から探して確認してみて下さい。

ポイント

HTMLソースを色分けした状態

""('')内文字列

特に""(ダブルクォーテーション)内の文字列は、違う色にしておいた方が見やすくなります。

同様に''のシングルクォーテーション内の文字列などは、phpファイルなら""と区別するべきかも知れません。

コメント欄

<!---->で挟むコメント欄の色は、""内文字列とはまた別の文字にしておくと区別がつきやすいでしょう。

マウスによるテキスト選択

マウスで文字列を選択する時の色変更は「選択範囲」です。

「選択範囲」は逆に白地に黒の文字にしておくと、選択箇所がはっきりするのでメリハリが付きます。

HTMLソース所のURLについて

URLは専用に色を付ける事ができますが、HTMLソース上では必ず""内に入る事になるので、必然的に「""内文字列」の色になります。

サクラエディタを暗転させる際の注意

HTMLタグの暗転

imgやdivなどのタグは、テキストを暗転させるだけでは元の色設定は変わりません。

こういったHTMLタグはサクラエディタの場合「強調キーワード1」のところに設定がされています。

強調キーワード1

ですので強調キーワード1の背景色を黒にして、文字色を任意の色にしましょう。

拡張子によって自動判別

サクラエディタは開くファイルの拡張子によって自動的にファイルの種類を判別しています。

先ほどの強調キーワード1にHTMLタグが設定されているのは、拡張子が.htmlや.htmなどのソースファイルを開いた時だけです。

それ以外の拡張子ファイルを開いている場合、強調キーワード1には設定がされていませんので注意下さい。

同じ拡張子で設定を踏襲

メモ帳(.txt)で保存した色変更は、同じ.txtファイルであれば設定が踏襲されます。

ですの別のテキストファイルを開いても、同じ様に暗転します。

HTMLソース(.html.htmなど)も同様です。

入力中の背景色

一つに気になるのは、日本語など文字を入力中の背景は白地に黒のままである事です。

入力中の候補表示

これは色々調べてみたのですが、調整する方法が見つかりませんでした。

設定ができるようになったら改めてご紹介します。

HTMLタグ別に違う色分けをする方法

強調キーワード1に色を設定すると、HTMLタグは全て統一で変更されます。

しかし場合によっては「spanタグだけは色を変えたい」という時があるかも知れません。

ここでは応用編として、個別タグのみを色分けする方法をご紹介します

個別タグの切り離し

まず強調キーワード1の登録タグの中から、任意のタグ(今回は一例でspanタグ)を外す必要があります。

共通設定:強調キーワードのタブ

「設定」メニューから「共通設定」へ飛び、「強調キーワード」のタブを選びます。

セット名でHTMLを選ぶ

上部にある「セット名」の項目欄から「HTML」を選ぶと、登録されているタグが一覧で表示されます。

SPANタグを削除

対象とするSPANタグを探してクリックし、下にある「削除」ボタンをクリックして登録から外しましょう。

spanタグを別枠へ登録

セット名の追加登録

続けて右上欄にある「セット追加」をクリックします。セット名の登録が必要なので、ここでは「HTML2」としておきましょう。

HTML2内リスト

するとセット名が「HTML2」に変わり、リスト内が空白になります。

次に左下の「追加」ボタンを押し、ボックス内にタグのSPAN(大文字でOK)と登録します。

SPANのみが登録された状態

するとリスト内にSPANのみが入ります。これでセット名「HTML2」にSPANタグのみが設定された事になります。

セット名SPANを強調キーワード2へ設定

色変更の画面

先ほどの色変更の画面(タイプ別一覧のカラータブ)をもう一度表示します。

パネル欄右上「強調キーワード」の欄にある「2~10」のボタンをクリックしましょう。

強調キーワード2へ登録

開いたパネルの「強調キーワード2」の選択ボックスで「HTML2」を選択します。

これで強調キーワード2にHTML2が設定されました。

強調キーワード2の色変更

あとは先ほどおこなった通り、色指定の欄から強調キーワード2を選んで、キーワード1と違う色を変更してみましょう。

spanタグのみ色が変更された状態

他のタグと違って、spanタグだけは別の色になったと思います。

まとめ

いかがでしたでしょうか。設定は非常に簡単ですよね。

仕事がら目を酷使するのは避けられません。今後もずっとこき使っていく訳ですからね。

ですので目を労わるためのいろいろな工夫が必要です。

暗転させた直後は違和感があるかも知れませんが、すぐに慣れてきますので是非設定してみましょう。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事