Webサイトに使われている背景画像を取得する方法2017
Webサイト上で見えているのに、ドラッグできないし保存もできない…。そうした画像の多くは、Webのコーディングでしばしば「背景」として配置されています。では、そんな画像を保存するにはどうしたらいいか、その手順をご紹介しましょう。
Google Chromeで背景画像を保存
「背景画像を取得する」という記事は2015年にも書いたのですが、その時と比べるとGoogle Chromeのインターフェイスが大きく変わってしまいました。過去の記事を見ても方法がわからなかったという人がいると思いますので、ここで2017年版の最新情報をお伝えします。
この記事で使用するのはGoogle Chromeです。Mac版Safariでの方法は前に書いた記事と変わらないのでそちらをご覧ください。
例えばこれが、ドラッグできない画像の例。アップルのWebサイトでは画像が「背景」として配置されているケースが意外と多いです。
取得するには、まず［表示］メニューから［開発/管理］→［デベロッパーツール］を選びます。画像はMac版ですが、Windows版もほぼ同様の操作でデベロッパーツールを出せると思います。
これがデベロッパーツールです。ページのソースコードなどを確認できるツールですが、画像を取り出すだけであれば、ソースコードの理解は必要ありません。
デベロッパーツールのパネルの上の方に、表示を切り替えるためのタブがあります（一見タブに見えませんが）。そこから［Application］を選びましょう。パネルが狭いとすべてのタブが表示されていませんが、その時は右端にある「>>」を押すと表示しきれない項目が表示されるはずです。
これがApplicationタブに切り替えたところです。この画面の左側、下の方に「Images」という項目があると思います。
その「Images」の横にある三角マークを押して展開すると、そのWebページに使われている画像がすべて表示されます。あとはそこから目当ての画像を見つけて、ダブルクリックで開いたり、プレビューエリアから直接ドラッグしたりして画像を保存します。
ステップバイステップでご紹介してきましたが、慣れてしまえば案外簡単です。ぜひお試しください。
