Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ / Stylus の導入と設定方法(簡易版): Chrome版

2017年 09月 18日
 拡張機能「Stylus」を Chromeに導入する 

Chromeで以下のリンクをクリックし、Chrome拡張機能の管理サイトの「Stylus」のページを開きます。

下図のページが表示されたら、ページ上の「 CHROMEに追加」を押します。

a0349576_14023058.png

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

a0349576_14030306.png

ページがStylusのサイトに変わりますが、これで導入は完了です。 アイコンが出来たら自分のページに戻ります。
「Stylusアイコン」を左クリックして、メニューの「管理」を押します。 これが「Stylus」の起動方法です。

a0349576_10482222.png

「管理画面」が表示され、操作はここを中心に行います。 下図は初期状態で右側が空白ですが、スタイルを登録すると、登録スタイルのリストが表示されます。

a0349576_11012697.png



 スタイルの編集と登録 


 スタイルの編集 


上図の「新しいスタイルを作成」を押し、「スタイル編集」の画面を開きます。

a0349576_23201835.png

上図の3ヵ所は、スタイル登録の要点です。

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


 適応先の個別指定 

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

限定した適応先を設定するには、 の「個別指定」を押します。 これで、2個の枠と「削除」「追加」のボタンが表示されます。

a0349576_00053760.png

「適応先」の範囲は ❹ ❺ の組み合わせで決まります。
はURLの入力枠です。(「半角空白」や「/」「.」が意味を持つので正確な入力が必要です)
をクリックして4種の指定形式から選択します。(判らない時は「次で始まるURL」が無難です)

a0349576_00054276.png

のボタンで「適応先」を削除・追加できます。「追加」を押すと、下の様に新しい適応先の行が追加されます。

a0349576_00054967.png

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


 スタイルの登録 

「編集画面」での編集が出来たら、下図の「保存」 を押します。 これで編集したスタイルが登録され、その時点で働き始めます。

a0349576_07252409.png

保存で「編集画面」が閉じないのは、このエディタの仕様です。「編集画面」が不要になった場合は、ブラウザのタブを閉じます。 また、「管理画面」に戻りたい場合は「管理画面に戻る」 を押します。



 登録スタイルのリスト操作 

「保存」したスタイルは「管理画面」の登録スタイルのリストに並びます。 このリスト上の操作で、全ての登録スタイルを管理します。

a0349576_22225150.png

「チェックボックス」「スタイル名」「×
 ▪「チェックボックス」は、スタイルの有効・無効化を切り替えます。
 ▪「スタイル名」をクリックすると、そのスタイルを編集する「編集画面」が開きます。
 ▪「×」は、そのスタイルを削除するスイッチです。 バックアップが無い場合は永久に失われます。
 ▪右側のファビコンと適応先URLは、単なるデータ表示です。




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



[PR]
# by Ataron | 2017-09-18 13:47 | ブログスキンのアレンジ | Comments(0)