フリー写真素材のSOZAIZINE(ソザイジン)

本日人気の記事

ページ全体の画面キャプチャに追従メニューが入ってしまう問題を解決(Firefox)

ページ全体の画面キャプチャに追従メニューが入ってしまう問題を解決(Firefox)

どうも、しゃちょーです。

ページを制作していると画面に映っている範囲だけでなく、
縦長のページ全体をスクロールして
一枚の画像としてキャプチャしたい時、ありますよね?

いつもはGoogle Chromeの「Awesome Screenshot」を使っていたのですが、
下にスクロールすると画面上部に追従してくるナビゲーションメニューを設定しているページだと、
追従メニューまで複数キャプチャしてしまいます。

↓こんな感じ
追従メニューもキャプチャされてしまう問題

かと言って一画面毎スクリーンショットを撮って合成するのも手間がかかる…

という時に便利な機能が「Firefox」にはあります。

このページはChromeではなくFirefoxでの操作方法となりますので、
Firefoxをインストールされていない方はインストールしてから読み進めてください。

・Firefoxのインストールはこちら
https://www.mozilla.org/ja/firefox/

まずはFirefoxでキャプチャしたいページを開いたら以下の手順を行います。

1.開発ツールを表示する。

開発ツールを表示する

2.歯車をクリック

開発ツールを表示する

3.各種設定項目にチェックを入れる。

ページ全体のスクリーンショットを撮ります
「ページ全体のスクリーンショットを撮ります」にチェックを入れる。

スクリーンショットをクリップボードへコピー
「スクリーンショットをクリップボードへコピー」にチェックを入れる。

4.実際にキャプチャしてみる

ページ全体のスクリーンショットを撮ります
開発ツールにカメラのアイコンが追加されるので、
キャプチャしたいページでカメラのアイコンをクリックする。

すると、クリップボードにコピーされるので好きな場所でペースト
(Ctrl +v(MacならCommand + V))で貼り付けが可能です。
もしくは、Downloadフォルダにキャプチャしたファイルが保存されますので、
必要な箇所を切り抜くなど加工して利用してください。

まとめ

いかがでしたでしょうか?
ChromeのAwasome Screenshotはお手軽で非常に便利ですが、
追従メニューをスクロールの度にキャプチャしてしまうため、
意図した結果を得られない時があります。
そういう場合は、Firefoxの標準のキャプチャツールを使用すれば、
こちらも簡単に結果が得られます。
むしろ慣れたらこちらのほうが使いやすいかもしれません。。。

当分僕はスクリーンキャプチャはFirefoxで…という感じで使うと思います!

この記事がお役に立ちましたら、
いいね!のクリックや、
少しでも多くの方へお届け出来るように、
各種SNSでのシェアなどご協力をお願い致しますm(_ _)m



この記事を書いた人

Profile image
代表取締役の徳増です。
WEB制作、運営、人事など業務全般に携わっています。
中学時代から自分は社長になると思い込んでいました。現在、社長です。
元々美術関係やゲームが好きで、「ゲーム作ろっと!」と思い立ち、
高校卒業後に親の反対を振り切って単身東京のプログラミング専門学校へ。
卒業し、第一志望のSEGAは一次試験であっさり落ちてしまい、
内定していた第二志望の某ゲーム会社の通知をムシャっとしてクシャる。
情報処理の会社に入社し4年間倉庫管理システム構築業務に従事。
2007年、帰郷し独立。2013年8月法人化。

僕は最近こんな記事を書きました。是非見てください( ´,_ゝ`)♪

ブログのランキングサイトに参加中!クリックで応援お願いします!

毎日クリックして応援してください(>人<;)
ブログランキング・にほんブログ村へ
にほんブログ村

人気ブログランキングへ

コメントをお寄せください

*
*
* (公開されません)