「設定内容ペイン」(2009/02/11 (水) 15:48:58) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<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 />
では、上部から順に見ていきましょう。</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">
ここは、現在開いているページに適用可能なスタイルファイルが複数存在する場合にのみ、ドロップダウンリストから編集対象のスタイルファイルを選択できるようになります。</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 />
変更するには項目をダブルクリックするか、右上の鉛筆アイコンをクリックして設定名の、変更ダイアログを呼び出します。</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 />
ここも上記同様項目をダブルクリックするか、右上の鉛筆アイコンをクリックして説明の編集ダイアログを呼び出します。</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>
<br />
さらに、セキュアなhttpsのWebページに対してであれば<br /><pre>
https://*
</pre>
<br />
あるいは、一般のページとセキュアなページを区別しない場合には<br /><pre>
http*://*
</pre>
<br />
の様に記述することも可能です。<br /><br /><div style="border:1px solid #ccc;padding:3px;"><span style="color:#FF0000;font-weight:bold;">※</span> ただし、ドメインに対してや、全てのWebページに対しての適用は注意深く行う必要があります。<br /><br />
気をつけないと、どのページへ行っても体裁が崩れたりする可能性がありますので、要素やid、classなどのセレクタへ指定するプロパティの意味を十分理解した上で、慎重に行ってください。</div>
<br /><br />
ここも変更するには、項目をダブルクリックするか、右上の鉛筆アイコンをクリックして対象URI編集ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent">
<h6>編集時 URI</h6>
<div class="disc">この部分はスタイル編集時に利用したページのURIが記録されています。<br />
ここは特に編集する必要はありませんが、必要ならば項目をダブルクリックするか右上の鉛筆アイコンをクリックして、設定時URIの変更ダイアログを呼び出します。</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の編集ダイアログを呼び出します。</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ボタンが、アクティブになりますので押して削除できます。</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">各項目を選択後に右クリックする事で、そのとき利用可能な操作にアクセスできます。</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>
<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="設定内容ペイン" /><br /><ul><li><a href="#p1">はじめに</a></li>
<li><a href="#p2">設定ファイルの選択</a></li>
<li><a href="#p3">設定名</a></li>
<li><a href="#p4">説明</a></li>
<li><a href="#p5">対象 URI</a></li>
<li><a href="#p6">編集時 URI</a></li>
<li><a href="#p7">CSS</a></li>
<li><a href="#p8">スタイル設定</a></li>
<li><a href="#p9">右クリックメニュー</a></li>
</ul><br /><hr /><h5>ここでは編集モードであることを前提に解説しています</h5>
<div class="disc" id="p1"><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_0.png" alt="設定内容ペイン0" /><br />
まずは設定内容ペインの上部に、注目してください。<br />
あるページのスタイルを編集しようとしてStyleEditorを立ち上げると上記画像の様に暫定的な情報が指定されたスタイルファイルの雛形が作成されています。<br />
この状態でStyleEditorを閉じてもスタイルファイルは生成されません。ここを編集するか、右側にあるプロパティリストペインを操作した時点で、スタイルファイルが生成され、ユーザーの設定フォルダへ自動保存されます。<br /><br />
では、上部から順に見ていきましょう。</div>
<br /><br /><div class="subcontent" id="p2">
<h6>設定ファイルの選択</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_1.png" alt="設定内容ペイン1" /><br /><div class="disc">
ここは、現在開いているページに適用可能なスタイルファイルが複数存在する場合にのみ、ドロップダウンリストから編集対象のスタイルファイルを選択できるようになります。</div>
</div>
<br /><br /><div class="subcontent" id="p3">
<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 />
変更するには項目をダブルクリックするか、右上の鉛筆アイコンをクリックして設定名の、変更ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent" id="p4">
<h6>説明</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_3.png" alt="設定内容ペイン3" /><br /><div class="disc">この部分はスタイルファイルの説明になります。<br />
配布を前提とした場合、ここに説明を付記しておくと親切ですね。<br />
ここも上記同様項目をダブルクリックするか、右上の鉛筆アイコンをクリックして説明の編集ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent" id="p5">
<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>
<br />
さらに、セキュアなhttpsのWebページに対してであれば<br /><pre>
https://*
</pre>
<br />
あるいは、一般のページとセキュアなページを区別しない場合には<br /><pre>
http*://*
</pre>
<br />
の様に記述することも可能です。<br /><br /><div style="border:1px solid #ccc;padding:3px;"><span style="color:#FF0000;font-weight:bold;">※</span> ただし、ドメインに対してや、全てのWebページに対しての適用は注意深く行う必要があります。<br /><br />
気をつけないと、どのページへ行っても体裁が崩れたりする可能性がありますので、要素やid、classなどのセレクタへ指定するプロパティの意味を十分理解した上で、慎重に行ってください。</div>
<br /><br />
ここも変更するには、項目をダブルクリックするか、右上の鉛筆アイコンをクリックして対象URI編集ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent" id="p6">
<h6>編集時 URI</h6>
<div class="disc">この部分はスタイル編集時に利用したページのURIが記録されています。<br />
ここは特に編集する必要はありませんが、必要ならば項目をダブルクリックするか右上の鉛筆アイコンをクリックして、設定時URIの変更ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent" id="p7">
<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の編集ダイアログを呼び出します。</div>
</div>
<br /><br /><div class="subcontent" id="p8">
<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ボタンが、アクティブになりますので押して削除できます。</div>
</div>
<br /><br /><div class="subcontent" id="p9">
<h6>右クリックメニュー</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigPane_7.png" alt="設定内容ペイン7" /><br /><br /><div class="disc">各項目を選択後に右クリックする事で、そのとき利用可能な操作にアクセスできます。</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>
表示オプション
横に並べて表示:
変化行の前後のみ表示: