人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション

2017年 09月 18日
Chrome拡張機能で、ユーザースタイルシート環境の最先鋭となりそうな「Stylus」は、2017年3月に初版が発表された様です。「Stylish」の商用化傾向に抗して、この無垢な拡張機能を編纂したグループに拍手です。 未だ確かな日本語のマニュアルが少ないので、基本的な部分を整理したいと思います。


「Stylus」をChromeに導入する


Google Chrome の拡張機能の管理サイトの「Stylus」のページは、以下のリンク先にあります。


Chromeで上記のページを開き、ページ右上の「CHROMEに追加」を押します。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_20175959.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_20191030.png

「Stylusアイコン」が出来たら導入は完了です。 自分のページに戻ります。




アイコン機能メニュー


「Stylusアイコン」を左クリックすると、下の様な「アイコン機能メニュー」(ポップアップ)が出ます。 これは「Stylus」のページ上のコントローラーです。 多くの操作はここを起点に行います。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_13480931.png

ポップアップ上部に、このページに適用可能な登録スタイルがリスト表示されます。

チェックボックスでスタイルごとに有効・無効を切り替える事が出来ます。 その設定はブラウザを閉じても保持されます。 これは管理画面での操作と同等の機能です。

これらのアイコンを押してスタイルの編集・削除が可能です。 これらは管理画面での操作と同等の機能です。

チェックボックスで Stylusに登録した全スタイルの適用のON/OFFを切り替えます。 適用のON/OFFは、次にこれをチェックするまで保持されます。 他のページに設定したスタイルも働かなくなります。

クリックすると、このページに適用可能なスタイルを「userstyles.org」に公開されたスタイルの中から検索します。 検索の結果は、下図の様にポップアップの下にスタイルのリストとして表示します。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_08592184.png

検索をすると、上図 の様に表示が変わり、更にクリックすると「userstyles.org」のページを開く事が出来ます。

「アイコン機能メニュー」の下に表示される検索結果リストを操作することで、アレンジ対象のページを表示したまま、公開されたスタイルを試す事が出来ます。

▪リストのサムネイルをクリックすると、その場でインストール・削除が出来ます。
▪リストのスタイル名の部分をクリックすると、「userstyles.org」のそのスタイルの登録ページを開くことができます。

開いたページをアレンジするスタイルを作成する場合に、自動的に「適用先」のURL設定をする機能です。 アンダーラインの左端は「サブドメイン名」、中央は「ドメイン名」、右端は「URL前方一致」と、クリック位置に応じて「適用先」の指定形式を選べます。 下図は取得する際の一例です。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_13514261.png

「管理」ボタンは Stylusの「管理画面」を開きます。「管理画面」は、スタイルの管理を行うメイン画面です。 その操作については下のリンク先を参照ください。


「オプション」ボタンは、次項で説明する「Stylusオプション」画面を開きます。

「ウィキ」ボタンは「github.com」の「Stylus」のページを開きます。「Stylus」の技術的な問題はここに集約されていますが、特に理解しなくても使えます。



Stylus のオプション設定


オプション設定はデフォルトでも困ることはないでしょう。 導入の初期に使い易い設定にすれば、後はそう触る必要はありません。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_14042914.png

「ツールバーアイコン」
「Stylusアイコン」は2タイプから選べます。 アイコンの表示は Stylusの動作状態を示します。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_16481463.png

▪「スタイル適応中」は、1個以上のスタイルが適用されている状態です。
▪「スタイル適応なし」は、登録スタイルで適用先に該当するスタイルが無いか、有ってもすべて無効化している状態です。
▪「Stylus OFF」は、「すべてのスタイルをオフにする」をチェックした場合で、Stylusは適用を停止しています。(「Stylus」の無効化ではありません)

「ツールバーアイコンのバッジ」
「Stylusアイコン」の横に、適応中のスタイル数を表示する機能です。 配色の設定は下の様になります。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_17200706.png

「ポップアップの幅」
「アイコン機能メニュー」の幅は、400px程度が操作上で使い易くてお勧めです。

「アイコン機能メニュー」から「編集画面」を開く場合の設定です。
別タブ表示か別ウインドウ表示かを選びます。「管理画面」から「編集画面」を開く場合は、別タブや別ウインドウは開かれません。

