Progateが一通り終わった後には模写をする人が多いと思います。
そして模写をする際にそのサイトで使用されている画像を取得して模写していきますが、画像を1つずつ右クリックで保存していくとかなり効率が悪いです（右クリックで保存が出来ない画像もあります）
今回はその画像を一括で取得する方法について書いていきたいと思います。
サイトの模写コーディングで使う画像を一括で取得する方法
今回はChromeの拡張機能「Image Downloader」を使います。
これはChromeの設定→拡張機能から検索しても見つからないので、以下ページにアクセスしてChromeに追加して下さい。
こちらが追加された物です。
今回テストで使うのは私も参加した模写サイトとしても有名なiSaraのLPにします。
画像をダウンロードする
それではダウンロード手順についてですが、次のようになります。
- サイトを開いた状態で右上にある下矢印のアイコンをクリック
- ダウンロードするフォルダ名を書く
- 全てをダウンロードする場合チェック
- DOWNLOADをクリック
- 警告文を再表示しないにチェック
- YESをクリック
ダウンロードをクリックしたら警告文が出ますが、気にせずチェックしてOKです。
警告文を翻訳すると次のようになります。
「Chromeの設定をざっと見て、ダウンロード場所を検索します。 [ダウンロードする前に各ファイルの保存場所を確認する]オプションがオンになっている場合、続行すると多くのポップアップウィンドウが開く可能性があります。これを実行してもよろしいですか？」
するとダウンロードフォルダに先ほどimgと名付けたフォルダあり、そこに画像は保存されています。
背景画像（background-image）は保存されない
先ほどの操作で一括ダウンロード出来たのはimgタグの画像だけで、背景画像はダウンロード出来ません（右クリックで保存も出来ません）
これはデベロッパーツールを使ってダウンロードします。
まずはデベロッパーツールを開きます。
Macの場合は「⌘ + option + i」
Windowsの場合はF12、または「Ctrl + Shift + I」
もしくは右クリックの検証でもOKです。
まずは上のタブでSourcesを選択します。
するとWordPressのファイルを確認できるので、
wp-content → テーマ名（ここではthemes/isara_v2）→ img を選択するとimgタグかbackground-imageに関わらず使用されている画像全部が入っています。
WordPress案件では wp-content の中にファイルを作成する事も多いので、記憶の片隅にでも置いておくといいかも知れません。
そしてimgフォルダの中から欲しい画像を選択して右クリックします。
そしてSaveをクリックすると次のような画面になるので、あとは画像の上で右クリックして「名前をつけて保存」で完了です。
以上です。
模写であれば適当な画像やアイコンでもいいかも知れませんが、せっかくなら同じ画像で模写したいですよね。
あとはここから少しずつデベロッパーツールに慣れていくという目的も少しあります（デベロッパーツールはWeb制作では必須です）