要素変更を実装する

オリジナルを除く「パターン」と、「対象ページ」の組み合わせごとに設定します。

「変更内容」セクションにて、編集アイコンをクリックすると、エディターツールが起動します。

エディターツールを利用するには、Chrome拡張機能のインストールが必要です。

拡張機能をインストールする

エディターツールで表示されるのは、対象ぺージに設定した エディターページ です。

ページ内のHTML要素をクリックすると、その要素が一意に定まるように CSSセレクタ が生成されます。

CSSセレクタ は手動で入力することも可能です。 HTML/CSSの知識をお持ちの方は、カスタマイズしてご利用ください。

CSSセレクタ のカスタマイズは、複数のHTML要素を一括で変更したい場合に特に便利です。その際、入力欄の下部に表示される 該当要素数 が意図した数になっていることを確認してください。

エディターツールで加えられる変更のタイプは、次の通りです。

HTML要素を非表示にします。

対象のCSSセレクタに対して、下記のCSSを適用させています。（DOMから削除しているわけではありません。）

{ display: none !important; }

移動先要素のCSSセレクタ を指定して、HTML要素を移動させます。

移動先の位置 は、次の中から選択してください。

CSSを追加して、スタイルを上書きします。

適切な CSSプロパティ と 値 を入力してください。

下の追加アイコンをクリックすることで、1つのCSSセレクタに対して、複数の変更を適用できます。

変更が適用されない場合は、important にチェックを入れることで解決する場合があります。

HTML要素内のテキストを変更します。

変更のタイプ は、次の中から選択してください。

対象のHTML要素内に複数のテキスト要素が存在する場合は、対象のテキスト要素 を指定する必要があります。

複数のテキスト要素に一括で変更を加えたい場合は、「HTMLを変更」の方が実装しやすい場合があります。

要素の src を上書きして、画像を変更します。

src には、変更したい画像のURL（または相対パス）を入力してください。

<a> 要素の href を上書きして、リンク先を変更します。

href には、変更したいリンク先のURL（または相対パス）を入力してください。

対象のHTML要素のHTMLをそのまま変更します。

変更のタイプ は、次の中から選択してください。

CSSセレクタ を body に、変更のタイプ を 要素内の末尾に挿入 にして、 <style> タグを追加することで、ページ全体に対してCSSを適用させることができます。

対象のHTML要素に対してJavaScript関数を実行します。

関数の引数には、HTML要素への参照が渡されます。変数名は element です。

該当要素が複数存在する場合は、各要素に対して1回ずつ実行されます。

「要素を削除」や「スタイルを変更」がうまく機能しない場合は、代わりに「JavaScriptを実行」を利用することで解決する場合があります。

これは、「CSSセレクタによるスタイル指定」よりも「JavaScriptによるHTML要素への参照を利用したスタイル指定」の方が優先されるためです。