Studio TA Subsite の案内とお知らせ

Stylist / Google Chrome 拡張機能の使用法

2016年 08月 22日
Chrome の拡張機能 Stylist は、ユーザースタイルシート(CSS)を管理し適応するものです。 同種の拡張機能は他にもある様ですが、私自身の運用でトラブルを感じさせずお勧め出来ます。 この Stylist は日本のプログラマーの方が製作され、過去にはブログも公開されています。
Stylist の扱い方は、なんとなく出来てしまったという人は多いと思いますが、その動作を調べて確実な使用方法を整理してみました。 ユーザースタイルシートという有効な機能を、より多くのユーザーが知って、これを利用する助けとなれば本望です。



〔 Stylist の導入 〕

Stylist は Google Chrome の使用が前提です。 PC版の Chromeが動作していれば、OSが何であれ動作します。 Stylist を導入するには、Chromeで下のリンク先を開きます。

開いたページが「拡張機能 Stylist のページ」である事を確認して、右上の「+Chromeに追加」を押します。

a0349576_23400740.png

これで、使用中の Chrome環境に Stylist が導入されます。 Chromeの拡張機能は追加や削除がとても簡単です。




〔 Stilistアイコンの表示設定 〕

Stylistアイコン(下図の赤枠)を右クリックして「オプション」を押すと、Chrome に下の様な管理ページが開きます。

b0174191_12055078.png

上図は左のタブ「Basics」を開いたところですが、ここでStylistアイコンの表示の仕方を選択出来ます。
  ○「none」は常時グレーアウト
  ○「matched」は登録スタイルの適応時だけカラー表示
  ○「always」は常時カラー表示
Stylistの動作は同じですが、適応サイトの区別が判る「matched」がお勧めです。
(但し「always」には、最後の追記に示した使い方があります)



〔 スタイルの登録や更新 〕

Stylist の操作の主要部は「Styles」のタブです。「Styles」のタブの画面は、下図の様に左側に登録したスタイル名が並びます。 そのどれかを選択すると右側に選択したスタイルの内容が表示されます。 右側はスタイルの編集画面です。

b0174191_12073452.png

上の様に「Add New Style」を押すと、右側に新しいスタイル編集画面(下図)が出ます。

b0174191_12130634.png

 ①登録スタイル名(ここに記入した名前がスタイル名として左側の列に表示されます)
 ➁URL (このスタイルを適応するページのURL。 指定の仕方は、単一/複数/全ページを選択)
 ➂ユーザースタイルシート(CSS)のコード

これらを書き込んで下の「Save」を押すと、右側の内容が登録スタイル名で登録されます。

Stylistでは「Save」を押す操作はとても重要です。 画面上で書き換えや設定変更を行っても、「Save」を押して「Saved !」が表示されない限り元の内容に戻ってしまいます。 また、「Save」後に適応対象のページをリロードしない限り、編集操作はページ表示に反映されません。

先の図で①と➁の記入がないと「Save」出来ません。 ➂は記入が無くてもOKで、後で編集出来ます。 また、下図の様に「All site」にチェックを入れると➁で全URLを指定した意味になります。

b0174191_12141918.png

これは「Save」が出来るので、後でチェックを外しURLを記入することも可能です。 下図の様に「Saved !」が出れば、この例ではスタイル名「Tset CSS」の内容が登録(更新)されたという事です。

b0174191_12152514.png




〔 適応範囲を指定する 〕

「All site」のチェックは、例えば「あらゆるサイトで表示フォントをメイリオにしたい」という様な場合に使います。 このチェックを入れとりあえず全サイト対象として、このスタイル強制に無理があるサイトをブラウズする場合は、適応を一時的にOFFにするといった使い方が出来ます。 下図の様に「disable」を押すと、登録内容がグレーアウトして表示され、次に「enable」を押すまで、このスタイルをOFFにできます。

b0174191_12163143.png

この「disable/enable」は「Save」で登録する必要がありません。 指定は Chrome を閉じても継続される事に注意してください。 これは、CSSの動作確認にも使える有効な機能です。

あるスタイルを、特定の複数のサイトに対してだけ指定するには「add Rule」を使います。 これを押すと、➁のURL指定枠が下に1個追加されます。(下図)

b0174191_12175237.png

上の例なら「Test CSS」のスタイルが、この新しい枠に登録したURLにも適応される様になります。「add Rule」でURL指定枠を次々と増やす方法は、適応範囲は限られているので、少し複雑なコードも指定可能になるでしょう。 もちろん、URL指定枠を追加するには、最後に「Save」を押して登録が必要です。

各URL枠の右に「del」ボタンがありますが、これも「Save」を押さないと実際には削除されません。

b0174191_12233741.png

「del」を押した枠はグレーアウトしますが、これは先の適応のOFFと違い、誤消去防止のための表示です。 特定のURLを一時的にOFFにしたい時は、どこかにURLを書き留めて一旦削除するしかありません。 このグレーアウトの状態は、他の登録スタイルを見て戻ると元に戻ってしまうもので、適応のOFFとなりません。



