Studio TA Subsite の案内とお知らせ

Stylus の導入と設定方法(Firefox拡張機能)

2017年 09月 13日
ブラウザFirefoxで使用できるユーザースタイルシート拡張機能を探すと、有名な「Stylish」が目立ちます。 しかしこれは、ユーザーデータの無断利用問題が報告されていて、却下しました。 更に探すと、このStylishを新開発チームがブラシュアップした「Stylus」が発表されていました。 これは先の問題はなく、実際に問題なく使用出来、また今後の開発も期待出来そうです。 操作はStylishを継承していて「Stylish」から乗り換えして、過去資産の継承も可能な様です。

以下に、このFirefox拡張機能「Stylus」の導入と設定方法について、簡単に説明します。 なお、ここの説明はブラウザにFirefoxを使用している事を前提にしています。


 拡張機能「Stylus」を Firefoxに導入する 

Firefoxで以下のリンクをクリックして「Stylus」のページに行きます。(「Firefoxのアドオン管理サイト」内のStylusのページです)

拡張機能「Stylus」のFirefoxへの導入は、このページで「 Firefoxへ追加」を押します。

a0349576_10182754.png

拡張機能の追加の許可を問われます。「追加」を押すと、下図の様に Firefoxのツールバー右端に「S」字のアイコンが出来ます。

a0349576_10195693.png

これで「Stylus」が導入されていますので、自分のページ等に戻り「S」(Stylus)のアイコンを左クリックしてください。 下の様な小メニューが出ますが、これが「Stylus」へのアクセス方法です。

a0349576_10272600.png


 オプション と 管理画面 

「オプション」を押すと以下のページが開きます。「Stylus」自体の更新は良いのですが、下図の「更新」はユーザーの投稿デザイン収集機能で、余り有用とは思えません。 私は「0」で、自動更新OFFとしました。 アイコン色は好みに設定します。 他はデフォルトで始め、扱いに慣れてから変更すると良いでしょう。
〔注意〕下のオプションメニューは、「すべてのスタイルをオフにする」にチェックを入れないと表示されません。
a0349576_10332822.png

「S」アイコンの左クリックから「管理」を押すと、Stylusの「管理画面」が開きます。 スタイル登録や管理など、主要な操作はここを中心に行います。 下は最初の状態で、未だ登録がないので右側は空白です。

a0349576_18162267.png



 スタイルの登録と管理 

 スタイルの登録 

早速、上図の様に「新しいスタイルを作成」を押して、サンプルのスタイルを作ってみます。
このボタンで下の様な「スタイル編集」の画面になります。

a0349576_12111059.png

上図の3ヵ所は、スタイルの主要な3つの要点です。

スタイルの名前(後で判断し易い任意の名前を付けます)
スタイルの適用先(スタイルを適用するURLの範囲指定)
スタイルのCSSコード

上図のサンプルは、「赤くぬれ」 「すべて」 「*{ color: red; }」と記入しています。 編集が出来れば、左上の「保存」を押します。(有効のチェックは外さない様に)

a0349576_18501461.png

これで「赤くぬれ」のスタイルが登録されます。 編集内容に問題がなければ、このスタイルが Firefoxの中で働き始めます。「保存」を押した途端に、下の様にページ内の文字が赤になります。

a0349576_18540726.png

この編集画面もFirefoxの画面なので、登録したコードが適用されたわけです。 色々なサイトを開けば、画面の文字の一部が赤く変化しているはずです。


 スタイルの無効化 

このスタイルを削除するのではなく一時的に「無効化」するには、の下の「□有効」のチェックを外し、再び「保存」を押します。 チェックを入れて「保存」を押すと、再びスタイルが「有効」になります。

a0349576_19024539.png

左メニューの「管理画面に戻る」を押すと、Stylusの「管理画面」に戻ります。

a0349576_19082245.png


 スタイルの管理 

Stylusの「管理画面」の右側には、編集して登録したスタイルが並びます。(下図は先ほどの1個だけですが)

a0349576_19365729.png

この右画面のリストは、スタイル管理の主要ツールです。

a0349576_19553932.png

チェックボックスは「有効」「無効化」を直接に切り替えができます。「保存」は不要です。
スタイル名をクリックすると、そのスタイルの編集画面が開きスタイル編集が出来ます。
「×」ボタンは、スタイルを削除します。 バックアップが無い場合は永久に失われます。


 スタイルの適用先の設定 

「スタイルの登録」で、先ほどは 「すべて」の設定で説明しましたが、実際には細かな指定が必要になる場合が多くあります。 適用先のコントロールが上手く出来るかどうかで、快適さは大きく違います。

適用先の「個別指定」を押します。

a0349576_12193220.png

下の様に、 の枠が出ます。

a0349576_20451914.png

更に をクリックすると4種の指定形式が出ます。

a0349576_20550233.png

は URLの記入枠ですが、不用意な末尾の半角空白も判定対象になり、正確な入力が必要です。 適用先の範囲は、この の組み合わせで決まります。 この設定の区別は大事で、正しく理解しておく事をお勧めします。


 適用先設定の区別 

URL
これは のURLに完全に一致したページにのみ、スタイルが適用されます。
の記述は「http://」「https://」を省略した表記は不適となり、適用されません。

次で始まる URL
前方一致です。 URLの左側からの文字が一致していれば、スタイルが適用されます。
の記述は「http://」「https://」を省略すると不適となり、適用されません。
の記述の右側は、ドメイン名やサブディレクトリ名の途中で途切れていても構いません。

ドメイン上の URL
の記述がドメイン名(サブドメイン名を含む)として有効なら、そのドメインとサブディレクトリにスタイルが適用されます。
の記述に「http://」や、末尾の「/」があるとドメイン名にならず、不適で適用されません。
▪サブドメイン名が異なるサブドメインどうしは、別ドメインとして適用されません。
▪ドメイン名への指定はそのサブドメインにも適用されますが、その逆は適用されません。

正規表現に一致する URL
これは正規表現検索でフィットするURLに、スタイルを適用します。 特殊で一般的でないので、正規表現に関してはネットで調べて下さい。

なお、ドメイン・サブドメイン・サブディレクトリに関しては、以下を参照ください。


 適用先設定の追加と削除 

先の図の 「削除」「追加」 のボタンで、適用先の設定が削除・追加できます。「追加」を押すと、下図の様に新しい ❼ ❽ の枠が出来ます。

a0349576_22101646.png

行ごとに1つの範囲を指定し、範囲が追加されますが、左側 の指定形式は一致している必要はありません。「削除」ボタンによって、指定は行単位で削除されます。




この記事はカテゴリ「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2017-09-13 23:25 | ブログスキンのアレンジ | Comments(2)
Commented by Dos3.3C at 2017-10-29 15:41 x
FF57への更新を控えて、StylishからStylusへの移行を行うため検索をしましたところ、大変に有益な記事を拝見できました。userstyles.orgなどネットにあるスタイルシートを自分好みに変更を加えて、使いやすくしたものを幾つか使用しており、記事を参考にさせていただきながら作業を行い、無事にStylusへと移行させることができました。
使い方などを平易に解説してくださった記事、本当にありがとうございました。
Commented by Ataron at 2017-10-29 18:09
Dos3.3C さん

コメントありがとうごさいます。

私、まだ手探りの部分もありますが、お役にたててなによりです。 ユーザースタイルシートの便利で有効な価値が、更に多くのユーザーにひろまればいいですね。
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。