「セクションリスト」機能が新設されました
「Stylus」はアップデートを頑張るので、幾つかの小修正が必要と思っている内に、新機能が導入されて修正なしでは辛い状態になって来ました。「Stylus」のアレンジスタイル「Stylus LT800」は、その対応に一日の作業が必要でした。
「セクションリスト」機能
「セクションリスト」の機能は、各セクションの先頭のコメント行を自動的に取得して、それぞれの「セクションの表題」として表示する機能です。
下は、「LT800」のスタイルを「Stylus」の編集画面に開いたところです。
「LT800」は、11個のセクションで構成されていますが、上図は、その最初のセクション「Code 1」を表示しています。
「Code 1」の先頭部の6行を引用すると、下の様にコメント行が3行あり、実際のCSSコードはその後に続きます。
/* Stylus LT800 ver.2021.02.06 */
/* 共通設定 *******************************************/
/* インターフェイス フォント指定 */
.actions:lang(ja) *,
#header:lang(ja) * {
font-family: Meiryo; }
コメント行の書き方に規則があるわけではないのですが、この様なコメント行でCSSコードを見易くするのは、しごく一般的な作法です。
この機能は、上の例なら ❶「Stylus LT800 ver.2021.02.06」の文字列を取得し、❷「Code番号」の後に表示し、同時に取得したコメント行を ❸「セクションリスト」に並べて表示します。
選択したセクションを表示
多数のセクション中の必要なセクションにアクセスするには、これまではウインドウ全体をスクロールしていました。 しかし ❸「セクションリスト」はリンク付き目次になっていて、リスト行のクリックで目的のセクションを右側に瞬時に表示できます。
また、この目次の選択や、セクションを直接選択する操作で、カーソルが入った（フォーカスされた）セクションは、❸「セクションリスト」上でハイライト表示されます。（「LT800」では判別し易い「黄」にしています）
セクションの「編集枠」に表題を表示
「Stylus」編集画面の右側は各セクションごとのCSS編集枠が並びます。 このそれぞれの「編集枠」には、従来から「Code番号」が表示されています。 しかし、多数のセクションがあるスタイルでは、編集するセクションを取り違えていないか不安になる事があります。
「セクションリスト」機能は、「Code番号」に加えて ❷「セクションの表題」を表示するので、現在の場所が明瞭になります。 編集画面内の検索でセクションを移動した時などは、「表題」は重宝しそうです。
◎ 以上の「セクションリスト」機能は、Chrome・Edge版 に実装されていますが、Firefox版は未導入です。
「書式整形」のショートカット機能
私は、スタイルを編集した後やアップロード前には、必ず「書式整形」をします。 これは、各セクション単位や、スタイル全体を対象範囲に選べますが、今回の機能で後者をショートカットで行える様になります。
これまでは、編集画面の左側メニーの「書式整形」ボタンで、スタイル全体の「書式整形」を行う仕様でした。 これは今後も気のうしますが、新たに「自分で決めた」ショートカットで、このボタンを押さずに「書式整形」を実行できるわけです。
「書式整形」を実行時に必ず「書式整形ダイアログ」が表示され、それを「✖」で消すまでコードが見え難くなります。 そこで、「LT800」は「書式整形ダイアログ」を小型化して、ウインドウの右端上部に表示する様にしています。
「書式整形ダイアログ」は、整形後の「書式」を自由に設定する機能がありますが、通常は「書式」は変更しないので、タイトル部に「2秒間」ポインターを置くと開く様にしています。
下は「ダイアログ」を開いたところですが、赤枠の部分が新しく追加されています。
❹「ショートカット入力・表示枠」をクリックしてキャレットを入れた状態で、キーボードで「Ctrl＋L」を押すと、上の様に「Ctrl-L」が表示されます。 これで、ショートカットが登録されます。 このショートカットは自由に変更ができます。
◎ 例えばCSS項の間隔を不整形に数行開けた上で、実意に「Ctrl＋L」をキー押下すると、うまく「書式整形」が動作すれば、間隔が既定の行数になります。 ブラウザやOSのショートカットと競合するショートカットがあるかも知れないので、「有効なショートカット」かどうかは、実際登録してテストする必要があります。
◎ もし、ショートカットの登録を中止する時は、上図の入力枠の「✖」を押して、入力枠を空白にして「書式整形ダイアログ」を閉じます。
◎ Chromeで「Ctrl＋L」は首尾よく使えましたが、Firefoxでは登録自体が上手く機能しません。 今後、改善されるかもしれませんが、いつかは不明です。
マイナーな更新が多数あります
目立つのは上記の機能ですが、デザイン上の更新などが多数ありました。 管理トップのスタイルリストのカラー設定、管理オプションの表示場所の変更など、今回の更新にはほぼ対応出来たと思います。 以下が変更したコードです。
/* Code 1 34 *********************/
/* ヘッダー 基本的な文字 */
#header span,
#header label,
#faviconsHelp,
#header span a,
#toc,
#lint table {
color: var(--bgc6); }
/* Code 1 121 *********************/
/* 検索・ソート */
#search, #manage\.newUI\.sort {
color: var(--bgc6);
background: var(--bgc7); }
#filters input::-webkit-input-placeholder {
color: var(--bgc6); }
#searchMode {
color: var(--bgc6);
background: var(--bgc7); }
/* Code 1 276 *********************/
/* スタイル名 太字に統一 */
.disabled h2 .style-name-link {
font-weight: bold; }
.disabled h2 .style-name-link,
.disabled .applies-to,
.newUI .disabled.entry .svg-icon {
opacity: 0.5;
color: var(--bgc6); }
/* Code 10 45 *関連*****************/
.newUI .disabled.entry .svg-icon {
fill: #64b5f6; }
.newUI .disabled.entry:hover .svg-icon {
opacity: 1;
fill: #ddd; }
.newUI .disabled.entry:hover .svg-icon:hover {
fill: #fff; }
/* 旧UI */
.entry .svg-icon {
fill: #64b5f6; }
.entry:hover .svg-icon:hover {
fill: #fff; }
/* Code 1 325 *********************/
/* 管理設定 */
#manage-settings {
display: block;
padding: 1rem 0; }
#stylus-manage .settings-column {
margin-top: 0; }
/* Code 1 392 *********************/
#stylus-manage #update-all {
margin: 0;
width: 100%; }
.firefox #stylus-manage #update-all {
margin-bottom: 1em; }
#apply-all-updates {
margin-top: 1em;
height: auto;
width: 100%;
padding-right: 300px; }
#update-all-no-updates {
display: block;
margin: 1em 0 0;
padding: 8px 25px;
border-radius: 4px;
background: var(--bgc4);
box-shadow: inset 0 0 0 1px var(--bgc3); }
#check-all-updates-force {
margin-top: -6px;
height: auto;
width: 100%;
background: linear-gradient(#f00 0%, #ac0000 100%); }
/* Code 1 429 *********************/
/*（Firefox 未導入 旧オプションの更新版）**/
/* アクション */
#actions summary {
display: none; }
#manage-options-button {
position: absolute;
top: 95px;
left: 520px; }
.firefox #manage-options-button {
position: unset; }
/* Code 1 511 *********************/
#backup #backup-buttons {
flex-wrap: nowrap; }
/* Code 2 67 *********************/
/* セクションリスト */
#sections-list #toc li {
font-size: small; }
#sections-list #toc li.current:not(:only-child) {
color: #fc0; }
/* Code 2 91 *********************/
#sections > .section:not(.removed):before {
content: "Code";
font: 16px Meiryo;
color: var(--bgc6);
text-shadow: 0 0 var(--bgc6); }
#sections > .section > label {
font: 16px Meiryo;
margin-left: -2.2rem;
color: transparent; }
#sections > .section > label::after {
counter-increment: codebox;
content: counter(codebox) " : " attr(data-text);
font: 16px Meiryo;
color: var(--bgc6);
text-shadow: 0 0 var(--bgc6); }
/* Code 2 175 *********************/
/* ページ内 検索ダイアログ */
#search-replace-dialog {
background: var(--bgc7); }
/* Code 2 292 *********************/
#help-popup .beautify-hint input[type="search"] {
font-weight: bold;
color: #000;
background: #eee; }
/* Code 2 375 *********************/
/* 機能ボタン列 */
#stylus-edit #actions {
margin-right: -12px;
padding: 18px 0 0;
width: 400px;
flex-shrink: 0; }
/* Code 2 402 *********************/
/* メニューラッパー */
#stylus-edit #details-wrapper {
min-width: 400px; }
/* Code 2 446 *********************/
/* セクションリスト */
#sections-list {
display: none;
position: relative;
border-radius: 4px;
background: var(--bgc4);
margin-top: 1.4em !important;
padding: 0 1.4em 0 0.6em;
width: calc(100% - 2em);
max-height: 1.8em;
overflow: hidden;
transition-property: max-height, padding-top, padding-bottom;
transition-delay: 3s;
transition-duration: 0.2s;
box-shadow: inset 0 0 0 1px var(--bgc3); }
#sections-list:hover {
max-height: 76px;
padding: 2.4em 1.4em 0.4em 0.6em;
transition-delay: 0.5s; }
#sections-list summary {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0 1em;
width: calc(100% - 2em);
background: var(--bgc3);
z-index: 1; }
/* Code 3 12 *********************/
/* チェックボタン */
#stylus-popup #installed .checkmate input[type="checkbox"]:not(.slider) {
left: 9px;
top: 6px;
height: 12px;
width: 12px;
z-index: 1; }
/* Code 3 65 *********************/
/* 検索オプション */
#stylus-popup #search-params .select-resizer {
background: #fff; }
#stylus-popup #search-params label {
color: var(--bgc6); }
/* 次のスタイルを書く */
#stylus-popup #write-for-frames {
margin-top: 6px; }
#stylus-popup #write-for-frames::after {
margin: -3px; }
/* Code 4 3 *********************/
#stylus-options {
width: 600px;
color: var(--bgc6); }
/* 削除項目
.firefox #stylus-options {
width: inherit; } */
/* Code 4 9 *********************/
#stylus-options .items a {
color: var(--bgc6);
text-decoration: none; }
#stylus-options .items a:hover {
text-decoration: underline; }
/* Code 8 10 ********************/
/* 追加項目 コメントを修正 ***********/
@media screen and (max-width: 850px) {
#sections-list {
display: block; } }
/* Code 11 15 *******************/
/* 追加 背景色を指定 ****************/
background: var(--bgc7);
「Stylus LT800」更新版をアップロードしました
上記の最新の更新版を「ver.2021.02.06」として「userstyles.org」にアップロードしています。
Code構成
「Stylus LT800 ver.2021.02.06」の Codeは、以下の11個です。
Code 1 共通設定 管理画面
Code 2 スタイル編集画面
Code 3 {S}アイコンのポップアップ
Code 4 Stylusのオプション設定ダイアログ
Code 5 ボタン配色
Code 6 コード編集枠のスタイルオプション★
Code 7 スクロールバー配色オプション★（Firefoxでは無効です）
Code 8 管理オプション・編集オプションを表示するオプション★
Code 9 明背景の配色オプション★1
Code 10 暗背景の配色オプション★2
Code 11 背景色指定チュートリアル
スタイルのオプション設定や変更について
◎★印はオプションの Codeで、設定変更が可能です。
Code の「適用先」の設定で、オプションの有効/無効が変わります。
「正規表現に一致するURL」=「有効」
「URL」「次で始まるURL」「ドメイン上のURL」=「無効」
「適用先」を変更し、スタイルを「保存」すると設定が反映します。
◎オプション★1 オプション★2は、どちらかを有効にしてください。
★1 ★2 の両方が有効な場合は、★2が有効になります。
◎各オプションの内容は、Code内のコメント行を参考にしてください。
更に詳しい内容は「Stylus」のアレンジに関する下の記事群を検索参照ください。
「Stylus LT800」の入手先
「Stylus LT800」の最新版はスタイル投稿サイト「userstyles.org」にアップロードしています。 このスタイルは Chrome版・Edge版 / Firefox版 のStylusで共用出来ます。「Stylus」を導入していれば、このスタイルを下のリンク先から入手出来ます。
スタイルのインストールは、サンプル画像の右下の Install Style を押します。 この際に、紛らわしい無関係なアプリの「Download」ボタンには注意してください。
また、既に「Stylus LT800」を使用されている場合は、「Stylus」の管理画面で「Stylus LT800」の行のスタイル更新ボタン「 」を押して、最新版への更新を行ってください。
