右クリック(名前をつけて画像を保存)ができないサイトにある画像を保存する方法

サイト上にアップされている画像を保存したい場合、通常は「右クリック」→「名前をつけて画像を保存」とすることが多いと思います。ですが、中には右クリックが禁止されていたり、画像の保存を出来なくしているようなサイトもありますが、そうしたサイトに掲載されている画像を保存する方法です。

操作はパソコンのGoogle Chromeを使用しますので、パソコンにGoogle Chromeが入っていない場合は、Google Chromeを検索してダウンロード→インストールしておいてください。
↓操作の手順が確認できる目次↓

右クリック(名前をつけて画像を保存)ができないサイトにある画像を保存する方法

それでは、右クリック(名前をつけて画像を保存)ができないサイトにある画像を保存する方法です。

Google Chromeで該当のサイトを表示する

Google Chromeで該当のサイトを表示し、Google Chromeの右上に表示されている縦に3つ並んだ点々をクリックします。

デベロッパーツールを選択する

メニューが表示されますので、「その他のツール」→「デベロッパーツール」を選択します。
ここまでの操作はキーボードで「F12キー」を一回押しても同じことができます(キーボードの設定によりできない場合もあります)

該当の画像ファイルのソースを確認する

デベロッパーツールを起動すると、下記のような画面が表示されます。四角で囲った「Elements」が選択されていることを確認して、丸で囲ってある矢印のボタンをクリックします。

 

その状態でサイトの画像にマウスカーソルをのせると、画像にフィルターがかかりますので、そのまま画像をクリックすると、その画像ファイルが配置されているソース(HTML要素)がデベロッパーツール側で自動的に選択されます。

画像ファイルのURLを新しいタブで開く

選択されたソースの画像ファイル名(今回の例では「macaron.jpg」です)を右クリックするとメニューが表示されるので、「Open in new tab」を選択します。

名前をつけて画像を保存する

すると新しいタブで画像だけが表示され、表示された画像は右クリックができますので、名前をつけて画像を保存することができます。

 

操作は以上になります。

まとめ

こうしてデベロッパーツールを活用することで、画像のソースを確認することができて、画像を保存しておくことができるようになります。この内容はJavaScriptを勉強していた時に気づいたことなのですが、こうした操作やWEB上の仕組みを知っていると、便利なこともたくさんありますので、有効活用できるようになりたいですね。

ただ、逆に考えると、本当にダウンロードさせたくない情報(画像)はWEB上にアップしないことがベストということが言えるのかもしれません。

保存した画像の管理は自己責任にてお願いいたします。
この記事で表示しているサイトは自分で作成したテストページです。画像はPixabayのフリー素材を使っています。
ad