【LP模写】模写したいサイト(LP)の背景画像を取得する方法【簡単です】

模写したいサイト(LP)の背景画像を取得する方法


Notice: Undefined offset: 1 in /home/yuuuugablog/yuuuugablog.com/public_html/wp-content/themes/sango-theme-child/functions.php on line 81

こんにちは、ゆうが(@yuuuugablog)です。

今回は、LP模写をする際に必要な、背景画像を取得する方法を解説していきます。

「いやいや前の記事で画像一括ダウンロードする方法解説してたじゃん」と思うかもですが、実はそれが落とし穴で、実際にはbackground-imageで出力されてる画像は保存できません。

画像を一括ダウンロードする方法はこちらの記事【超便利】模写コーディングで使える、Chromeの拡張機能3つ【簡単に実装】で解説しました。

[sc_blogcard url=”https://yuuuugablog.com/programming/coding-convenient”]
つまり、LP模写してる時に、「画像足りないぞ?」となります。

なので今回は、背景画像を取得する方法を解説します。

スポンサーリンク

背景画像を取得する方法

今回は、例としてLP模写で有名なisaraさんのLPを参考に解説していきます。

結論として、背景画像を取得する方法は下記の3つの手順でできます。

  1. サイトを開いて「検証」をする
  2. 「Source→Page」から背景画像を探す
  3. 背景画像をブラウザで開いて保存する

割とこんがらがる所なので、スクショを用いて丁寧に解説していきます。

STEP1:サイトを開いて「検証」をする

まずは、自分が模写したいサイト(LP)を開いて、「右クリック→検証」を選択します。

模写したいサイト(LP)の背景画像を取得する方法

STEP2:「Source→Page」から背景画像を探す

検証を開いたらコードがでてきます。そしたら上の方に「Source」とあるのでそれをクリックしてください。

そしたら、「◀」があるので、それをクリックして次に「Page」をクリックしてください。

模写したいサイト(LP)の背景画像を取得する方法

STEP3:背景画像をブラウザで開いて保存する

最後に「wp-content→img」を選択して、自分が保存したい背景画像を選択して右クリックしてください。

そしたら、「Open in new tab」とでるので、新しいタブを開いてください。

模写したいサイト(LP)の背景画像を取得する方法

新しいタブを開いたら、あとは右クリックして、「名前を付けて保存」を選択して保存すれば完了です。

模写したいサイト(LP)の背景画像を取得する方法

お疲れ様でした!
これで背景画像を取得する方法は完了です!

あとは、模写するだけでOKです!

今回は以上になります。
それでは良いLP模写ライフを!

LP模写に便利なツール

[sc_blogcard url=”https://yuuuugablog.com/programming/coding-convenient”]