ブログ

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. thum バレンタインなのでチョコ品評会をしてみたっス
  2. 2017-new-year-bird-8 あけましておめでとうございます。
  3. color-code_play02 RGBを脳内調合して札を取れ!「COLOR CODEかるた」で遊…
  4. desk 知識や技術と同じくらい大事なのはディスプレイと椅子
  5. m-field_tokyooffice04 広島オフィスメンバーがはじめてエム・フィールド本社におじゃましま…
  6. ba2d551a71d04d5d845f05aa74658fb5_m パソコンスクール HA*NA講師を終えて
  7. news_study エム・フィールド 広島オフィスで「広島フロントエンド勉強会(仮)…
  8. carp3 【カープ】#3 広島、丸3打点の活躍でセリーグ最上位の3位に!

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP