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

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境

2016年 09月 24日
Chrome拡張機能「Stylus」の導入や「アイコン機能メニュー」の操作などについては、以下を参照ください。 このページは「Stylus」の使用方法(1)の続きです。


下は「Stylusアイコン」を左クリックして「アイコン機能メニュー」を開いたところです。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_19470682.png

ここで「管理」を押すと「管理画面」が開きます。

「管理画面」は Stylusのメイン画面で、スタイルの登録や管理を行います。 左側が「管理メニュー」、右側は Stylus内に登録したスタイルの「リスト画面」です。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_19522775.png



「管理メニュー」


「フィルター」「オプション」「バックアップ」の3種のメニュー(青枠)は、タイトルの前の「▾」ボタンを押すと閉じる事が出来ます。


フィルター


「フィルター」

登録した全スタイルを分類し、必要なスタイルだけをリスト表示する機能です。 利用するスタイルが増えて来ると、この機能は便利になります。

▪一番下の枠は登録スタイル内の検索枠です。 検索に関する詳細については、この枠の「ⓘ」ボタンを押すと表示されます。

「ソート指定」
「リスト画面」の表示順(昇順・降順)などを指定します。

「全スタイルの更新をチェック」
ネットからインストールした全てのスタイルについて、更新があったかどうかをチェックするボタンです。

▪更新があれば、更新を確認するボタンが表示され、押せば更新します。
▪インストールしたスタイルのコードを変更している場合、更新により変更内容が上書きされて無くなります。 コードを変更をしたスタイルが有る場合に、この注意表示があります。
▪変更内容の上書きを避けたい場合には、変更したコードを新たなローカルスタイルとして保存する必要があります。 インストールしたスタイルは、たとえスタイル名を変更しても上書きされます。 これは一般のファイルの仕様とは異なります。
▪ローカルで作成したスタイルは、更新チェックの影響を全く受けません。

「新スタイルを作成」
スタイルをユーザー自身が新しく作成するには、このボタンで編集画面を開きます。


オプション


「適用先欄のファビコン」
クリックを入れると「リスト画面」の 「適用先URL」にファビコン(サイトのシンボルアイコン)を表示します。 更に「▸」ボタンを押すと、ファビコンのカラー/グレーの選択が可能になります。「リスト画面」の がファビコンです。

「適用先欄の表示件数」
「リスト画面」の ❺ ⓳ ⓴ が「適用先欄」です。 スタイルの 「適用先URL」の表示上限数を指定します。 」マークを押すと一時的に全ての行を表示出来ます。

「オプションUI」
Stylusの「オプション画面」(ブラウザ拡張機能の設定画面)を開きます。

「ショートカット」
Stylusの「ショートカット設定画面」を開きます。

「テーマ」
このボタンを押すと「userstyles.org」のサイトを開き、Stylus自体に利用できるスキンデザインが一覧表示されます。 そこでスキンをインストール出来ます。


バックアップ


「スタイルをエクスポート」
このボタンを押すと「管理画面」にリストされたスタイルが、纏めて「.json」ファイルとしてバックアップされます。

▪Windows10では Chrome / Firefox のバックアップ先は「ダウンロード」フォルダです。 Chromeの場合は、バックアップすると「管理画面」のウインドウ下端に「ダウンロード」フォルダへのアクセス枠が表示されます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20070906.png

「スタイルをインポート」
このボタンは「ダウンロード」フォルダを開きます。 バックアップした「.json」ファイルを開くと、そのファイルに含まれる全てのスタイルがインポートされます。

▪バックアップと現在に同じスタイルがあり、スタイルの内容が異なる場合は、バックアップのスタイルで上書きされて、過去の時点スタイルに戻ります。
▪自分で作成したスタイルを更新している場合は、インポートで過去データで上書きされるので、注意をしないと最近のアレンジを失います。
▪バックアップのファイル容量は大きくないので、バックアップを惜しまない様に。



「リスト画面」


一般のブラウザ画面のヘッダーからポップアップする「アイコン機能メニュー」からも ⓮ ⓯ ⓱ の機能が使えますが、管理画面ではより細かな操作が可能です。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20101908.png