「アイコン機能メニュー」は、 デフォルトでスタイルのリストが上側です。 OFFにするとスタイルのリストが下側になります。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_13514544.png

「白い境界線を追加する」
「Stylus」が暗背景のデザインの場合に、ページ背景色が暗いと「アイコン機能メニュー」の辺縁が不明瞭になる場合があります。 これをONにすると下図の下側の様に「アイコン機能メニュー」が白枠になります。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_13514942.png

「更新」
「userstyles.org」からインストールしたスタイルで、その更新があれば、自動的にアップデートする機能です。 更新が自分にとって好ましくない場合もあり得るので、私は「0」指定で、管理画面で手動でアップデートをしています。

「スタイル更新」は、管理画面の手動アップデートと同等のスイッチで、インストールして登録した全てのスタイルの更新チェックをし、更新をします。

「ショートカット」は「Stylus」のキーボードショートカット登録を開きます。

▪「拡張機能を有効にする」は「Stylus」自体の有効/無効を切換えます。
▪「管理」は「管理画面」を開きます。
▪「すべてのスタイルをオフにする」は のチェックボックスと同等です。

下図は「すべてのスタイルをオフにする」を「Ctrl + S」に設定した所です。 これは、頻繁にスタイル適用のON/OFFを切換え、その効果を確認する場合に便利です。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション_a0349576_14230732.png




by Ataron | 2017-09-18 09:42 | ブログスキンのアレンジ | Trackback(5) | Comments(14)
Tracked from over at this.. at 2019-06-29 06:25
タイトル : over at this website
Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション : At Studio TA... more
Tracked from simply click.. at 2019-07-09 01:54
タイトル : simply click the up coming i..
Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション : At Studio TA... more
Tracked from published on.. at 2019-07-11 12:28
タイトル : published on Bokukoui Exblog
Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション : At Studio TA... more
Tracked from this site at 2019-09-07 17:02
タイトル : this site
Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション : At Studio TA... more
Tracked from 출장안마 at 2021-03-18 03:09
タイトル : 출장안마
Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション : At Studio TA... more
Commented by 12 at 2020-08-23 23:07 x
大変わかりやすい説明をありがとうございます!
たすかりました!
Commented by Ataron at 2020-08-24 15:07
12さん、どういたしまして。

私は、Stylusメンバーのファンです。 そして、優れた拡張機能だと思っていますから。
Commented by しろう at 2022-04-16 10:57 x
Stylusに関してこんなに詳しく記述されたブログはみたことがありません。素晴らしいです。だいぶ日数が経過していますが、ブログの内容に関して質問したいのですが、よろしいでしょうか。
Commented by Ataron at 2022-04-16 13:58
コメントありがとうこざいます。「Stylus」は、現在も私にとってなくてはならない拡張機能です。

内容に関しての質問、よければどうぞです。 質問対象のページで書いていただければ。 Exciteは カメ更新ですが、忙しい時でなければ、毎日コメントは見る様にしています ^^v
Commented by しろう at 2022-04-16 17:36 x
ありがとうございます。
>質問対象のページ
どこにあるのですか?
Commented by Ataron at 2022-04-17 00:39
「Stylus」の事なら、このページでどうぞ。 お聞きになりたい事に関する記事があるページという意味です。 野鳥の事なんかの記事もあるので、場違いになりますから。
Commented by しろう at 2022-04-17 13:41 x
管理人さんのブログを元にシュミレーションをしました。

下記動画URLを参照してください。
https://www.youtube.com/watch?v=-m6dpJxn4Ro
YouTubeですので、速度を落として視聴できます。
右上にあるダイアログボックスに関してです。
この動画からStylusはすべて3つあります。
Yahoo→2つ
Google→1つ
操作をしたい時は数字のアイコンをオンにする。Yahooには2つあるが、操作したい方をオンにする。
GoogleのStylusを操作したい時は、Yahooのアイコンをオフにしてから、Googleに移動する。
とStylusの横にある小さなアイコンの役割はわかるのですが、ダイアログボックスの中にある□すべてのスタイルをオフにするという箇所はどういう役割をしているのでしょうか。

