編集を始める

タグを導入するとあなたのサイトやブログにスイッチが現れます。
⇒導入方法はコチラから

スイッチをクリック


スイッチをクリックすると編集パネルが出現します。

編集パネル


プログラムの読み込みが完了するとサイト上の触れた要素が青枠で囲まれるようになります。
編集したい要素をクリックします。

編集したい要素をクリック


編集パネルが展開し、クリックした要素と同じセレクタを持つ要素が赤枠で囲まれます。
それらの要素に対して編集を始められます。

編集を始められます

編集対象を変える

編集対象を変える方法は4通りあります。

①サイト上の要素を新たにクリックする。


②CSSセレクタを自分で入力する。

バーのテキストエリアに表示されているのが現在編集中の要素のCSSセレクタです。
ここに直接CSSセレクタをキーボードで入力しエンターキーで確定すると対象が変わります。
「:hover」「:checked」「:focus」「:active」セレクタの付加は右のボックスから選択することもできます。
(変化時アニメ設定は通常状態を表すセレクタにのみ行ってください)

セレクタを直接入力


③親要素から選ぶ。

バーには対象要素(クリックした要素あるいはセレクタの最初の要素)の全ての親要素のセレクタが表示されています。
クリックするだけで対象が変わります。

親要素から選ぶ


④子要素から選ぶ

バーの「>」ボタンをクリックすると子要素一覧ボックスが現れます。
ボックスから選択したセレクタに対象が変わります。

子要素から選ぶ

ウェブサイトに反映させる

ここで編集した内容はまだウェブ上には反映されていません。
「コード表示」ボタンをクリックして現れるコードを右クリックでコピーし、外部ファイルやブログのCSSエリアに貼り付けてください。
「HTML埋め込み用」をチェックするとstyleタグが付加され、「外部ファイル用」をチェックすると「@charset "UTF-8";」が付加されます。

コードを表示する

編集データを保存・削除する

「保存」ボタンをクリックすると編集データをブラウザに保存できます。
データはドメインごとに管理されます。
ローカルストレージ機能のあるブラウザでのみ保存ができます。

データを保存する


「削除」ボタンを押すと編集データをブラウザから削除します。
編集状態もリセットされます。他ドメインのデータは削除されません。

データを削除する

編集を終了する

「閉じる」または「×」ボタンを押すと編集パネルを閉じてサイトを元の状態に戻します。
編集状態はプログラム内で維持されますので開始スイッチを押すことで編集を再開できます。
サイトを離れたり、再読み込みをすると保存されていないデータは消去されますのでご注意ください。

編集を終了する

タグを貼るだけの簡単導入

下のコードをサイトに設置するだけですぐに編集を始められます。

導入方法について詳しく
現在までに87回導入されました。