「StyleEditor ドキュメント」の編集履歴(バックアップ)一覧はこちら
「StyleEditor ドキュメント」(2009/02/11 (水) 14:34:02) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>StyleEditor ドキュメント</h1>
<h4>【StyleEditorとは】</h4>
<br /><p class="disc">Web上に公開されているページの表示を、自分の好みに合うようにカスタマイズするためのプラグインです。<br />
カスタマイズした設定内容は、スタイルファイルとしてエクスポート/インポートすることが出来、インターネット上で公開されたスタイルファイルをインストールすることも出来ます。</p>
<div class="subcontent">
<div class="disc">
<h4>【使い方】</h4>
<br /><h6>●編集画面の表示</h6>
<br />
Sleipnirのメインメニューの[ツール(t)]→[現在の Web ページをカスタマイズ(a)]で表示することが出来ます。<br />
上記メニューが追加されていない場合は、同じくSleipnirのメインメニューの[表示(v)]→[Dock]→[StyleEditor]で表示することが出来ます。<br /><br /><h6>●編集画面の使い方</h6>
<br />
表示しているページの表示設定を変えたい箇所をマウスでクリックします。 するとその場所が選択され、赤く網掛けが掛かります。<br />
(クリックした箇所だけでなく、ページ上の似たような要素も選択されます)<br />
要素を選択したら、編集画面の右側のプロパティリストの内容を変更すると、ページの表示が変更されます。次回同じページを開いた時も設定した内容に基づいて表示されます。<br /><br /><h6>●スタイルファイルの設定内容表示</h6>
<br />
編集画面の左側には、現在のページのスタイルファイルの設定内容が表示されます。<br />
上から、<br /><br />
設定名 編集開始時にページのタイトルを暫定で設定します。<br />
説明 このスタイルファイルの説明を記述します。<br />
対象URI このスタイルファイルの適用対象uriを示します<br />
(uriにワイルドカードを含めることができます。)<br />
編集時URI このスタイルファイルを編集する時に表示されるuriです。<br />
(管理画面から「編集」を選択した場合に表示されます。)<br />
CSS ページに追加するCSSの内容をテキストで設定します。<br />
スタイル設定 プロパティリストから設定したカスタマイズ内容を表示します。<br /><br />
また、表示されているページに複数のスタイルファイルが存在する場合は、上部の一覧から選択することが出来ます。<br />
いずれかの項目を選択し、鉛筆マークのボタンをクリックすると、編集することが出来ます。<br />
スタイル設定はプロパティリストから編集することができます。<br />
また、xボタンをクリックすると、選択されたスタイル設定を削除することが出来ます。<br />
右クリックメニューから選択中のスタイル設定をCSS形式でクリップボードにコピーすることもできます。<br /><br /><h6>●現在の文書の構造</h6>
<br />
編集画面の真ん中の部分には現在表示されているページの構造が表示されます。<br />
ここから要素の選択を行うことも出来ます。<br />
このペインにはボタンが3つあり、左から<br /><br />
編集モードに移行<br />
閲覧モードに移行<br />
スタイル設定ファイルの管理ウィンドウの表示<br /><br />
という機能を担っています。<br /><br /><br />
ツリー構造内での右クリックメニューには下記の項目があります。<br /><br />
全て開く<br />
全て閉じる<br />
選択項目より下を開く<br />
選択項目より下を閉じる<br />
選択項目以外を全て閉じる<br />
ソースの表示<br /><br />
「ソースの表示」は現在選択されている要素以下のHTMLソースを表示します。<br />
それ以外のメニューはツリー構造の開閉に関するものです。<br /><br /><h6>●編集モードと閲覧モードについて</h6>
<br />
編集モード中はプロパティを編集したり、スタイルファイルの内容を変更することができますが、閲覧モード中はこの編集機能を使うことはできません。<br />
閲覧モード中はページ上のリンククリックによって移動することが出来ます。<br />
編集モード中はリンククリックによるナビゲートは無効になっています。<br /><br /><h6>●プロパティリスト</h6>
<br />
編集画面の右側の領域はプロパティリストです。選択中の要素のCSSプロパティが表示されます。<br />
入力候補のドロップダウンリストから選択して、編集することが出来ます。<br /><br /><h6>●選択中の要素</h6>
<br />
「選択中の要素」エディットボックスには現在選択中の要素を表すセレクタ
が表示されます。また自分でセレクタを入力して「Enter」またはエディットの右側のボタンをクリックすることにより、要素を選択することも可能です。<br />
その際サポートされるセレクタは現在のところ下記の通りです。</div>
<br /><div class="tbl_ol">
<table><tr><td>*</td>
<td>universal selector</td>
</tr><tr><td>E</td>
<td>type selectors</td>
</tr><tr><td>E F</td>
<td>descendant selectors</td>
</tr><tr><td>E > F</td>
<td>child selectors</td>
</tr><tr><td>E:first-child</td>
<td>the :first-child pseudo-class</td>
</tr><tr><td>E:nth-child</td>
<td>an E element, the n-th child of its parent</td>
</tr><tr><td>E + F</td>
<td>adjacent selectors</td>
</tr><tr><td>div.warning</td>
<td>class selectors</td>
</tr><tr><td>E#myid</td>
<td>id selectors</td>
</tr></table></div>
<br />
* :nth-child 擬似クラスは nth-child(整数) という形式のみサポートします。<br /><br /><div class="disc">
また下記の擬似クラスについては、StyleEditorはスタイル設定時の整合性のチェックは行いませんが、そのままページCSSに追加しますので、正しく設定されていれば、結果的に効果を得られることになります。<br />
(元のページCSSの記述によっては効果が得られないこともあります。)<br /><br />
E:link<br />
E:visited<br />
E:active<br />
E:hover<br />
E:focus<br /><br /><h6>●詳細選択</h6>
<br />
ページ上または「文書の構造」のノードをクリックして要素を選択するとき、似たような意味の要素も一緒に選択されますが、クリックした要素だけを選択したい場合、Shiftキーを押しながらクリックします。<br />
そうすると、クリックした要素1つだけが選択されます。<br /><br /><h6>●スタイル設定ファイルの管理ウィンドウ</h6>
<br />
スタイル設定ファイルの管理ウィンドウはメインメニューの<br />
[ツール(t)]→[スタイル設定ファイルの管理(c)...]から表示することが出来ます。<br />
また、編集画面の「現在の文書の構造」ペイン上のボタンからも表示することが出来ます。<br /><br />
スタイル設定ファイルの管理ウィンドウには作成された、またはインストールされたスタイルファイルの一覧が表示されます。<br />
下記の6つボタンがあります。<br /><br />
編集 選択されているスタイルファイルを編集します。<br />
削除 選択されているスタイルファイルを削除します。<br />
無効/有効 選択されているスタイルファイルを無効化/有効化します。<br />
(無効化されていると、ページ表示時に反映されません)<br />
インポート ディスク上のスタイルファイルをインストールします。<br />
(ファイルを開くダイアログが表示されます。)<br />
エクスポート 選択中のスタイルファイルをディスクに保存します。<br />
(保存ダイアログが表示されます。)<br />
閉じる スタイル設定ファイルの管理ウィンドウを閉じます。<br /><br /></div>
</div>
<br /><br /><p style="text-align:right;margin-right:30px;">written by kenjiro</p>
<br /></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>StyleEditor ドキュメント</h1>
<h4>【StyleEditorとは】</h4>
<br /><p class="disc">Web上に公開されているページの表示を、自分の好みに合うようにカスタマイズするためのプラグインです。<br />
カスタマイズした設定内容は、スタイルファイルとしてエクスポート/インポートすることが出来、インターネット上で公開されたスタイルファイルをインストールすることも出来ます。</p>
<div class="subcontent">
<div class="disc">
<h4>【使い方】</h4>
<br /><h6>●編集画面の表示</h6>
<br />
Sleipnirのメインメニューの[ツール(t)]→[現在の Web ページをカスタマイズ(a)]で表示することが出来ます。<br />
上記メニューが追加されていない場合は、同じくSleipnirのメインメニューの[表示(v)]→[Dock]→[StyleEditor]で表示することが出来ます。<br /><br /><h6>●編集画面の使い方</h6>
<br />
表示しているページの表示設定を変えたい箇所をマウスでクリックします。 するとその場所が選択され、赤く網掛けが掛かります。<br />
(クリックした箇所だけでなく、ページ上の似たような要素も選択されます)<br />
要素を選択したら、編集画面の右側のプロパティリストの内容を変更すると、ページの表示が変更されます。次回同じページを開いた時も設定した内容に基づいて表示されます。<br /><br /><h6>●スタイルファイルの設定内容表示</h6>
<br />
編集画面の左側には、現在のページのスタイルファイルの設定内容が表示されます。<br />
上から、<br /><br />
設定名 編集開始時にページのタイトルを暫定で設定します。<br />
説明 このスタイルファイルの説明を記述します。<br />
対象URI このスタイルファイルの適用対象uriを示します<br />
(uriにワイルドカードを含めることができます。)<br />
編集時URI このスタイルファイルを編集する時に表示されるuriです。<br />
(管理画面から「編集」を選択した場合に表示されます。)<br />
CSS ページに追加するCSSの内容をテキストで設定します。<br />
スタイル設定 プロパティリストから設定したカスタマイズ内容を表示します。<br /><br />
また、表示されているページに複数のスタイルファイルが存在する場合は、上部の一覧から選択することが出来ます。<br />
いずれかの項目を選択し、鉛筆マークのボタンをクリックすると、編集することが出来ます。<br />
スタイル設定はプロパティリストから編集することができます。<br />
また、xボタンをクリックすると、選択されたスタイル設定を削除することが出来ます。<br />
右クリックメニューから選択中のスタイル設定をCSS形式でクリップボードにコピーすることもできます。<br /><br /><h6>●現在の文書の構造</h6>
<br />
編集画面の真ん中の部分には現在表示されているページの構造が表示されます。<br />
ここから要素の選択を行うことも出来ます。<br />
このペインにはボタンが3つあり、左から<br /><br />
編集モードに移行<br />
閲覧モードに移行<br />
スタイル設定ファイルの管理ウィンドウの表示<br /><br />
という機能を担っています。<br /><br /><br />
ツリー構造内での右クリックメニューには下記の項目があります。<br /><br />
全て開く<br />
全て閉じる<br />
選択項目より下を開く<br />
選択項目より下を閉じる<br />
選択項目以外を全て閉じる<br />
ソースの表示<br /><br />
「ソースの表示」は現在選択されている要素以下のHTMLソースを表示します。<br />
それ以外のメニューはツリー構造の開閉に関するものです。<br /><br /><h6>●編集モードと閲覧モードについて</h6>
<br />
編集モード中はプロパティを編集したり、スタイルファイルの内容を変更することができますが、閲覧モード中はこの編集機能を使うことはできません。<br />
閲覧モード中はページ上のリンククリックによって移動することが出来ます。<br />
編集モード中はリンククリックによるナビゲートは無効になっています。<br /><br /><h6>●プロパティリスト</h6>
<br />
編集画面の右側の領域はプロパティリストです。選択中の要素のCSSプロパティが表示されます。<br />
入力候補のドロップダウンリストから選択して、編集することが出来ます。<br /><br /><h6>●選択中の要素</h6>
<br />
「選択中の要素」エディットボックスには現在選択中の要素を表すセレクタ
が表示されます。また自分でセレクタを入力して「Enter」またはエディットの右側のボタンをクリックすることにより、要素を選択することも可能です。<br />
その際サポートされるセレクタは現在のところ下記の通りです。</div>
<br /><div class="tbl_ol">
<table><tr><td>*</td>
<td>universal selector</td>
</tr><tr><td>E</td>
<td>type selectors</td>
</tr><tr><td>E F</td>
<td>descendant selectors</td>
</tr><tr><td>E > F</td>
<td>child selectors</td>
</tr><tr><td>E:first-child</td>
<td>the :first-child pseudo-class</td>
</tr><tr><td>E:nth-child</td>
<td>an E element, the n-th child of its parent</td>
</tr><tr><td>E + F</td>
<td>adjacent selectors</td>
</tr><tr><td>div.warning</td>
<td>class selectors</td>
</tr><tr><td>E#myid</td>
<td>id selectors</td>
</tr></table></div>
<br />
* :nth-child 擬似クラスは nth-child(整数) という形式のみサポートします。<br /><br /><div class="disc">
また下記の擬似クラスについては、StyleEditorはスタイル設定時の整合性のチェックは行いませんが、そのままページCSSに追加しますので、正しく設定されていれば、結果的に効果を得られることになります。<br />
(元のページCSSの記述によっては効果が得られないこともあります。)<br /><br />
E:link<br />
E:visited<br />
E:active<br />
E:hover<br />
E:focus<br /><br /><h6>●詳細選択</h6>
<br />
ページ上または「文書の構造」のノードをクリックして要素を選択するとき、似たような意味の要素も一緒に選択されますが、クリックした要素だけを選択したい場合、Shiftキーを押しながらクリックします。<br />
そうすると、クリックした要素1つだけが選択されます。<br /><br /><h6>●スタイル設定ファイルの管理ウィンドウ</h6>
<br />
スタイル設定ファイルの管理ウィンドウはメインメニューの<br />
[ツール(t)]→[スタイル設定ファイルの管理(c)...]から表示することが出来ます。<br />
また、編集画面の「現在の文書の構造」ペイン上のボタンからも表示することが出来ます。<br /><br />
スタイル設定ファイルの管理ウィンドウには作成された、またはインストールされたスタイルファイルの一覧が表示されます。<br />
下記の6つボタンがあります。<br /><br />
編集 選択されているスタイルファイルを編集します。<br />
削除 選択されているスタイルファイルを削除します。<br />
無効/有効 選択されているスタイルファイルを無効化/有効化します。<br />
(無効化されていると、ページ表示時に反映されません)<br />
インポート ディスク上のスタイルファイルをインストールします。<br />
(ファイルを開くダイアログが表示されます。)<br />
エクスポート 選択中のスタイルファイルをディスクに保存します。<br />
(保存ダイアログが表示されます。)<br />
閉じる スタイル設定ファイルの管理ウィンドウを閉じます。<br /><br /></div>
</div>
<br /><br /><p style="text-align:right;margin-right:30px;">written by kenjiro</p>
<br /></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
表示オプション
横に並べて表示:
変化行の前後のみ表示: