ラボ Laboratory

StyleEditor

開発者:kenjiro

  • Currently 4.6/5
  • 1
  • 2
  • 3
  • 4
  • 5
4.6 ( 54 名が投票)
ダウンロード

StyleEditor はウェブページを表示する時に、フォントや背景の色など様々な表示設定を自分好みにカスタマイズするプラグインです。

※StyleEditor を使用するには Internet Explorer 7 以上がインストールされていることが必要です。

※MBCS 版、Portable Sleipnir では使用出来ません。

使用方法

スクリーンショット

まず、メニューバーの「表示(V)」より「Dock|StyleEditor」を選び、StyleEditor の編集画面を表示します。

スクリーンショット

次に、ウェブページ上の表示設定を変更したい箇所までマウスカーソルを移動します。

スクリーンショット

赤枠で囲まれた範囲をクリックすると、クリック位置の HTML 要素とそれに類似する要素が選択され、赤の網掛けをで強調表示されます。

スクリーンショット

編集画面の右側のプロパティリストで設定を行うとページの表示設定を変更することが出来ます。ここではフォントスタイルの設定を斜体に変更してみます。プロパティリスト内の 「 font-style 」 という項目を選択して、ドロップダウンボタンをクリックして 「 italic 」項目を選びます。

スクリーンショット

すると、ページの表示にすぐに反映され、先ほど選択した部分の字体が斜体となりました。

StyleEditor ではプロパティリストに表示されているように、いろいろな表示設定をサポートしています。これらの表示設定は CSS 形式となっておりますので、Web上で公開されているCSS の説明ページなどをご覧になって、いろいろなページのカスタマイズを試してみてください。

現在の文書の構造

スクリーンショット

編集画面中央部分は現在表示している HTML 文書の構造を示します。この文書の構造内のいずれかの要素をクリックすることでも、要素を選択をすることが出来ます。上部に3つのボタンが設置されていて、それぞれ下記の機能を持っています。

①編集モードボタン
編集モードへ移行します。編集モードではページ上の要素をクリックして選択し、表示設定を変更することができます。

②閲覧モードボタン
閲覧モードへ移行します。閲覧モードでは、表示設定の編集は出来ませんが、文書の構造や HTML 要素のプロパティをチェックすることが出来ます。また、リンクをクリックすることによってページ間を移動することも出来ます。

③設定ボタン
スタイル設定ファイルの管理画面を表示します。

スタイル設定ファイル

スクリーンショット

編集モードで編集したスタイル設定はサイトごとにスタイル設定ファイルとして保存されます。編集画面の左側は現在表示しているページのスタイル設定ファイルの内容を示します。

スクリーンショット

①設定名
スタイル設定ファイルの表示名を設定することが出来ます。(ページのタイトルが初期値として設定されています。)

②説明
スタイル設定ファイルの説明を記述することが出来ます。

③対象 URI
設定したスタイル設定が適用されるページの URI を指定します。(ワイルドカード文字(*)を使用することが出来ます。)

④編集時 URI
設定ファイルを編集する時にどのページを表示するかを指定します。スタイル設定ファイルの管理画面で「編集」を押したときに表示されるページです。

⑤CSS
ページに適用する CSS を テキスト形式で設定することが出来ます。

⑥スタイル設定
設定したスタイル設定を表示します。

⑦編集ボタン
「設定名」「説明」「編集時 URI 」「CSS」などの各項目で選択中のものを編集します。

⑧削除ボタン
選択中のスタイル設定を削除します。

スタイル設定ファイルの管理画面

編集モードでスタイル設定を行って作成したスタイル設定ファイルは、ディスク上のファイルにエクスポートすることが出来ます。また、ディスク上のファイルを指定してスタイル設定ファイルを読み込むことが出来ますので、他の Sleipnir ユーザーとスタイル設定ファイルを交換して楽しむことが出来ます。

また、ウェブ上に公開されたスタイル設定ファイルへのリンク(拡張子 .user.style)をクリックしてインストールすることも出来ます。

スクリーンショット

現在の文書の構造ペインにある「設定ボタン」をクリックすると、スタイル設定ファイルの管理画面が表示されます。

インストールされているスタイル設定ファイル(L)
いずれかのページでスタイル設定を行い、スタイル設定ファイルが作成されると、ここに一覧表示されるようになります。

編集(E)
選択されているスタイル設定ファイルの編集時 URI のページを開いて、編集画面を表示します。

削除(D)
選択されているスタイル設定ファイルを削除します。

無効(M) 選択されているスタイル設定ファイルを無効にします。無効にするとページを開く時にスタイル設定を適用しません。

インポート(I)
ディスク上のスタイル設定ファイルを指定して、インストールします。

エクスポート(E)
選択されているスタイル設定ファイルをファイル名を指定して保存します。

閉じる
スタイル設定ファイルの管理画面を閉じます。

レビューを投稿

レビューの受付は終了しました。
今後の開発に役立てさせていただきます。ありがとうございました。