〔 複合スタイルとスタイル管理 〕

下図の例では登録スタイル「Test CSS」に、1個のスタイル(下図の赤枠)が登録されています。 これはスタイルの単位で、この単位ごとに「Save」で登録し「del」で削除する仕様です。

b0174191_12265765.png

「ひとつの登録スタイル名に1個のスタイル」が普通の使い方ですが、Stylist は 「ひとつの登録スタイル名に複数のスタイル(複合スタイル)」を登録できます。 別のスタイル名を作って分けて登録しても同じ事ですが、この複合スタイルは少しだけ便利です。

一番下の「new style set」を押すと、下図の様に新しいスタイル編集画面が下に追加されます。 このボタンで幾つでもスタイル枠を追加でき、この登録スタイルは複合スタイルとなります。

b0174191_12280622.png

それぞれのスタイル枠ごとに「Save」「del」の機能がありますが、一番上の「delete ALL」は右側を全部削除するボタンです。 これらのボタンで複合スタイルを管理しますが、「disable」は複合スタイル全体に適応され、個別に適応はできません。

複合スタイルは、スタイル編集時に便利です。 元のStyle1の内容をStyle2にコピーしながら編集し、Style1はURL欄を少しだけ変えて「Save」し、更新したStyle2を「Save」して効果を確かめるという手順です。 また、新しい追加CSSの有効性の確認が、元コードを残したまま出来ます。(複合スタイルは、含まれるスタイルが全て適応されます)

私は編集時に利用するだけで、最後は1個のスタイルに整理して纏める様にしています。 しかし、この機能で左側の登録スタイル数を整理することが可能です。 例えば、エキサイトブログに関して「ブログ編集画面」「テンプレート編集画面」「トップページ」など、複数で別個のスタイルがある場合、ひとつの登録スタイル名に複合スタイルとして纏める事が出来ます。 フォルダー整理と同じで、それ以上の意味はありませんが。



以上、Stylist の扱いを纏めました。

 ▪「Save」を忘れて登録内容が元に戻っている
 ▪対象ページをリロードしないとスタイル更新は反映されない
 ▪Stylist 内の表示が、管理画面をリロードしないと反映されない場合がある

Stylist を使っていて判らなくなったら、慣れない内は上の点が関係するかもしれません。

私は、複合スタイルを編集時にだけ利用していますが、他に有効な活用法があれば、ぜひ教えてください。



〔追記〕2017.01.23

〔サブウインドウのモード〕

Stylist の基本操作は、ここまでの説明の様に Chromeで「オプション」ページを開き、スタイルの編集や登録を行います。

これに対して、Chromeで任意のページを開いた状態でも Stylistを操作できます。 このモードの制限として、登録済スタイルを呼び出せず扱い難い部分がありますが、「ページへのスタイル適応を見ながらCSSコードを試す」には便利です。

このモードはカラー表示の Stylistアイコンの左クリックから入るので、アイコン表示を「always」とする必要があります。
アイコンを左クリック(1~2回)すると、下図の様な Stylistのサブウインドウが開きます。
(例として「Google検索」ページ上で、サブウインドウを開いています)

b0174191_14413573.png

操作の方法は基本操作と同じで、以下の①~➂を記入します。
 ①登録スタイル名(ここに記入した名前がスタイル名として登録されます)
 ➁URL(開いたページのURLが自動的に指定されていますが、余計な末尾をここで編集可能)
 ➂ユーザースタイルシート(CSS)のコード

b0174191_14512882.png

ちなみに➂の右下隅をドラックして、記入枠を拡げる事が出来ます。
CSSコードを記入して「Apply」を押すと、ページにスタイルが適応されます。

b0174191_15281650.png

上図では、ページ上の「span」要素が赤色に変わり、コードが有効なことが判ります。

 ▪このモードを一度起動すると、ブラウザを再立ち上げするまで、記入したCSS内容が記憶されています。
 ▪CSS内容を書換えると、以前の内容は消えます。
 ▪下図の様にブラウザのリロードボタンを押せば、「Save」前ならページへのCSS適応をリセットできます。

b0174191_15483999.png

 ▪「Save」を押すと記入したCSS内容が登録されますが、登録した内容はこのモードでは呼び出せません。
 ▪下図の様に CSSの内容に間違いがあっても、登録は実行されます。 逆にこれを利用して、URLの取得や、コードのテストや覚書きのツールとして使い、後で基本操作で編集すると便利かもしれません。

b0174191_16081578.png




〔追記〕2017.03.02

上記の説明は「対象URL」の指定枠が「prefix」の場合のみですが、この枠の扱いの詳細は以下のリンク先を参照ください。



[PR]
by Ataron | 2016-08-22 12:38 | PC環境(ハード/ソフト) | Comments(0)
名前
URL
削除用パスワード

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