「UerCSS形式」は少し違うだけ
「UserCSS」形式が「Stylus」の拡張機能中で提唱された当初、私には何故「Mozilla形式」では駄目なのかという疑問がありました。 どうも、これは「メタデータ」にユーザーがアクセスできる様にする目的があり、同時に旧い「Stylish」のしがらみからの脱却目的もあった様な気がしています。 英語圏で進行する有志達の「Stylus」の更新は、私にはよく見えない部分がありますが、彼等を信じるより他ありません。
さて、「UserCSS」形式のスタイル編集画面に慣れて、ふたつの形式間の相互変換は問題なく可能になりました。 以下に簡単にまとめます。
「Mozilla」形式 ➔「UserCSS」形式の変更
ユーザーがこれまで「Mozilla」形式で編集して来たコードは「UserCSS」形式に変更ができます。（現在のところ、実用上で必要はないと思いますが）
▪「Mozilla」形式の編集画面で「エクスポート」をクリックします。
▪「ソースコード表示枠」が表示されたら、全コードを「コピー」します。
▪「管理画面」で「Usercssとして」をチェックして「スタイルを作成」をクリック。
▪「UserCSS」編集画面が表示されたら、「メタデータ / @name」に適当なスタイル名を指定します。 次に「セクション1」に記入された見本のコードを削除します。
▪編集画面の左側の「スタイル名枠」に「@name」で指定したスタイル名が表示されます。 編集枠内は「メタデータ」のみになりますが、その後方に先ほどにコビーしたソースコードをペーストします。
▪自動的に「セクション」の「適用先枠」が表示されます。 この例は、セクションが1個のシンプルなスタイルですが、複数セクションの場合は、セクションごとにそれぞれの「適用先枠」が表示されます。
▪最後に編集画面左側の「保存」を押します。 以上で「UserCSS」形式に変換されたスタイルが登録されます。
「UserCSS」形式 ➔「Mozilla」形式の変更
上記と反対に「UserCSS」形式のスタイルを「Mozilla」形式に変更する方法です。 この操作は「userstyles.org」にスタイルを投稿・登録する際に必要になりますが、一般のユーザーには、やはり余り必要はない事と思います。
▪「UserCSS」の編集画面で、編集枠のどれかにキャレットを入れて右クリックして、コンテキストメニューで「すべて選択」を指定します。
▪全セクションのコードが選択されたらコピーします。
▪「管理画面」で「Usercssとして」のチェックを外して「スタイルを作成」を押す。
▪「Mozilla」形式の編集画面で「インポート」を押します。
▪「インポート枠」が表示されたら、先ほどのソースコードをペーストします。
▪ペーストしたソースコードから「メタデータ」を削除して「スタイルを上書き」をクリックします。
▪ 編集画面の右側に、セクションで区分された「Code」編集枠が生成されます。
この例は、セクションが1個のシンプルなスタイルですが、複数セクションの場合は、その数の編集枠が生成されます。
▪「スタイル名枠」に適当なスタイル名を記入します。
▪最後に「保存」を押します。 以上で「Mozilla」形式に変換されたスタイルが登録されます。
「Stylus」は「適用先」でコードを区分している
上記の変換操作をすると、「Stylus」はスタイルのソースコードを、「適用先」で区分した複数のCSSコードとして表示している事に気付きます。「UserCSS」形式では一続きのソースコードだと言う事が良く判りますが、「Mozilla」形式も本質的には同じです。
「Mozilla」形式も「UserCSS」形式も、編集枠内の基本的な扱いは同じで、余り違いを気にせずに、これまでの通りコードを扱って問題はありません。
現在は「Mozilla」形式の方が扱い易い
上記の様に、スタイルの「Mozilla」⇄「UserCSS」の変換は、いつでも可能です。 ただし、何かのスタイルを自分で制作する場合は「Mozilla」形式をお勧めします。
「Stylus」は、最初は「Mozilla」形式をペースに作られ、後に「UserCSS」への拡張を行ったので、「Mozilla」形式の編集画面の方が完成度が高く、扱い易いと思うからです。
◎「Mozilla」形式の編集画面には「インポート」「エクスポート」の機能があるが、「UserCSS」形式の編集画面には無い。 これは特に困らないのですが、「UserCSS」の編集画面で「Mozilla」形式を入出力できれば便利です。
◎「Mozilla」形式の編集画面は、セクション単位で「複製」「セクション順の移動」「書式整形」が可能。 これは複数セクションでは大変に便利な場合があります。
◎「UserCSS」形式の編集画面は、セクション単位でコピーが出来ない。 それが必要な場合は、手作業でセクションの先頭～末尾を選択範囲に指定する必要があります。
「UserCSS」の適用先周辺デザインの修正
下は前回にデザインをしなおした「適用先」の部分のハイライト表示の様子です。
白い矢印の部分は、選択した行「activeline」を表す行の背景色で「#333」です。 他の行の背景色は「#000」で、現在にキャレットがある行を、僅かに明るい背景色で示すデザインです。
「適用先枠」の表示全体は、実はその直下の行の内容と直結しています。
この行は、それ以降のコードの適用先を指定するコードです。 その上側に「適用先枠」を表示して、そこでこの行を編集できる様にしています。
上図は、この行を選択した状態で背景色が少し明るいのですが、上側にも背景色の明るい部分があります。 これは「適用先枠」の「margin」部分で、いわば上記の1行のコードが幅広く化けた状態です。
この上側の背景色はすっきりしないので、コードの「margin」を修正しました。 以下が修正後のデザインです。
以下は、コードの修正部分です。
〔 Stylus LT800 〕ver.2021.04.03 更新部分
「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.04.03」は、以下のセクション構成です。
Section 1 共通設定・管理画面 ver.2021.04.03
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」のアレンジに関する下の記事群を検索参照ください。