StyleEditor ドキュメント - StyleShare for Sleipnir

StyleEditor ドキュメント

【StyleEditorとは】

Web上に公開されているページの表示を、自分の好みに合うようにカスタマイズするためのプラグインです。
カスタマイズした設定内容は、スタイルファイルとしてエクスポート／インポートすることが出来、インターネット上で公開されたスタイルファイルをインストールすることも出来ます。

【使い方】

●編集画面の表示

Sleipnirのメインメニューの[ツール(t)]→[現在の Web ページをカスタマイズ(a)]で表示することが出来ます。
上記メニューが追加されていない場合は、同じくSleipnirのメインメニューの[表示(v)]→[Dock]→[StyleEditor]で表示することが出来ます。

●編集画面の使い方

表示しているページの表示設定を変えたい箇所をマウスでクリックします。 するとその場所が選択され、赤く網掛けが掛かります。
（クリックした箇所だけでなく、ページ上の似たような要素も選択されます）
要素を選択したら、編集画面の右側のプロパティリストの内容を変更すると、ページの表示が変更されます。次回同じページを開いた時も設定した内容に基づいて表示されます。

●スタイルファイルの設定内容表示

編集画面の左側には、現在のページのスタイルファイルの設定内容が表示されます。
上から、

　　設定名　　　　　　　編集開始時にページのタイトルを暫定で設定します。
　　説明　　　　　　　　このスタイルファイルの説明を記述します。
　　対象URI　　　　　　このスタイルファイルの適用対象uriを示します
　　　　　　　　　　　　（uriにワイルドカードを含めることができます。）
　　編集時URI　　　　　このスタイルファイルを編集する時に表示されるuriです。
　　　　　　　　　　　　（管理画面から「編集」を選択した場合に表示されます。）
　　CSS　　　　　　　　ページに追加するCSSの内容をテキストで設定します。
　　スタイル設定　　　　プロパティリストから設定したカスタマイズ内容を表示します。

また、表示されているページに複数のスタイルファイルが存在する場合は、上部の一覧から選択することが出来ます。
いずれかの項目を選択し、鉛筆マークのボタンをクリックすると、編集することが出来ます。
スタイル設定はプロパティリストから編集することができます。
また、ｘボタンをクリックすると、選択されたスタイル設定を削除することが出来ます。
右クリックメニューから選択中のスタイル設定をCSS形式でクリップボードにコピーすることもできます。

●現在の文書の構造

編集画面の真ん中の部分には現在表示されているページの構造が表示されます。
ここから要素の選択を行うことも出来ます。
このペインにはボタンが3つあり、左から

　　編集モードに移行
　　閲覧モードに移行
　　スタイル設定ファイルの管理ウィンドウの表示

という機能を担っています。


ツリー構造内での右クリックメニューには下記の項目があります。

　　全て開く
　　全て閉じる
　　選択項目より下を開く
　　選択項目より下を閉じる
　　選択項目以外を全て閉じる
　　ソースの表示

「ソースの表示」は現在選択されている要素以下のHTMLソースを表示します。
それ以外のメニューはツリー構造の開閉に関するものです。

●編集モードと閲覧モードについて

編集モード中はプロパティを編集したり、スタイルファイルの内容を変更することができますが、閲覧モード中はこの編集機能を使うことはできません。
閲覧モード中はページ上のリンククリックによって移動することが出来ます。
編集モード中はリンククリックによるナビゲートは無効になっています。

●プロパティリスト

編集画面の右側の領域はプロパティリストです。選択中の要素のCSSプロパティが表示されます。
入力候補のドロップダウンリストから選択して、編集することが出来ます。

●選択中の要素

「選択中の要素」エディットボックスには現在選択中の要素を表すセレクタ が表示されます。また自分でセレクタを入力して「Enter」またはエディットの右側のボタンをクリックすることにより、要素を選択することも可能です。
その際サポートされるセレクタは現在のところ下記の通りです。

*	universal selector
E	type selectors
E F	descendant selectors
E > F	child selectors
E:first-child	the :first-child pseudo-class
E:nth-child	an E element, the n-th child of its parent
E + F	adjacent selectors
div.warning	class selectors
E#myid	id selectors

　* :nth-child 擬似クラスは nth-child(整数) という形式のみサポートします。

また下記の擬似クラスについては、StyleEditorはスタイル設定時の整合性のチェックは行いませんが、そのままページCSSに追加しますので、正しく設定されていれば、結果的に効果を得られることになります。
（元のページCSSの記述によっては効果が得られないこともあります。）

E:link
E:visited
E:active
E:hover
E:focus

●詳細選択

ページ上または「文書の構造」のノードをクリックして要素を選択するとき、似たような意味の要素も一緒に選択されますが、クリックした要素だけを選択したい場合、Shiftキーを押しながらクリックします。
そうすると、クリックした要素1つだけが選択されます。

●スタイル設定ファイルの管理ウィンドウ

スタイル設定ファイルの管理ウィンドウはメインメニューの
[ツール(t)]→[スタイル設定ファイルの管理(c)...]から表示することが出来ます。
また、編集画面の「現在の文書の構造」ペイン上のボタンからも表示することが出来ます。

スタイル設定ファイルの管理ウィンドウには作成された、またはインストールされたスタイルファイルの一覧が表示されます。
下記の6つボタンがあります。

　　編集　　　　　選択されているスタイルファイルを編集します。
　　削除　　　　　選択されているスタイルファイルを削除します。
　　無効／有効　　選択されているスタイルファイルを無効化／有効化します。
　　　　　　　　　（無効化されていると、ページ表示時に反映されません）
　　インポート　　ディスク上のスタイルファイルをインストールします。
　　　　　　　　　（ファイルを開くダイアログが表示されます。）
　　エクスポート　選択中のスタイルファイルをディスクに保存します。
　　　　　　　　　（保存ダイアログが表示されます。）
　　閉じる　　　　スタイル設定ファイルの管理ウィンドウを閉じます。

written by kenjiro