StyleEditorの使い方
StyleEditorの呼び出し
通常はツールバーから[メニューバー>表示>Dock>StyleEditor]で呼び出します。
StyleEditorEditアクションをマウスジェスチャやメニューエディタ、あるいはExtended Menuやサジタリウスなどのアクションを、登録可能なオプションやプラグインを利用しての呼び出しも可能です。
StyleEditorEditアクションをマウスジェスチャやメニューエディタ、あるいはExtended Menuやサジタリウスなどのアクションを、登録可能なオプションやプラグインを利用しての呼び出しも可能です。
この画像ではWindows Vista
SP2β上のSleipnir2.8.4+test6の環境にStyleEditor0.0.6をインストールした状態で、ここのトップページを編集モードで開いています。
StyleEditorの画面について
StyleEditorの画面は3ペイン構成になっています。
左から
左から
- 【設定内容】ペイン
- 【現在の文書の構造】ペイン
- 【プロパティリスト】ペイン
編集モード/閲覧モード
編集モードと閲覧モードは【現在の文書の構造】ペインの右上にある、アイコンで切り替えます。
3個並んでいるアイコンの左端をクリックすると、編集モードになります。
この状態の時にStyleEditorでページのスタイル変更や対象URIの指定等の操作が可能になります。
真ん中のアイコンをクリックするとビューが閲覧モードになります。
この状態で設定したスタイルの適用状態を確認する事ができます。
スタイル設定ファイルの管理
右端のアイコンをクリックすると、【スタイル設定ファイルの管理】ウインドウが開きます。
このウインドウから既に設定済みの、スタイルファイルに関する操作を行います。
StyleEditorを使ってみましょう
どのように使うのかの一例を、現在閲覧中のこのページを対象に、手順を追って説明します。
ここではヘッダの背景色を変更する手順を例にします。
まず、StyleEditorを呼び出します。
ここではヘッダの背景色を変更する手順を例にします。
まず、StyleEditorを呼び出します。
【StyleEditor呼び出し】
この画像ではまだビューに触れていないので、変化はわかりませんが、編集モードになっていると、マウスがビューの上を通過する時に、色々な要素が赤いボーダーにて、ハイライトされるのが確認できると思います。
【対象の要素を選択】
ここでの目的はヘッダの背景色変更ですので、ヘッダを選択するために、とりあえずタイトル部分をクリックして、タイトル画像を選択します。
選択された部分はその要素が赤く網掛けされた状態になります。
この時、【現在の文書の構造】ペインは以下のようにimgタグが選択された状態になっているはずです。
選択された部分はその要素が赤く網掛けされた状態になります。
この時、【現在の文書の構造】ペインは以下のようにimgタグが選択された状態になっているはずです。
サイトの構造によっては、単純にヘッダを選択出来てしまう場合もありますが、【現在の文書の構造】ペインの利用法を知って戴くために、ここでは敢えてややこしい構造にしてあります。
次に、選択中のタグの上に親要素が、いくつか存在しているのが解ると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。
次に、選択中のタグの上に親要素が、いくつか存在しているのが解ると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。
すると、ビューの選択部分が変化してヘッダ全体が赤く網掛けされた状態になります。
このように、一度では目的の要素が選択出来ない場合などに【現在の文書の構造】ペインを利用することで、確実に目的の要素を選択できるようになります。
【要素のプロパティを変更する】
ヘッダの選択が出来たなら、今度はこの部分の背景色を変更するために右側の【プロパティリスト】ペインを利用します。
ヘッダが選択された状態で【プロパティリスト】ペインに表示されているセレクタは、ヘッダにのみ適用されることになります。ここでは背景色の変更を行いますので、セレクタの中からbackground-colorに注目します。
現在は#fff、つまり白が指定されています。
(#ffffffという表記が通常ですが、同じ値が連続しているときは省略可能です。)
ヘッダが選択された状態で【プロパティリスト】ペインに表示されているセレクタは、ヘッダにのみ適用されることになります。ここでは背景色の変更を行いますので、セレクタの中からbackground-colorに注目します。
現在は#fff、つまり白が指定されています。
(#ffffffという表記が通常ですが、同じ値が連続しているときは省略可能です。)
このセレクタを選択後に、右のドロップダウンボタンを押すか、その値の上でダブルクリックすると選択可能なWebセーフカラーリストが現れますので変えたい色をクリックすると、セレクタに値がセットされます。また、Webセーフカラー以外にもカラー選択ダイアログや16進での直接指定も可能になっています。
【プロパティリスト】ペイン上で値がセットされた時点でビューに反映されているのが確認できます。
この状態では選択されたままなので、網掛けが邪魔してよく解りません。そこで編集モードから閲覧モードへと切り替えるときちんとスタイルが反映されているのが、確認できるようになります。
