「StyleEditor ドキュメント」の編集履歴(バックアップ)一覧に戻る
StyleEditor ドキュメント - (2009/01/25 (日) 23:08:45) のソース
<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 /> カスタマイズした設定内容は、スタイルファイルとしてインポート/エクスポートする事が出来ます。<br /> インターネット上で公開された、スタイルファイルをインストールする事も出来ます。</p> ※今後、当Wikiでも有志の方々のスタイルファイル配布を予定しています。<br /><br /><div class="disc"> <h4>【使い方】</h4> <br /><h5>●編集画面の表示</h5> <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 + 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 /><div class="disc"> <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> <br /><br /><p style="text-align:right;margin-right:30px;">written by kenjiro</p> <br /><h6>※kenjiro氏のドキュメントを一部改編して掲載しています。</ h6></h6> <div class="dummy2"> <div id="content_footer"> <h6></h6> </div> </div> </div>