「StyleEditorの使い方」の編集履歴(バックアップ)一覧はこちら
「StyleEditorの使い方」(2009/02/08 (日) 23:43:28) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
<div class="dummy"></div>
<div id="content_header"></div>
<div id="content_main">
<h1>StyleEditorの使い方</h1>
<ul><li><a href="#call">StyleEditorの呼び出し</a></li>
<li><a href="#view">StyleEditorの画面について</a></li>
<li><a href="#use">StyleEditorを使ってみましょう</a></li>
</ul><br /><div class="subcontent" id="call">
<h2>StyleEditorの呼び出し</h2>
<div class="disc">通常はツールバーから[メニューバー>表示>Dock>StyleEditor]で呼び出します。<br /><br />
StyleEditorEditアクションをマウスジェスチャやメニューエディタ、あるいはExtended
Menuやサジタリウスなどのアクションを、登録可能なオプションやプラグインを利用しての呼び出しも可能です。</div>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/FullView.png" alt="FullView" /><br /><div class="disc">この画像ではWindows Vista
SP2β上のSleipnir2.8.4+test6の環境にStyleEditor0.0.6をインストールした状態で、ここのトップページを編集モードで開いています。</div>
</div>
<br /><div class="subcontent" id="view">
<h2>StyleEditorの画面について</h2>
<div class="disc">StyleEditorの画面は3ペイン構成になっています。<br /><br />
左から
<ul><li>【設定内容】ペイン</li>
<li>【現在の文書の構造】ペイン</li>
<li>【プロパティリスト】ペイン</li>
</ul>
と、呼称します。</div>
<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/PluginView.png" alt="PluginView" /><div class="disc">
<h5>編集モード/閲覧モード</h5>
編集モードと閲覧モードは【現在の文書の構造】ペインの右上にある、アイコンで切り替えます。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/EditMode.png" alt="編集モード" /><br />
3個並んでいるアイコンの左端をクリックすると、編集モードになります。
<div class="cl"></div>
<br />
この状態の時にStyleEditorでページのスタイル変更や対象URIの指定等の操作が可能になります。<br /><br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/ViewMode.png" alt="閲覧モード" /><br />
真ん中のアイコンをクリックするとビューが閲覧モードになります。
<div class="cl"></div>
<br />
この状態で設定したスタイルの適用状態を確認する事が出来ます。<br /></div>
<div class="disc">
<h5>スタイル設定ファイルの管理</h5>
<img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/ConfigDialog.png" alt="スタイル設定ファイルの管理" /><br />
右端のアイコンをクリックすると、【スタイル設定ファイルの管理】ウインドウが開きます。
<div class="cl"></div>
<br />
このウインドウから既に設定済みの、スタイルファイルに関する操作を行います。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigDialog.png" alt="【スタイル設定ファイルの管理】ウインドウ" /><div class="cl"></div>
<br /><br /><div class="cntr">|→<a href="http://www15.atwiki.jp/styleshare/pages/80.html">スタイル管理のページへ</a></div>
</div>
</div>
<br /><div class="subcontent" id="use">
<h2>StyleEditorを使ってみましょう</h2>
<div class="disc">どのように使うのかの一例を、現在閲覧中のこのページを対象に、手順を追って説明します。<br /><br />
ここではヘッダの背景色を変更する手順を例にします。<br /><br />
まず、StyleEditorを呼び出します。<br /></div>
<h6>【StyleEditor呼び出し】</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_1.png" alt="Execlude_StyleEditor" /><br /><div class="disc">
この画像ではまだビューに触れていないので、変化はわかりませんが、編集モードになっていると、マウスがビューの上を通過する時に、色々な要素が赤いボーダーにて、ハイライトされるのが確認出来ると思います。<br /></div>
<h6>【対象の要素を選択】</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_2.png" alt="Select" /><br /><div class="disc">
ここでの目的はヘッダの背景色変更ですので、ヘッダを選択するために、とりあえずタイトル部分をクリックして、タイトル画像を選択します。<br />
選択された部分はその要素が赤く網掛けされた状態になります。<br />
この時、【現在の文書の構造】ペインは以下のようにimgタグが選択された状態になっているはずです。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_3.png" alt="Selection_now" /><br /><div class="disc">
サイトの構造によっては、単純にヘッダを選択出来てしまう場合もありますが、【現在の文書の構造】ペインの利用法を知って戴くために、ここでは敢えてややこしい構造にしてあります。<br /><br />
次に、選択中のタグの上に親要素が、いくつか存在しているのが解ると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_4.png" alt="Selection_div" /><br /><div class="disc">すると、ビューの選択部分が変化してヘッダ全体が赤く網掛けされた状態になります。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_5.png" alt="Selection_header" /><div class="disc">
このように、一度では目的の要素が選択出来ない場合などに【現在の文書の構造】ペインを利用することで、確実に目的の要素を選択出来るようになります。<br /></div>
<h6>【要素のプロパティを変更する】</h6>
<div class="disc">ヘッダの選択が出来たなら、今度はこの部分の背景色を変更するために右側の【プロパティリスト】ペインを利用します。<br />
ヘッダが選択された状態で【プロパティリスト】ペインに表示されているセレクタは、ヘッダにのみ適用される事になります。ここでは背景色の変更を行いますので、セレクタの中からbackground-colorに注目します。<br />
現在は#fff、つまり白が指定されています。<br />
(#ffffffという表記が通常だが、同じ値が連続しているときは省略可能)<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_6.png" alt="Property_1" /><br /><div class="disc">
このセレクタを選択後に、右のドロップダウンボタンを押すか、その値の上でダブルクリックすると選択可能なWebセーフカラーリストが現れますので変えたい色をクリックすると、セレクタに値がセットされます。また、Webセーフカラー以外にもカラー選択ダイアログや16進での直接指定も可能になっています。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_7.png" alt="Property_2" /><br /><div class="disc">【プロパティリスト】ペイン上で値がセットされた時点でビューに反映されているのが確認出来ます。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_8.png" alt="Property_3" /><br /><div class="disc">
この状態では選択されたままなので、網掛けが邪魔してよく解りません。そこで編集モードから閲覧モードへと切り替えるときちんとスタイルが反映されているのが、確認出来るようになります。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_9.png" alt="Property_4" /><br /><br /></div>
</div>
<br /><div class="cntr">|→<a href="http://www15.atwiki.jp/styleshare/pages/74.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>StyleEditorの使い方</h1>
<ul><li><a href="#call">StyleEditorの呼び出し</a></li>
<li><a href="#view">StyleEditorの画面について</a></li>
<li><a href="#use">StyleEditorを使ってみましょう</a></li>
</ul><br /><div class="subcontent" id="call">
<h2>StyleEditorの呼び出し</h2>
<div class="disc">通常はツールバーから[メニューバー>表示>Dock>StyleEditor]で呼び出します。<br /><br />
StyleEditorEditアクションをマウスジェスチャやメニューエディタ、あるいはExtended
Menuやサジタリウスなどのアクションを、登録可能なオプションやプラグインを利用しての呼び出しも可能です。</div>
<img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/FullView.png" alt="FullView" /><br /><div class="disc">この画像ではWindows Vista
SP2β上のSleipnir2.8.4+test6の環境にStyleEditor0.0.6をインストールした状態で、ここのトップページを編集モードで開いています。</div>
</div>
<br /><div class="subcontent" id="view">
<h2>StyleEditorの画面について</h2>
<div class="disc">StyleEditorの画面は3ペイン構成になっています。<br /><br />
左から
<ul><li>【設定内容】ペイン</li>
<li>【現在の文書の構造】ペイン</li>
<li>【プロパティリスト】ペイン</li>
</ul>
と、呼称します。</div>
<br /><img src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/PluginView.png" alt="PluginView" /><div class="disc">
<h5>編集モード/閲覧モード</h5>
編集モードと閲覧モードは【現在の文書の構造】ペインの右上にある、アイコンで切り替えます。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/EditMode.png" alt="編集モード" /><br />
3個並んでいるアイコンの左端をクリックすると、編集モードになります。
<div class="cl"></div>
<br />
この状態の時にStyleEditorでページのスタイル変更や対象URIの指定等の操作が可能になります。<br /><br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/ViewMode.png" alt="閲覧モード" /><br />
真ん中のアイコンをクリックするとビューが閲覧モードになります。
<div class="cl"></div>
<br />
この状態で設定したスタイルの適用状態を確認する事ができます。<br /></div>
<div class="disc">
<h5>スタイル設定ファイルの管理</h5>
<img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/ConfigDialog.png" alt="スタイル設定ファイルの管理" /><br />
右端のアイコンをクリックすると、【スタイル設定ファイルの管理】ウインドウが開きます。
<div class="cl"></div>
<br />
このウインドウから既に設定済みの、スタイルファイルに関する操作を行います。<br /><img class="left" src="http://www15.atwiki.jp/styleshare/pub/StyleShare_HowTo_img/StyleConfigDialog.png" alt="【スタイル設定ファイルの管理】ウインドウ" /><div class="cl"></div>
<br /><br /><div class="cntr">|→<a href="http://www15.atwiki.jp/styleshare/pages/80.html">スタイル管理のページへ</a></div>
</div>
</div>
<br /><div class="subcontent" id="use">
<h2>StyleEditorを使ってみましょう</h2>
<div class="disc">どのように使うのかの一例を、現在閲覧中のこのページを対象に、手順を追って説明します。<br /><br />
ここではヘッダの背景色を変更する手順を例にします。<br /><br />
まず、StyleEditorを呼び出します。<br /></div>
<h6>【StyleEditor呼び出し】</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_1.png" alt="Execlude_StyleEditor" /><br /><div class="disc">
この画像ではまだビューに触れていないので、変化はわかりませんが、編集モードになっていると、マウスがビューの上を通過する時に、色々な要素が赤いボーダーにて、ハイライトされるのが確認できると思います。<br /></div>
<h6>【対象の要素を選択】</h6>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_2.png" alt="Select" /><br /><div class="disc">
ここでの目的はヘッダの背景色変更ですので、ヘッダを選択するために、とりあえずタイトル部分をクリックして、タイトル画像を選択します。<br />
選択された部分はその要素が赤く網掛けされた状態になります。<br />
この時、【現在の文書の構造】ペインは以下のようにimgタグが選択された状態になっているはずです。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_3.png" alt="Selection_now" /><br /><div class="disc">
サイトの構造によっては、単純にヘッダを選択出来てしまう場合もありますが、【現在の文書の構造】ペインの利用法を知って戴くために、ここでは敢えてややこしい構造にしてあります。<br /><br />
次に、選択中のタグの上に親要素が、いくつか存在しているのが解ると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_4.png" alt="Selection_div" /><br /><div class="disc">すると、ビューの選択部分が変化してヘッダ全体が赤く網掛けされた状態になります。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_5.png" alt="Selection_header" /><div class="disc">
このように、一度では目的の要素が選択出来ない場合などに【現在の文書の構造】ペインを利用することで、確実に目的の要素を選択できるようになります。<br /></div>
<h6>【要素のプロパティを変更する】</h6>
<div class="disc">ヘッダの選択が出来たなら、今度はこの部分の背景色を変更するために右側の【プロパティリスト】ペインを利用します。<br />
ヘッダが選択された状態で【プロパティリスト】ペインに表示されているセレクタは、ヘッダにのみ適用されることになります。ここでは背景色の変更を行いますので、セレクタの中からbackground-colorに注目します。<br />
現在は#fff、つまり白が指定されています。<br />
(#ffffffという表記が通常ですが、同じ値が連続しているときは省略可能です。)<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_6.png" alt="Property_1" /><br /><div class="disc">
このセレクタを選択後に、右のドロップダウンボタンを押すか、その値の上でダブルクリックすると選択可能なWebセーフカラーリストが現れますので変えたい色をクリックすると、セレクタに値がセットされます。また、Webセーフカラー以外にもカラー選択ダイアログや16進での直接指定も可能になっています。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_7.png" alt="Property_2" /><br /><div class="disc">【プロパティリスト】ペイン上で値がセットされた時点でビューに反映されているのが確認できます。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_8.png" alt="Property_3" /><br /><div class="disc">
この状態では選択されたままなので、網掛けが邪魔してよく解りません。そこで編集モードから閲覧モードへと切り替えるときちんとスタイルが反映されているのが、確認できるようになります。<br /></div>
<img src="http://www15.atwiki.jp/styleshare/pub/HowToUse/HowToUse_StyleEditor_9.png" alt="Property_4" /><br /><br /></div>
</div>
<br /><div class="cntr">|→<a href="http://www15.atwiki.jp/styleshare/pages/74.html">NEXT:【設定内容】ペインのページへ</a></div>
<div class="dummy2"></div>
<div id="content_footer"></div>
表示オプション
横に並べて表示:
変化行の前後のみ表示: