「Usercss形式」の編集画面をアレンジ
公開スタイルの「Stylus」へのインストール・更新が「Usercss形式」のCSSに移行しました。 その結果、「Usercss形式」の編集画面を利用する事が必須になりました。
前ページでも触れましたが、「Mozilla形式」と「Usercss形式」では編集画面に違いがあります。「Stylus」は、CSSコードの形式（フォーマット）に合せて、自動的に編集画面を振り分けますから、「Usercss形式」に更新されたCSSを編集したい場合は、従来と少々異なる編集画面での編集になります。
これまで「Mozilla形式」を前提にアレンジをして来たので、あらためて「Usercss形式」の編集画面を見ると、不適当な部分が幾つかあり追加アレンジをしました。
ウインドウ幅850px以上の場合
下はウインドウ幅が 850px以上の場合の編集画面のデザインです。
「コード編集枠」の構成が「Usercss形式」は単一です。「Mozilla形式」と同様にセクション（Code）に分けて表示されていますが、仕切りはデザイン上だけで、コード枠は実際は1個しかありません。
● デフォルトのデザインは「編集枠」の外側に余裕がなく落ち着かないので、周囲に余白部の ❶ をデザインしました。
●「Mozilla形式」の適用先の表示位置は、セクションごとの最下部です。 ところが、「Usercss形式」の適用先の表示位置は、逆にセクションの最上部です。 これでは上下のどちらの適用先か判り難いので、セクションとセクションの間 ❷ を広くデザインしています。
●「正規表現をテスト」❸ のボタンは、「適用先入力枠」と並んでいます。 従来のボタンデザインでは高さが不適当なので、この編集画面の専用の高さに修正しました。
ウインドウ幅850px未満の場合
やはり「編集枠」の周囲の余白 ❹ を採っています。
「管理画面」
「管理画面」の「UC」のマーク ❺ は、「Stylus LT800」の「暗背景」のリスト上ではかなり不明瞭になります。 これを適当な明るさに修正しました。
「Stylus LT800」更新版をアップロードしました
上記の最新の更新版をアップロードしました。 従来と異なり、このスタイルのインストール先・更新先は、以下のリンク先に変更されます。
上記リンク先は「Github」サイトの「Stylus LT800」の専用画面です。
このスタイルは Chrome版・Edge版 / Firefox版 のStylus用です。 お使いのブラウザに「Stylus」を導入していれば、このスタイルが使用出来ます。「Stylus」の導入手順については以下のページから記事を選んで調べてください。
「Stylus LT800」を初めてインストールする手順
● 上記の「Github」のリンク先を開きます。
この画面を下方にスクロールすると、下端に「Install」ボタン（赤枠）があります。
●「Install」ボタンをクリックすると、「Stylus」の下の様な画面が表示されます。 基本は編集画面ですが、左側のメニューが異なります。
● 上図の赤枠の「インストール」ボタンを押します。
これで「Stylus LT800」がインストールされます。 このスタイルが「Stylus」自体に適用され、下の様な「暗背景」の「Usercss」の編集画面が表示されます。 読込まれているコードは、インストールした「Stylus LT800」です。
インストールは完了しているので、管理画面に戻り、他のウインドウを閉じます。
「Stylus LT800」を更新する手順
既に「Stylus LT800」を使用されている場合は、従来通り管理画面で「全スタイルの更新をチェック」を押して、更新を行ってください。
また、リストのスタイル行の更新ボタン「 」をクリックする事で、スタイルを個別に更新する事が可能です。「Stylus」は自動的に「Github」サイト経由で更新チェックを行います。
セクション構成
「Stylus LT800 ver.2021.03.06」は、以下のセクション構成です。
Section 1 Stylus LT800 ver.2021.03.06 共通設定・管理画面
Section 2 スタイル編集画面
Section 3 {S}アイコンのポップアップ
Section 4 Stylusのオプション設定ダイアログ
Section 5 ボタン配色
Section 6 コード編集枠のスタイルオプション★
Section 7 スクロールバー配色オプション★（Firefoxでは無効です）
Section 8 管理オプション・編集オプションを表示するオプション★
Section 9 明背景の配色オプション★1
Section 10 暗背景の配色オプション★2
Section 11 背景色指定チュートリアル
スタイルのオプション設定や変更について
◎★印はオプションのセクションで、設定変更が可能です。
セクションの「適用先」設定で、オプションの有効/無効が変わります。
「正規表現に一致するURL」=「有効」
「URL」「次で始まるURL」「ドメイン上のURL」=「無効」
「適用先」を変更してスタイルを「保存」すると、設定が反映します。
◎オプション★1 オプション★2は、どちらかを有効にしてください。
★1 ★2 の両方が有効な場合は、★2が有効になります。
◎各オプションの内容は、セクション内のコメント行を参考にしてください。
更に詳しい内容は「Stylus」のアレンジに関する下の記事群を検索参照ください。