Stylusを使う
ここで公開したスタイルシートを、Firefox＋拡張機能「Stylus」で使う方法を書いてみます。
ブラウザはWindows版Firefoxです。Mac使いの方やスマホの方、Chrome系ブラウザをお使いの方は適宜読み替えてくださいませ。
2024年03月23日追記。もう少しやりやすくなるようにと文章・画像共に作り直しました。
これまでにユーザースタイルシートについて書いてきました。
が、これで何をどうすればいいのか分からない方もおられると思います。
とりあえず、拡張機能「Stylus」のインストールと、ここで公開したスタイルシートを適用する手順を書きます。
大まかな手順は以下の通り。
１：StylusをFirefoxにインストールする
２：スタイルシートをコピペする
３：おしまい
１：StylusをFirefoxにインストールする
FirefoxにStylusが入っていない方はインストールしておきましょう。
公式の配布サイトでStylusのページに行きます。URLはこのページ下の後書きに書いておきますね。
赤丸内の［Firefoxへ追加］をクリック（左クリック）
［Firefoxへ追加］をクリックすると、右上にメッセージが表示されます。
「～以下の権限が必要です」とありますね。［追加］をクリックでインストールされます。
終わったら「追加されました」とメッセージが出るので、［OK］をクリックして完了です。
２：スタイルシートをコピペする
ブラウザ上部のツールバーにStylusのアイコン（「S」の文字）があるので、クリックします。
小さなメニューが出てくるので、左下の［管理］と書かれたところをクリックします。
［管理］をクリック（左クリック）
「インストール済みスタイル」という画面が開きます。
左側の［スタイルを新規作成］というボタンの右にあるチェックボックスにチェックを入れます。するとボタンの名前が［スタイルをUserCSSとして新規...］に変わります。
［スタイルをUserCSSとして新規...］をクリック（左クリック）
ボタンをクリックすると「スタイルを追加」という画面になります。この右側にユーザースタイルシートを書いていきますが、最初は少し何か書かれています。
最初はこんな感じ
右側、最初に書かれている文字を全部消します。全部選択して削除しましょう。
削除する
続いて、ここで公開しているユーザースタイルシートを最初から最後までコピーし、先ほど消したところへ貼り付けます。
「/* ==UserStyle==」から始まって、最後は閉じ波括弧 } が2個あるはずです。
貼り付けると、左上「スタイルの編集」の下に「小説家になろう：ユーザページ」などの名前が自動で入るはずです。
8行目と9行目の間に変な行が現れますが、気にしないでください。この行の内容ですが、コピペしたスタイルシートによって違いが出ます。
ユーザページ用の場合： 次で始まるURL https://syosetu.com/
マイページの場合： ドメイン上のURL mypage.syosetu.com
黄色っぽい色になっている［保存］をクリックして完了です。
貼り付けて保存
スタイルシートの内容がおかしいとエラーが表示されます。とりあえずここで公開したものはエラーがないことを確認しているので、もしエラーが出たらコピペでミスった可能性が大です。注意してみてください。一番最後の閉じ括弧を一つ忘れているとか、余計なものまでコピーしているとか。
エラー表示は左上に出る
3.おしまい
なろうにアクセスすると、先ほどコピペしたスタイルシートの内容が自動で反映されます。
アイコンをクリックして小さなメニューを出すと、先ほど付けた名前が表示されていると思います。
名前の前に付いているチェックボックスのチェックを外すと、そのユーザスタイルシートが適用されなくなります。外したり入れたりして、サイトの見た目に変化があるか、期待した変化になっているかなどを確認しましょう。
チェックを外すとそのスタイルシートが適用されなくなる
4.これから＆バックアップは大事
公開したスタイルシートを使うまでの手順は以上です。
このままで止めておくもよし。Stylusの使い方をもっと深く理解してスタイルシート公開サイトのを片っ端から使ってみたり、HTMLとCSSを勉強してユーザスタイルシートを自作するのもいいと思います。
とりあえずは「Firefox Stylus 使い方」などのキーワードで検索してみてください。いろいろヒットすると思います。Stylusのバージョンによって操作画面に違いがあるので、できれば最近のを探すのがいいかなと思いますが。
あと、データのバックアップは必ず取るようにしましょう。何かあってもバックアップがあれば、バックアップを取ったときまでは環境を復元できます。
［バックアップ］の下にある［エクスポート］をクリック
［OK］をクリック
バックアップファイルを保存するフォルダに行って［保存］をクリック
バックアップファイルを使うときは、［エクスポート］の隣にある［インポート］をクリックし、設定を戻すファイルを指定します。
Stylus配布先
https://addons.mozilla.org/ja/firefox/addon/styl-us/
Firefox 拡張機能の権限要求メッセージ
https://support.mozilla.org/ja/kb/permission-request-messages-firefox-extensions
次は「注意事項」になる予定というか、なりました。それを先に書けやって話でもあるんですが。
