「Tampermonkey」自体で文字化けが生じる
文字化けが常に確実に生じるなら、対策はむしろ簡単なのですが、良く判らない理由で、たまに生じる文字化けは、何をどう対策したら良いのか困ってしまいます。
ここで問題にしているのは、「Tampermonkey」の「ダッシュボード」(主管理画面)のアレンジを行う「カスタムCSS」の登録枠内で文字化けする問題です。
これは、拡張機能の「Tampermonkey」のデザインに影響しますが、JavaScriptのページへの適用をする肝心の機能には問題はありません。 ただ、JavaScriptのコード編集を終了し難くなる程度の問題しか惹き起こさないのですが、やはりちゃんとしておきたい所です。
問題の症状
下の赤枠の「❌」「🟠」のマークは、コード編集画面を閉じるボタンです。
このボタンデザインは、編集・加筆があった事を明瞭に示して、保存忘れを防ぐ目的があります。 ところが、「カスタムCSS」の登録枠内の文字化けが生じると、このボタンが文字化けします。
ブラウザのツールバーのポップアップも、同様に文字化けします。
どうやら、拡張機能を再インストールした際に、この文字化けが生じる様です。
文字化けが生じるCSS登録枠
実際に文字化けが生じる場所は、「ダッシュボード」の「カスタムCSS」の登録枠の中です。
文字化けは、他の部分のデザインや機能に影響しません。 文字化を抑止するには、CSSコードのコメント行で漢字(2バイトコード)を使わないこと、また、上記のWindow絵文字(サロゲートペア)はユニコード入力で表記する事だと判りました。 今回、この対策をした上で、コードの再チェックして細部を更新しました。
もし、上記の編集画面を「閉じるボタン」が、正しく表示されない時は、以下の対策コードに書換えてください。
「Tampermonkey」の スキンCSS
「ダッシュボード」の ❶「設定」タブを開くと、下の ❷「外観」の項に「カスタムCSS」の登録枠があります。 ここにCSSコードをペーストし「保存」を押すと、スキンCSSが「ダッシュボード」や「ポップアップのメニュー」に反映します。
●「カスタムCSS」の登録枠内に前バージョンのコードを記入している場合は、枠内をいったん空白にしてから、以下の対策済コードをペーストしてください。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
〔 Tampermonkey のスキンCSS 〕 2023.03.07
/* Tampermonkey Setup CSS 2023.03.07 */ /* Dashboard & Popup Menu **** */ .enabler.enabler_enabled .far.on { color: #f00 !important; } /* Dashboard Header ******* */ img.banner { width: 1.8em; height: 1.8em; } .head { display: flex; align-items: flex-end; } .version { margin-left: 20px; font-size: 0.6em; } .tv_container_fit { top: 2.8em; } .default .tv_selected { z-index: 0; } /* Installed List Table ******* */ table.scripttable td:last-child .far.fa-edit { display: none; } table.scripttable td:last-child { padding-right: 2.5em; } /* Edit Tab Header ******* */ .tv_tab_close { vertical-align: 2px; overflow: visible; } .modified .tv_tab_close::before { content: "\1F534"; font-size: 0.8em; filter: brightness(2); } .modified .tv_tab_close:hover::before { filter: brightness(1); } .tv_tab_close::before { content: "\0274C"; font-size: 0.8em; filter: brightness(5); } .tv_tab_close:hover::before { filter: brightness(1); } .script_tab_head { position: absolute; } .nameNicon64 { width: 300px; } .heading tr td:nth-child(2) { display: flex; } .nameNname64 { line-height: 36px; } .nameNicon64 > img { margin: 0; width: 40px; height: 32px; } .heading .author, .heading .nameNname64 { width: fit-content; } .author { margin-top: 14px; } .editormenu::before { content: "▶"; position: fixed; top: 120px; left: 990px; color: #888; } /* CodeMirror ******* */ .CodeMirror { font-family: Meiryo; font-size: 1.4em; } .CodeMirror span.CodeMirror-matchingbracket { color: #000 !important; background: rgba(255, 153, 0, 0.4); } .CodeMirror-search-match { background: none; border-top: 2px solid #f00; border-bottom: none; opacity: 1; } .CodeMirror-dialog-bottom { border: 1px solid #aaa; right: 1em; left: 10em; } .CodeMirror-dialog-bottom .CodeMirror-search-field { margin-right: -20em; } /* Popup Menu ******* */ #action .fa-check:before { content: "\1F4A2"; } #action #td_aG9yX3dlc3RfdW5kZWZpbmVk { display: flex; flex-direction: column; } #action #table_Ym90dG9tX3VuZGVmaW5lZA { order: -1; margin-top: 1px; } #action #tr_dW5kZWZpbmVkX2Fib3V0_outer { display: none; } #action #tr_Y29tbWFuZHNfY29tbWFuZHM_outer { display: none; } .actiontable { border-color: #ccc; border-width: 1px 0 0 0; } .actiontable tr { line-height: 28px; height: 2em; }
アレンジの要点
上記コードの主要な部分を紹介します。
▪「Tampermonkey」のロゴマーク部をコンパクトにしています。
▪ 登録スクリプトON / OFF の切替ボタンを「ON=赤色」に変更。
▪ 編集画面のタブの編集の有無を示すマーク「🟠」「❌」を明瞭化。
▪ 検索ヒット文字列の縦スクロールバー上の位置表示を明瞭化。
▪ ブラウザのポップアップメニューを「💢 有効」「✖ 無効」に変更。
編集画面のフォントサイズはユーザーにとって最適の指定に変更する必要があるかも知れません。
▪ 編集画面のフォントサイズは 19.04px メイリオで、少し大き目です。
▪ スクリプト編集枠の「フォント種」「フォントサイズ」は、上記コードの以下の項を書き変えると変更できます。