「設定内容ペイン」の編集履歴(バックアップ)一覧に戻る
設定内容ペイン - (2009/01/27 (火) 18:25:44) のソース
<div class="dummy"></div> <div id="content_header"></div> <div id="content_main"> <h1>設定内容ペイン</h1> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane.png" alt="設定内容ペイン" /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5> <div class="disc"><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_0.png" alt="設定内容ペイン0" /><br /> まずは設定内容ペインの上部に注目してください。<br /> あるページのスタイルを編集しようとしてStyleEditorを立ち上げると上記画像の様に暫定的な情報が指定されたスタイルファイルの雛形が作成されています。<br /> この状態でStyleEditorを閉じてもスタイルファイルは生成されません。ここを編集するか、右側にあるプロパティリストペインを操作した時点でスタイルファイルが生成され、ユーザーの設定フォルダへ自動保存されます。<br /><br /> では、上部から順に見ていきましょう。<br /><br /></div> <br /><br /><div class="subcontent"> <h6>設定ファイルの選択</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_1.png" alt="設定内容ペイン1" /><br /><div class="disc"> ここは、現在開いているページに適用可能なスタイルファイルが複数存在する場合にのみドロップダウンリストから編集対象のスタイルファイルを選択できるようになります。 <br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>設定名</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_2.png" alt="設定内容ペイン2" /><br /><div class="disc">この部分はスタイル管理画面に現れるスタイルファイルの設定名になります。<br /> 初期状態では暫定的なものが自動で設定されていますので、管理しやすいように自分で変更出来ます。<br /><br /> 変更するには項目をダブルクリックするか右上の鉛筆アイコンをクリックして設定名の変更ダイアログを呼び出します。 <br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>説明</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_3.png" alt="設定内容ペイン3" /><br /><div class="disc">この部分はスタイルファイルの説明になります。<br /> 配布を前提とした場合、ここに説明を付記しておくと親切かも。<br /> ここも上記同様項目をダブルクリックするか右上の鉛筆アイコンをクリックして説明の編集ダイアログを呼び出します。 <br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>対象 URI</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_4.png" alt="設定内容ペイン4" /><br /><div class="disc">この部分はスタイルファイルが適用されるURI(URL)を指定します。<br /> 初期状態では現在開いているページのURIが設定されていますが、単一のページではなくホストごと、あるいはドメイン単位でスタイルファイルを適用させたい場合などにはワイルドカードを利用することが出来ます。<br /><br /> たとえば上記画像の例だとwww15.atwiki.jpというホストのstyleshareディレクトリ以降にあるファイルに対してスタイルファイルが有効になります。<br /><br /> 他にもドメインに対してなら<br /><pre> http://*.atwiki.jp/* </pre> <br /> また、すべてのWebページに対してであれば<br /><pre> http://* </pre> httpsのWebページに対しては別途<br /><pre> https://* </pre> <br /> のように記述します。<br /><br /><div style="border:1px solid #ccc;padding:3px;"><span style="color:#FF0000;font-weight:bold;">※</span> ただし、ドメインに対してやすべてのWebページに対しての適用は注意深く行う必要があります。<br /> 気をつけないとどのページへ行っても体裁が崩れたりしかねませんので、このへんはタグの構造やid、classなどへ指定するプロパティを十分理解した上で利用してください。</div> <br /><br /> ここも変更するには項目をダブルクリックするか右上の鉛筆アイコンをクリックして対象URI編集ダイアログを呼び出します。 <br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>編集時 URI</h6> <div class="disc">この部分はスタイル編集時に利用したページのURIが記録されています。<br /> ここは特に編集する必要はありませんが、必要ならば項目をダブルクリックするか右上の鉛筆アイコンをクリックして設定時URIの変更ダイアログを呼び出します。<br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>CSS</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_5.png" alt="設定内容ペイン5" /><br /><div class="disc">この部分ではページのCSSを直接記述して変更することができます。<br /> いままでUserStyleSeetなどを利用されていて、CSSファイルの資産がある場合などにはこれを利用することで過去の資産が無駄にはなりません。<br /><br /> 利用するには項目をダブルクリックするか右上の鉛筆アイコンをクリックしてCSSの編集ダイアログを呼び出します。 <br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>スタイル設定</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_6.png" alt="設定内容ペイン6" /><br /><div class="disc">この部分にはスタイルの設定状況が表示されています。<br /><br /> 必要のなくなったものはその部分をクリックして選択すると右上のxボタンがアクティブになりますので押して削除出来ます。<br /><br /></div> </div> <br /><br /><div class="subcontent"> <h6>右クリックメニュー</h6> <img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_7.png" alt="設定内容ペイン7" /><br /><br /><div class="disc">各項目を選択後に右クリックすることでそのとき利用可能な操作にアクセスできます。<br /><br /></div> </div> <br /></div> <br /><div class="cntr"><a href="http://www15.atwiki.jp/styleshare/pages/69.html">StyleEditorの使い方:Preview</a> ←| <a href="http://www15.atwiki.jp/styleshare/">Home</a> |→ <a href="http://www15.atwiki.jp/styleshare/pages/75.html">NEXT:現在の文書の構造ペイン</a></div> <div class="dummy2"></div> <div id="content_footer"></div>