「 設定」メニューの導入
「 設定」メニューは、スタイルのオプションをユーザーが簡単に利用できる仕組みです。「Stylus LT800」「Stylus LT800（en-US）」は、制作当初から幾つかのオプションがありましたが、今回からこのメニューで選択できる様にしました。
メニューの導入に際し、スタイルコードを再構成しました。 これまでのチュートリアルを削除して、編集枠（Editor）のフォント指定を採り入れています。
今回の編集枠フォント設定の導入で、コードの表示フォントに拘りがあるユーザーのニーズにも、応える事ができる様になりました。
メニューの内容
現在のメニューの内容は以下です。
「暗背景モード」「明背景モード」を選択します。 デフォルトは「暗背景」です。
▪ この指定は、「管理画面」「スタイル編集画面」「ブラウザツールバーからのポップアップ」「ブラウザ設定画面の拡張機能オプション」など、「Stylus」の全ての画面に対して適用されます。
▪「ブラウザ設定画面の拡張機能オプション」の「暗い/明るい」のモード設定は、「システム設定による」または「無効」の選択がお勧めです。 デザインの不統一が許容できるなら、ここの設定を併用する事は不可ではありません。
「スタイル編集枠」のフォント種の指定枠です。
記入された文字列は、以下のCSSコードの青い部分に直接代入されます。
▪ デフォルトは「Meiryo」で、空白にするとデフォルトに設定されます。
▪ フォントを日本語名で指定する場合は「"メイリオ"」「"ＭＳ Ｐゴシック"」等とクォーテーションが必要。 英語名表記では「Meiryo」「MS PGothic」等でOKです。
「スタイル編集枠」のフォントサイズの指定枠です。
記入された文字列は、以下のCSSコードの青い部分に直接代入されます。
▪ デフォルトは「small」で、空白にするとデフォルトに設定されます。
▪ CSSの表記規則に従った「14px」「inhelit」等の指定方法が可能です。
「スタイル編集枠」の行間隔の指定枠です。
記入された文字列は、以下のCSSコードの青い部分に直接代入されます。
▪ デフォルトは「20px」で、空白にするとデフォルトに設定されます。
▪ CSSの表記規則に従った「24px」「1.5」等の指定方法が可能です。
「スタイル編集画面」の「コード編集枠」に「拡張デザイン」を適用します。 この指定はデフォルトで「ON」です。 拡張デザインの内容は、次項に纏めました。
▪ この設定は「Stylus LT-800」の「Section 8」の適用・不適用の指定です。
「スタイル編集画面」のウインドウ幅を 850px以下にすると、左メニューは画面上部に移動します。 同時に、コードの編集を邪魔しない様にコンパクトな表示になりますが、一部のメニューはプルダウンメニューとして表示します。
プルダウンメニューはコード枠上に表示されるので、煩わしい場合は、このオプションで「無効化」が出来ます。
▪「無効化」を指定すると、小幅時のプルダウンメニューが表示されなくなります。
▪ デフォルトはプルダウンメニューの表示が「有効」です。
「エディタの拡張デザイン」の内容
「拡張デザイン」は編集操作に直接反映します。 好みや必要に応じて「ON/OFF」を選択してください。 以下の全項目の「ON/OFF」が纏めて切換わりますが、個別に「ON/OFF」する事は出来ません。
編集枠 背景色減光設定
明背景時の編集枠の背景を「白」から「ライトグレー」にします。 明背景の眩しさを僅かですが減らします。
編集枠内のカーソル
デフォルトのカーソルは 1px幅ですが、2px幅として明瞭にします。
編集枠内のカーソル色
カーソル色を明瞭な「暗背景：黒」「明背景：白」に設定します。
対応する{} の表示
対のカギ括弧の片側前後にカーソルを置くと、ペアのカギ括弧を太字表示します。
また、片方の対が失われたカギ括弧を「赤の太字」で明瞭に示します。
選択範囲の反転表示
選択した文字列を「#bee7f4」（ライトブルー）の背景色で表示します。
検索ヒット文字列のハイライト表示
ヒット文字列を 1px幅のアウトライン、文字色「黒」、背景色「黄」で表示します。
検索ヒット スクロールバー上の輝線表示
右スクロールバー上に、検索ヒットした語の位置を明瞭な「輝線」で表示します。
ハイライト - 選択した単語のみ - カーソル下の単語
「選択した単語」や「カーソルを入れて指定した単語」を検索文字として、コード内を自動的に検索するのが「ハイライト」機能です。 そのデザインを鮮明にします。
下は「ハイライト」機能の実際例で、「--bgc6」という文字列の間にカーソルを入れたところです。
「--bgc6」でコード内の検索が行われ、ヒットした語（グリーン矢印）に「アウトライン」が表示され、スクロールバー上にヒット全件の位置が輝線表示されています。
この機能は、左メニューの「ハイライト」の選択ボックスで、動作を選択できます。
▪「カーソル下の単語」は、文字列にカーソルを入れた時に、検索が起動します。
▪「選択した単語のみ」は、文字列をドラッグ選択した時に、検索が起動します。
▪後者の方が検索起動が控えめで、「無効化」は全く機能しなくなります。
「Stylus LT800」更新版をアップロードしました
上記の最新の更新版をアップロードしました。
このスタイルは Chrome（Edge）版 / Firefox版 の拡張機能「Stylus」で使用出来ます。「Stylus」を導入する手順については以下の記事を参照ください。
「Stylus LT800」を初めてインストールする手順
「Stylus LT800」は、以下のページで入手できます。 これは Stylus標準のスタイル公開サイト「UserStyles.world」の「Stylus LT800」のページです。
このリンク先は、下の様なページです。
サンプル画像の下の install ボタンを押してください。 なお、「Updated at」の行に、登録されているバージョンの更新日付が表示されています。
下の様な「Stylus」のインストール確認画面が表示されます。 この画面の左側メニューの上部にある インストール {S} のボタンを押します。
「スタイルがインストールされています」と表示されたら、インストールが完了しています。 既に「Stylus LT800」のアレンジが「Stylus」に適用されています。
左メニュー上部の「管理」のボタンを押すと、「Stylus」の管理画面が開きます。
「Stylus LT800」を更新する手順
既に「Stylus LT800」を使用されている場合は、従来通り「Stylus」の管理画面で「全スタイルの更新をチェック」を押して、更新を行ってください。
また、スタイルのリストの「Stylus LT800」の行の更新ボタン「 」で、このスタイルだけを更新できます。 更新ボタンをクリックすると「UserStyles.world」からデータを入手して「Stylus LT800」の更新が行われます。
セクション構成
「Stylus LT800 ver.202306.24.01」は、以下のセクション構成です。
Section 1 共通設定・管理画面 ver.202306.24.01
Section 2 スタイル編集画面
Section 3 スタイルのインストール確認画面
Section 4 {S}アイコンのポップアップ
Section 5 オプション設定画面
Section 6 ボタン配色
Section 7 コード編集枠のスタイルオプション フォント指定
Section 8 コード編集枠のスタイルオプション
Section 9 スクロールバー配色オプション
Section 10 編集画面のプルダウンメニュー無効化オプション
Section 11 明背景の配色オプション
Section 12 暗背景の配色オプション
Styls LT-800 (en-US) 版について
英語圏ユーザーはブラウザの言語は「英語」または「英語（アメリカ合衆国）」を選択しているはずで、そのブラウザ環境下では「Stylus」のメニュー等の表記は半角の英文字フォントが基準になります。
これは、漢字フォントと文字サイズやレイアウトが異なり、「Stylus」の画面表示が少しアンバランスになります。 これでは、英語圏のユーザーに使ってもらえないので、英文字フォントにレイアウトを微修正した「en-US版」を制作しました。
これは、以下からインストールができます。