「チェックボックス」
スタイルの有効・無効を直接に切り替えます。「編集画面」で「有効・無効 → 保存」をで押すのと同じ意味になります。

「スタイル名」
この部分をクリックすると、このスタイルを編集する「編集画面」が開きます。

「スタイルインストール元へのリンク」
ネットからインストールしたスタイルの、インストール元のページを開きます。
(ユーザーが自作したローカルスタイルには表示されません)

「削除スイッチ」
×」はこのスタイルを削除するスイッチです。 ユーザーが自作したスタイルやアレンジしたスタイルの場合は、バックアップがないとコード内容が永久に失われます。

「更新ボタン」
普通は 「全スタイルの更新をチェック」でリスト全体の更新をしますが、このスタイルだけを更新したい場合は、このボタンで更新をします。 操作は に準じます。
(ユーザーが自作したローカルスタイルには表示されません)

❺ ⓳ ⓴「適用先欄」
この部分は単なる表示でリンク機能はありません。



「編集画面」


「管理メニュー」の 「新スタイルを作成」を押すか、「リスト画面」の「スタイル名」をクリックすると、スタイルの「編集画面」が開きます。


スタイル編集の要点


下はサンプル入力をした状態です。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20180497.png

スタイルの基本構成は上図の赤枠の3ヵ所に表示されます。

「スタイル名」(任意の名前を付けます)
「適用先」(スタイルを適応するURLの範囲指定)
「CSSコード」


適用先の設定


上図の 「適用先」は「すべて」の設定です。 しかし実際は、無関係なサイトへの誤適応を避けるため、適用範囲を限定するのが普通です。

適用先を設定するには 」ボタンを押します。 これで下図の入力枠と「-+」のボタンが表示されます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20205881.png

「適用先」の範囲は ❺ ❻ の組み合わせで決まります。 詳細は次項を参照ください。

「指定形式」
この枠をクリックして4種の指定形式のいずれかを選択します。
(選択の基準が判らない時は「次で始まるURL」が無難です)

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20240596.png

「適用先URLの入力枠」
入力内容は、「半角空白」や「/」「.」が意味を持つので正確な入力が必要です。

▪ブラウザでスタイルの対象ページを開き、Stylusの「アイコン機能メニュー」(ポップアップ)のURL自動取得の機能を利用すると便利です。


指定形式の区別


〔 URL 〕
に記入されたURLに完全に一致したページにのみ、スタイルが適応されます。

▪「http://」「https://」を省略したURL表記は不適となり適応されません。

〔 次で始まる URL 〕
前方一致です。 URLの左側からの文字が一致していれば、スタイルが適応されます。

▪「http://」「https://」を省略したURL表記は不適となり適応されません。
▪ 右側は、URL表記の途中で途切れていても構いません。

〔 ドメイン上の URL 〕
の記述がドメイン名(サブドメイン名を含む)として有効なら、そのドメインとサブディレクトリにスタイルが適応されます。

▪「http://」「https://」などで始まっていたり、末尾に「/」があるとドメイン名にならず、不適で適応されません。
▪サブドメインまで指定すると、ドメインや他のサブドメインには適応されません。
▪ドメインへの指定はそのサブドメインにも適応され、その逆は適応されません。
▪ドメインやサブドメインの区別はネットで調べてください。

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


適用先の追加と削除


-+」(削除ボタン・追加ボタン)
「適用先」の削除・追加をするボタンです。「」を押すと、下の様に新しい適用先の行が追加されます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20304869.png

▪「適用先」は行単位で1つの範囲を指定しますが、「指定形式」が適用先ごとに異なっていても構いません。
▪「適用先」の数や順番に制限はなく、行の割込み追加や削除で整理が出来ます。
▪「」ボタンは、行単位で「適用先」を削除します。


セクションの追加


「セクション」は、複数スタイルを1個のスタイル名で登録する機能です。 1つのサイトに関して、複数ページのスタイルを管理する場合、あるページについて複数のパーツに分けてスタイルを管理する場合などに、「セクション」を利用します。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20334830.png

「他のセクションを追加」
このボタンを押すと、新しい 「適用先」「CSSコード」のセットが、下側に追加されます。 このひとつのセットが「セクション」です。

