ブログ

fullpage screen captureで邪魔な固定表示を消して撮る方法

how-to-capture

こんにちは、デザイナーのTantanです。

webページ全体を画像にするのに便利なプラグイン「fullpage screen capture」。
とっても便利なのですが、スクロールに追従するバーが重複して邪魔です。
そんなとき、開発者ツールで非表示にするとキレイに撮れるので、やり方を詳しくご紹介します。

ページ全体のスクリーンショットが撮れるプラグイン

webページのスクリーンショットを撮りたいとき、Chromeのプラグインfullpage screen captureが便利です。ボタン一発で縦長ページの上から下まで一つの画像に書き出してくれます。
how-to-capture-01before

縦長のページもこの通り。
原寸大のpng画像を保存できます。

追従パーツがじゃまになる

ただ、問題なのはスクロールしても固定でついてくるヘッダーやボタンです。
このように何箇所も重複してしまいます。
how-to-capture-02before

そんなときは、fullpage screen captureを使う前に、Chromeの開発者ツール(デベロッパーツール)を使って邪魔なパーツを非表示にしておくといいです。
webデザイナーやエンジニアの方にはおなじみの機能ですが、馴染みのない方のために詳しく解説します。

開発者ツールを使って邪魔なパーツを消す

開発者ツールを開く

では、スクロールしてもついてくる邪魔なボタンを消してみましょう。
まず、撮りたいwebページを開いた状態でブラウザ上の画面を右クリックします。
how-to-capture-03right-click
検証」をクリックします。

how-to-capture-04devtoolswebページのコードが表示されます。これが開発者ツールです。
(webページの裏側を見たり触ったりできる便利なツールです。エラーを見つけたり、スマホ表示を確認したりできます。)

パーツを選択する

左上の四角と矢印のアイコンがあります。このボタンを押してください。how-to-capture-05select

その状態で画面上を撫でると、選択できるカタマリがハイライトするようになります。how-to-capture-06high-light

クリックすると、そのパーツを選択できます。

パーツを消す

消したいパーツをクリックして選択。削除(delete)キーを押せばOKhow-to-capture-07delete
削除したパーツは、ブラウザ上で一時的に非表示になるだけなのでご安心ください。
もし間違って消しても、ページをリロード(再読込み)すれば元通りです。
how-to-capture-08reload

一度でパーツが消えず、部分的に残ってしまっても大丈夫。もう一度四角と矢印のアイコンを押して、残ったパーツを選択して消してください。
how-to-capture-09select-again

あとはfullpage screen captureのカメラボタンをポチっとして、スクリーンショットを撮ればOK。
これでキレイな画像が書き出せます。
※fullpage screen captureのプラグインは、別途インストールが必要です。
how-to-capture-10screen

how-to-capture-11end

必要なパーツは個別に撮る

消してしまったボタンは、あとから個別にスクリーンショットを撮りましょう。
まずページをリロード(再読込み)します。丸いリサイクルマークみたいなボタンです。
そうすると、消えていたボタンがまた表示されます。
how-to-capture-08reload

そして、範囲選択でスクリーンショットを撮ります。(macならcommand+shift+4)

全画面キャプチャと重ねてツギハギにするもよし、Photoshopなどでしっかり合成するもよし。
これで完成です。

how-to-capture-12end

おまけ

開発者ツールで非表示にする手法は、他にも便利な使い方がありそうです。
例えば、広告がかぶって見たいコンテンツが見えない時とか、押したいボタンが押せないときとか。
ワードプレスのログイン中に一時的に上のツールバーを消したいとか。

ページを再読み込みすれば元通りに戻るので、気軽になんでもバシバシ消してみてください!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. art-board-Illustrator-tips_eyecatch イラレの「アートボードを選択オブジェクトに合わせる」が便利!
  2. Tutorial-BalloonOfComic-00 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  3. Tutorial-BalloonOfComic-00 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  4. blog image-illustrator-pentool ペンツールでベジェ曲線を練習するための初心者向けトレース素材画像…
  5. pug これからのコーディングは再利用と効率化だ!話題のPugを使ってみ…
  6. How-to-make-ribbon-in-Illustrator-8 【初心者向け】イラレでリボン作成 ワープで簡単変形!
  7. Materialicon-00 デザイナーのためのGoogle Material iconsの使…
  8. how-to-capture fullpage screen captureで邪魔な固定表示を…

最近の記事

  1. Tutorial-BalloonOfComic-00
  2. Tutorial-BalloonOfComic-00
  3. Tutorial-BalloonOfComic-00
  4. Tutorial-BalloonOfComic-00
  5. lig_10
PAGE TOP