また、今回の例は3つと少ないですが、Stylusの数が多くなった場合はどういう操作をしたらいいのでしょうか
Commented by Ataron at 2022-04-17 18:01
> しろうさん

登録している全てのスタイルがオフ(適用されない)の状態になります。 ブラウザの「拡張機能を管理」の画面で「Stylus」のスイッチをOFFにするのと同じ結果になります。 毎回ブラウザの設定を変更するのは手間ですから、こちらを使います。

ある画面で、複数のスタイルが適用されている場合で、何か想定外の表示になっているとします。 原因が「Stylus」によるアレンジなのか、全く別の原因があるのか、このスイッチで「全スタイルをOFF」にすれば、最短で切り分ける事ができます。

また、あるページをアレンジをしていて、そのページにデザイン更新があった場合、「Stylus」で何やかやと非表示にしていると、本当は表示させたいものも非表示になっている場合が有ります。 一旦アレンジをオフにして、デフォルトのページを確認する必要は時々あります。 そういった場合にも、「全スタイルをOFF」は良く使います。

この機能を使わず、個別にスタイルをOFFにしても良いですが、通常はOFFにしているテストスタイル等が混ざってある場合は、後で必要なスタイルのみ「ON」に戻すのが大変です。 色々スタイルを自作すると、これは毎回問題になります。「全スタイルをOFF」を使うと、この組み合わせが間違って変わるのを防げます。

> Stylusの数が多くなった場合
自分で判り易い様に、スタイル名を整理をしておく事は必須です。 スタイル名は後から修正できますし、マーク文字も使えます。 また、セクション機能を使うと、適用先が異なっても、ひとつのサイトや、機能についてのスタイルを纏めるという様な事ができます。
Commented by しろう at 2022-04-19 21:48 x
@Ataron
>登録している全てのスタイルがオフ(適用されない)の状態
これはデフォルトの状態ですよね
https://gyazo.com/2270e6081542a0bcd8fa6da612a135d0です。
画像ではすべてのスタイルにオフにするにチェックを入れてください。

にもかかわらず、Test Styleにチェックが入っているのはどういうことですか

>セクション機能を使う
了解しました。そのうち使うでしょう。
Commented by Ataron at 2022-04-20 15:40
> しろうさん

お示しの画像で、「▢ すべてのスタイルをオフにする」にチェックを入れない事は、「すべてのスタイルをオフにしない」という選択です。 つまり画像の状態は、「Stylus」に「大元のスイッチを切るな」と指定しています。(これがデフォルトです)

「▢ すべてのスタイルをオフにする」という機能は、「Stylus」の機能の全体に対する「ON/OFF」機能で、家庭の電灯に例えるならブレーカーのスイッチです。

個別のスタイルの前に付いた「▢ Test Style」のチェックボックスは、このスタイルのみを「ON/OFF」するスイッチで、いわば各部屋の電灯スイッチです。

どこかの部屋の電灯スイッチが「ON」になっていても、ブレーカーは無関係に「ON/OFF」出来ます。 ブレーカーを「OFF」にしても、各部屋のスイッチの「ON/OFF」は変わらないのと同じです。

上手く説明できたでしょうか?
Commented by しろう at 2022-04-20 22:25 x
TestfileでStylusの操作をしていると想定してください。4月20日の午後1時に操作を止めて、スタイルをオフにします。次回操作を開始するときは4月20日の午後1時時点からの状態から開始する。一方、すべてのスタイルをオフにするにチェックを入れてしまうと、デフォルト時点まで戻ってしまうと解釈してよろしいでしょうか
Commented by Ataron at 2022-04-21 08:36
> しろうさん

ごめんなさい、どうも話が良く見えないので、脱線するかも知れないですが、色々書けば「ははぁん」と判って来るのではと思って書きます。

スタイルの「オン/オフ」というのは、「ブラウザ表示にスタイルを適用する事」を「適用する/適用しない」という意味です。 これは、「すべてのスタイルをオフ」の場合も同じで、「すべてのスタイルを適用する/すべてのスタイルを適用しない」を切換える意味です。

これと、スタイルの実体の「CSSコード」を編集する操作を「止める・続ける」といった事とを、ごっちゃにされている様な気がします。