「複製」
このボタンを押すと、セクションのコピーが下側に追加されます。 バックアップを作ってから、セクションを再アレンジをする等、利用方法は色々考えられます。

この ❽ ❾ の操作により、下図の様にセクションが追加されます。

▪セクションはコード1、コード2と連番が付けられ、幾つでも増やせます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20355777.png

「編集枠ハンドル」
編集枠の下端の「編集枠ハンドル」をドラッグすると、編集枠の高さを任意に調節できます。 またダブルクリックすると「ウインドウの高さ」「最後に設定した高さ」のどちらかに切り替わります。

「セクションを削除」
追加したセクションをセクション単位で削除します。 セクションを削除すると、同じ場所に 「削除したセクションを復旧」が表示されます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20371169.png

削除した編集枠のコードを元に戻す機能で、このバックアップは「編集画面」を閉じるまで保存されます。 しかし、一度「編集画面」を閉じると無くなりますから注意が必要です。

「▲」「▼」(セクション移動ボタン)
セクションの順番を上下に隣接したセクションと入れ替えます。 コード番号とセクションの位置だけが変更されます。 ただし、CSSコードの後位優先が関係して、セクション位置の変更がページデザインに影響する場合があります。

「書式整形」
このセクションの編集枠のコードだけを書式整形し、他のセクションの編集枠は整形されません。「編集画面」の「左メニュー」の「書式整形」ボタンは、全てのセクションのコードを書式整形し、動作する範囲だけが異なります。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20382856.png

書式整形機能の詳しい扱いについては、以下を参考にしてください。
  「Stylus」エディタの「書式整形」を使いこなす



「編集画面メニュー」


スタイルの保存・登録


「編集画面」で、スタイルの内容に手が加えられると、「保存」ボタンがグレーから黒に変わります。 新しくスタイルを作った場合は当然ですが、この画面を閉じる場合は、編集内容を保存するか否かを問われます。

「保存」
「保存」ボタンを押すと編集したスタイルが登録されます。 新しく作成したスタイルは新規登録、登録スタイルを再編集した場合は、これまでの内容を上書きします。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20422885.png

「管理画面に戻る」
「編集画面」から「管理画面」に戻るボタンです。 保存で「編集画面」が閉じないのは、このエディタの仕様です。「管理画面」に戻る必要がないならブラウザのタブを閉じます。

「有効」
スタイルの有効・無効を切替えます。 チェックを操作は 「保存」を押すことで実際に反映します。「管理画面」の「リスト画面」のチェックボタンは「保存」なしで有効・無効が直接に反映します。

「自動プレビュー」
チェックを入れると、編集中のスタイルを適用し続けます。 編集中のコードを「保存」するまで、コード自体は固定されませんが、その効果をつぶさに確認できます。

慣れると便利ですが、「保存」しページのリロードで実効するコードが有り、プレビューが確実でない場合があります。 また、DevTools等を使用している場合に、編集操作がToolsの作業を上書きする事など、逆に不便になる事もあります。 慣れない間はオフがお勧めです。


インポート と エキスポート


「インポート」
「編集画面」に、外部スタイルを取り込むことが出来ます。 このボタンを押すと、受け入れ用の小ウインドウが開き、そこに「Mozilla Format」の外部コードを貼り付けて取り込む事が出来ます。

▪「Mozilla Format」は、コードと適用先をセクション毎に纏めたフォーマットで、スタイルデータの保存・交換に適したものです。

「エキスポート」
「編集画面」に取り込んでいるスタイルを「Mozilla Format」に変え、送り出し用の小ウインドウに表示します。 例えば「userstyles.org」にスタイルを登録するには、この小ウインドウ内のコードをコピーして、サイト上の編集枠に貼り付けます。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20462215.png


オプション


「編集画面」のエディタ本体は高機能です。 各種の設定が可能で、本格的な用途に対応できるでしょう。 編集枠の背景・文字色のセットが下の赤枠の「テーマ」で選択可能です。 下は黒バックですが、白バックで少し輝度を落としたものもあります。

エキサイト編集画面のアレンジ / Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境_a0349576_20475909.png




by Ataron2 | 2016-09-24 20:30 | ブログ編集画面のアレンジ