「StyleEditorの使い方」の編集履歴(バックアップ)一覧に戻る
StyleEditorの使い方 - (2009/01/28 (水) 23:41:15) の編集履歴(バックアップ)
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タグが選択された状態になっているはずです。
サイトの構造によっては単純にヘッダを選択できてしまう場合もありますが、【現在の文書の構造】ペインの利用法を知って戴くためにここではあえてややこしい構造にしてあります。
次に、選択中のタグの上に親要素がいくつか存在しているのがわかると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。
すると、ビューの選択部分が変化してヘッダ全体が赤く網掛けされた状態になるはずです。
このとき、【現在の文書の構造】ペインは以下のようにimgタグが選択された状態になっているはずです。
サイトの構造によっては単純にヘッダを選択できてしまう場合もありますが、【現在の文書の構造】ペインの利用法を知って戴くためにここではあえてややこしい構造にしてあります。
次に、選択中のタグの上に親要素がいくつか存在しているのがわかると思いますが、そのうちのidがheaderとなっているdivタグをクリックして選択し直します。
すると、ビューの選択部分が変化してヘッダ全体が赤く網掛けされた状態になるはずです。
【要素のプロパティを変更する】
ヘッダの選択ができたなら、今度はこの部分の背景色を変更するために右側の【プロパティリスト】ペインを利用します。
ヘッダが選択された状態で【プロパティリスト】ペインにひょうじされているセレクタは、ヘッダにのみ適用されることになります。ここでは背景色の変更を行いますのでセレクタの中からbackground-colorに注目します。
現在は#fff、つまり白が指定されています。(#ffffffという表記が通常だが、同じ値が連続しているときは省略可)
このセレクタを選択後に右のドロップダウンボタンを押すか、その値の上でダブルクリックすると選択可能なWebセーフカラーリストが現れますので変えたい色をクリックするとセレクタに値がセットされます。また、セーフカラー以外にもカラー選択ダイアログや16進での直接指定も可能になっています。
【プロパティリスト】ペイン上で値がセットされた時点でビューに反映されているのが確認できます。
この状態では選択されたままなので網掛けが邪魔してよく解りません。そこで編集モードから閲覧モードへと切り替えるときちんとスタイルが反映されているのが確認できるようになります。
ヘッダが選択された状態で【プロパティリスト】ペインにひょうじされているセレクタは、ヘッダにのみ適用されることになります。ここでは背景色の変更を行いますのでセレクタの中からbackground-colorに注目します。
現在は#fff、つまり白が指定されています。(#ffffffという表記が通常だが、同じ値が連続しているときは省略可)
このセレクタを選択後に右のドロップダウンボタンを押すか、その値の上でダブルクリックすると選択可能なWebセーフカラーリストが現れますので変えたい色をクリックするとセレクタに値がセットされます。また、セーフカラー以外にもカラー選択ダイアログや16進での直接指定も可能になっています。
【プロパティリスト】ペイン上で値がセットされた時点でビューに反映されているのが確認できます。
この状態では選択されたままなので網掛けが邪魔してよく解りません。そこで編集モードから閲覧モードへと切り替えるときちんとスタイルが反映されているのが確認できるようになります。