デベロッパーツールで画像の差し替えする方法!

デベロッパーツールで画像の差し替えを行う方法を紹介します。実際の
サイト上でローカル画像をあててデザインの確認をしたい場合などにご利用下さい。

コンテンツ [表示]

  1. 1デベロッパーツール上で画像を差し替えたい
  2. 2デベロッパーツール上で画像の差し替えする方法
  3. 2.1準備
  4. 2.2画像を差し替える
  5. 2.3解除したい場合
  6. 3まとめ

デベロッパーツール上で画像を差し替えたい

Chromeのデベロッパーツールでは簡単にHTMLやCSSのスタイルを変更しブラウザ上でシミュレーションすることができ便利ですが、画像の差し替えはどうやっていいのか分からないという方もいるかと思います。

例えばimgタグでの画像や背景画像として利用されているところなど画像の使い方でもいくつかパターンがあります。そこで今回はデベロッパーツール上で画像を差し替える方法について解説していきます。

Photo bySimon

デベロッパーツール上で画像の差し替えする方法

それではやり方を解説していきます。imgタグでも背景画像でもやり方はほとんど同じです。順番に設定していきましょう。

準備

まずは適当なフォルダを任意の場所に1つ作成します。このフォルダに差し替え対象の画像などが保存されていきます。

次に、Chromeでシミュレーションさせたいページを開いた状態でデベロッパーツールを開き、Sourcesタブを開きます。

デベロッパーツールのSourcesタブのサイドバーのアイコンアイコン
Sourcesタブの左側にあるサイドバーのアイコンをクリックしましょう。
Overridesのタブをクリック
サイドバーが開いたら、その中のOverridesをクリックしましょう。すると+ Selected folder for overridesが表示されますので、こちらをクリックします。

フォルダの選択になりますので、先程作成したフォルダを選択しましょう。
フォルダへの書き込み権限を与える
初回はフォルダへの書き込み権限を与えるかどうかの確認が出てきますので、「許可」をクリックします。
Overridesにフォルダが追加される
するとOverridesにフォルダが追加されます。

これで準備完了です。一度ページのリロードしておきましょう。」

画像を差し替える

それでは画像をローカルの画像に差し替えていきましょう。

デベロッパーツールのElementsを開き差し替えしたい画像にフォーカスをあてましょう。

Reveal in Sources panel
次に画像のURL部分を右クリックしReveal in Sources panelを選択します。
Sourcesパネルで画像を差し替える
するとSourcesパネルのOverridesに該当の画像が表示されている状態になります。

その画像を選択し、右側でプレビューが出ている状態で差し替えしたいファイルをドラッグ&ドロップします。するとプレビュー上で画像が差し替わります。

このあと一度ページのリロードを行いましょう。
画像がローカルの画像に差し替わる
リロードが完了すると、WEBページ上の画像がローカルの画像に差し替わっているのが確認出来ます。

ちなみに再度リロードをかけても画像はローカルのものが表示されます。

解除したい場合

ローカル画像が表示されるのを解除したい場合は、再度Sourcesタブを開きましょう。

ローカル画像を削除
Overridesを開き、差し替えたローカル画像を右クリックします。

メニューの中からDeleteを選択し、該当のローカル画像を削除しましょう。これでローカル画像が表示されるのは解除できます。

まとめ

いかがでしたでしょうか。

デベロッパーツールで画像の差し替えを行う方法を紹介しました。実際のWEBサイトに画像をあててデザインを確かめたい場合などで利用できる方法です。

ぜひお試し下さい!

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次