タグ: 追従

どうも、しゃちょーです。 ページを制作していると画面に映っている範囲だけでなく、 縦長のページ全体をスクロールして 一枚の画像としてキャプチャしたい時、ありますよね？ いつもはGoogle Chromeの「Awesome Screenshot」を使っていたのですが、 下にスクロールすると画面上部に追従してくるナビゲーションメニューを設定しているページだと、 追従メニューまで複数キャプチャしてしまいます。 ↓こんな感じ かと言って一画面毎スクリーンショットを撮って合成するのも手間がかかる… という時に便利な機能が「Firefox」にはあります。 このページはChromeではなくFirefoxでの操作方法となりますので、 Firefoxをインストールされていない方はインストールしてから読み進めてください。 ・Firefoxのインストールはこちら https://www.mozilla.org/ja/firefox/ まずはFirefoxでキャプチャしたいページを開いたら以下の手順を行います。 1.開発ツールを表示する。 操作手順 「ツール」　＞　「ウェブ開発」　＞　「開発ツールを表示」をクリック Mac なら command + option + i でも可能です。 2.歯車をクリック 3.各種設定項目にチェックを入れる。 「ページ全体のスクリーンショットを撮ります」にチェックを入れる。 「スクリーンショットをクリップボードへコピー」にチェックを入れる。 4.実際にキャプチャしてみる 開発ツールにカメラのアイコンが追加されるので、 キャプチャしたいページでカメラのアイコンをクリックする。 すると、クリップボードにコピーされるので好きな場所でペースト （Ctrl +v（MacならCommand + V））で貼り付けが可能です。 もしくは、Downloadフォルダにキャプチャしたファイルが保存されますので、 必要な箇所を切り抜くなど加工して利用してください。 まとめ いかがでしたでしょうか？ ChromeのAwasome Screenshotはお手軽で非常に便利ですが、 追従メニューをスクロールの度にキャプチャしてしまうため、 意図した結果を得られない時があります。 そういう場合は、Firefoxの標準のキャプチャツールを使用すれば、 こちらも簡単に結果が得られます。 むしろ慣れたらこちらのほうが使いやすいかもしれません。。。 当分僕はスクリーンキャプチャはFirefoxで…という感じで使うと思います！ この記事がお役に立ちましたら、 いいね！のクリックや、 少しでも多くの方へお届け出来るように、 各種SNSでのシェアなどご協力をお願い致しますm(_ _)m

皆様どうも、こんにちは。 楽天ショップの中で、スクロールしても付いてくるバナーを見たことはありませんか？ PCだと画面の横にピタっと付いてきて、マウスをのせるとニョキっと出てくるアレです。 スマホだとスクロールしてもいつまでもついてくるアレです。 本記事ではそんな「スクロールに追従するバナーの設置方法」ついて解説していきます。 本記事の索引 -INDEX- 1. コピペするコードの紹介 2. まとめ 1. コピペするコードの紹介 コピペ用のコードを紹介いたします。 今回の記事で参考にさせていただいたブログは以下の２つです。 ・オガリアさんのこちらの記事 ・レジットさんのこちらの記事 ※実際に検証した上で上記サイトの内容を若干変更して記載します。 PC用コード バナーの画像は幅87px、高さは私は250pxで制作して正常に動作しました。 以下コードを「共通説明文（大）」に設置して正常動作しました。 <!-- 追従バナー ここから--> <style type="text/css"> <!-- a#rc_rightArea { width: 87px; /*画像の全体幅*/ position: fixed; top: 100px; right: -20px; /*マウスを乗せた時に出てくる幅*/ display:...