スタイルの「CSSコード」を編集すると、適用先を表示したブラウザ画面の表示は(リアルタイムに近い状態で)変化します。 ただしこれは、編集中のスタイルが「オン」になっている場合です。

もし編集しているスタイルが「オフ」になっている場合は「スタイルを適用しない」のですから、コードを編集をしてもブラウザの画面の表示は、当然のこと変化しません。 ただ、編集後にスタイルを「オン」にすると、編集前にそのスタイルを「オン」にした時とは異なっているはずです。

「すべてのスタイルをオフにする」にチェックを入れても、それとは無関係にスタイルのCSSコードは編集が出来るし保存も出来ます。 後で「すべてのスタイルをオフにする」のチェックを外しても、編集したCSSが元に戻る事はありません。 スタイルの「オン/オフ」と、そのCSSコードを編集する事とは、全く別の事です。

現在のしろうさんにとって、「すべてのスタイルをオフにする」が混乱の元になっている様な気がしますが、とりあえずこのスイッチは「チェックを入れず」に、使って行けば良いと思います。 私は、このスイッチを使う様になったのは、かなり慣れた後です。
Commented by しろう at 2022-04-22 18:11 x
>私は、このスイッチを使う様になったのは、かなり慣れた後です。
まだ、実際に使っていませんが、管理人さんのご説明で大枠は理解できたと思います。実際に使わないとピンとはこないと思います。管理人さんのこの次のブログもありますが、ある程度Stylusに慣れてからレビューします。

1点だけ確認させてください。
TestFileのほかにStyleが3つぐらいあるとします。TestFileが操作中だと仮定します。
TestFileをデフォルトの状態をチェックするには、いったん、下のスタイルをすべてオフにしてから、Test
Fileをオンにすれば、デフォルト時のTestFileを閲覧できる。
下のスタイルをすべてオフしなければ、TestFileをいったんオフのして、再びオンにして閲覧すれば、直近のスタイルが閲覧できると理解してよろしいでしょうか。
Commented by Ataron at 2022-04-23 03:59
お聞きになっている事は、1つの対象要素に、複数のCSSが重なって指定されている場合の事と想像します。 あるCSSは青色の指定で、他のCSSは赤といった事は普通にあり、アレンジの局面ではその事の方が多いです。

で、通常は「後方の指定が優先」されます。 後から指定したCSSのプロパティが有効になり、先に指定していたものは意味をなさなくなります。 同じひとつのスタイルの中でも、ある要素に前方の行と後方の行で、異なる指定をした場合は、後方の行が優先です。

Stylusに登録した複数のスタイルがあり、その中のCSSが、同じ要素に異なる指定をしている場合、これは、Stylusに後に登録したスタイル上のCSSの方が優先になります。 Stylusは、登録した順にスタイルを適用する仕様なので、後の登録スタイルほど後方の指定になるからです。

末端の要素(ある部分を構成するテキストとかブロックとか)のひとつひとつに対して、複数のCSSが指定するプロパティ(色とか長さとか…)がある時は、どの指定が有効になっているかに着目すると、分かり易いでしょう。 それが最後の結果で、それを目的の通りにするためにCSSを操るわけです。

先に、後方優先と説明しましたが、順位の指定は実はもっと複雑です。 最も多くの場合に後方優先が効くだけで、いくつも例外を生じる規則があり、これは場合を経験して知識を増やすしかありません。

Stylusに複数のスタイルがあり、同じ部分にそれぞれのCSSが何らかの指定をしている場合、どれかのスタイルをON/OFFした時、実際の変化に現れるのは、ON/OFFしたスタイルの中のCSSで、優先になって表示に反映しているCSSだけが、変化に現れると言えます。(同じ指定の場合は、どちらが効いているのかわからないですが)

また、他のスタイルをON/OFFすると、そのON/OFFしたスタイル中で、優先になっていたCSSがOFFになることで、それまで順位が低かった他のスタイルのCSSが反映する様になります。 こういった、優先の駆け引きで実際のデザインが決定されているので、そのあたりも経験で判って来ると思います。

具体的なページで、どの部分のデザインをどうしたいといった状態で、判らない事、思った様にならない事を調べたり、聞いたりするという事を通して、あっさり理解できる事が多いと思います。
名前
URL
削除用パスワード

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