最終更新日: 2020年10月30日
デベロッパーツールで画像の差し替えする方法！
デベロッパーツールで画像の差し替えを行う方法を紹介します。実際の
サイト上でローカル画像をあててデザインの確認をしたい場合などにご利用下さい。
デベロッパーツール上で画像を差し替えたい
Chromeのデベロッパーツールでは簡単にHTMLやCSSのスタイルを変更しブラウザ上でシミュレーションすることができ便利ですが、画像の差し替えはどうやっていいのか分からないという方もいるかと思います。
例えばimgタグでの画像や背景画像として利用されているところなど画像の使い方でもいくつかパターンがあります。そこで今回はデベロッパーツール上で画像を差し替える方法について解説していきます。
デベロッパーツール上で画像の差し替えする方法
それではやり方を解説していきます。imgタグでも背景画像でもやり方はほとんど同じです。順番に設定していきましょう。
準備
まずは適当なフォルダを任意の場所に１つ作成します。このフォルダに差し替え対象の画像などが保存されていきます。
次に、Chromeでシミュレーションさせたいページを開いた状態でデベロッパーツールを開き、Sourcesタブを開きます。
Overridesをクリックしましょう。すると+ Selected folder for overridesが表示されますので、こちらをクリックします。フォルダの選択になりますので、先程作成したフォルダを選択しましょう。
Overridesにフォルダが追加されます。これで準備完了です。一度ページのリロードしておきましょう。」
画像を差し替える
それでは画像をローカルの画像に差し替えていきましょう。
デベロッパーツールのElementsを開き差し替えしたい画像にフォーカスをあてましょう。
Reveal in Sources panelを選択します。
その画像を選択し、右側でプレビューが出ている状態で差し替えしたいファイルをドラッグ&ドロップします。するとプレビュー上で画像が差し替わります。
このあと一度ページのリロードを行いましょう。
ちなみに再度リロードをかけても画像はローカルのものが表示されます。
解除したい場合
ローカル画像が表示されるのを解除したい場合は、再度Sourcesタブを開きましょう。
Overridesを開き、差し替えたローカル画像を右クリックします。メニューの中から
Deleteを選択し、該当のローカル画像を削除しましょう。これでローカル画像が表示されるのは解除できます。まとめ
いかがでしたでしょうか。
デベロッパーツールで画像の差し替えを行う方法を紹介しました。実際のWEBサイトに画像をあててデザインを確かめたい場合などで利用できる方法です。
ぜひお試し下さい！
Sourcesタブの左側にあるサイドバーのアイコンをクリックしましょう。