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

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション

2016年 09月 24日
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 Ataron2 | 2016-09-24 21:00 | ブログ編集画面のアレンジ