楽天商品スマホ商品ページ画面全体キャプチャーの際の買い物カゴボタンの大きさ

Question

こちらの商品を
https://item.rakuten.co.jp/radica/m7001-c203/

PC クロームのエクステンション　
MOBILE LAYOUTER
表示させ
同じく PC クロームのエクステンション　
awesomescreenshot
でページ全体をスキャンすると
下記なのですが

https://www.awesomescreenshot.com/image/3363780/0eac04663a6ef13c0385b21a63506911
商品かごのボタンが横に長く取り込まれています。

検索対策でページ比較をしたいと考えていて、
印刷したいのですが、ボタンが長いのでうまく印刷レイアウトできません。

どのようにかボタンを小さくして取り込める方法か、
うまく、スマホ商品ページ部分をプリントアウトできる方法がありましたら教えてください

よろしくお願いします。

Answer

ECマスターズの田中です。

> 商品かごのボタンが横に長く取り込まれています。

この問題を解決するには、
ページの横幅を狭める必要がございます。
Chromeのウィンドウの横幅を可能な限り狭めた上で、
ページ全体のスキャンをお試しください。

拡張機能「MobileLayouter」ではなく、
Chrome本来のデベロッパーツールを利用して
スマートフォンの見た目に変えていただくと、
さらに実機の幅に近づけることができます。
http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

ちなみに、Chrome拡張機能「FireShot」をご利用いただくと、
今回の買い物かごボタンのように、画面固定表示される要素を
非表示にした状態で、スクリーンショットを撮影することができます。
https://chrome.google.com/webstore/detail/mcbpblocgmgfnpjjppndjkmgjaogfceg
ぜひ一度お試しください。

Answer

ECマスターズ
田中さま

ディベロッパーツールで
Chrome拡張機能「FireShot」
の組み合わせが調子いいです

キャプチャを共有する場合はamazingで
キャプチャを保存とかの場合は「FireShot」で進めていきます

ありがとうございました。

Answer

ECマスターズ
田中さま
お世話になっております。

キャプチャーはできるようになりました
今度はプリンとアウトする際に困っています

a4でプリントしようとすると縦に長いpdf
ファイルなのですが、その一部分だけがプリントアウトされてしまいます

印刷設定のやり方かと思いますがどのように設定すればいいか教えてもらえますでしょうか。
プリンターはa4のみをプリントできるブラザーのMFCシリーズです

また、ネットプリントでセブンでプリントしようとしましたがa4にはプリントできないサイズとして、
エラーでアップできませんでした。

ご確認ください、よろしくお願いいたします。

Answer

ECマスターズの村井です。

休み明け改めて担当より回答させていただきますので、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

縦長のページのスクリーンショットは、
そのまま印刷しようとすると
A4の紙と縦横比が異なりすぎて大変なのですが、

下記URLで紹介されているサービスをご利用いただくことで、
A4の中で分割してまとめ、印刷していただくことができます。
https://webnaut.jp/markup/1125.html

Answer

田中様
度々すいません。

こちらのページを
https://item.rakuten.co.jp/jour-flour/r-ff-rc-c-1/

fireshopでPCページをキャプチャとると
添付のようになり同じ内容が多く入ってくるのですが、
こちらはどのようにキャプチャをとればいいでしょうか？

ご確認ください、よろしくお願いいたします。###HR######IMG0005ee85671dec672f1fcf2532168729f.jpegIMG0######BR###

Answer

ECマスターズの田中です。

私にて動作を確認したところ、
同じ画面が複数連続して撮影されている部分は
再現できませんでしたが、
ヘッダーが毎画面ごとに映ることを確認いたしました。

これを防ぐには、
撮影の前に予めヘッダーを非表示もしくは削除する必要がございます。

デベロッパーツールから
「Console」を選択していただき、 > の少し右をクリックして
jQuery('#rakutenLimitedId_header').remove();
上記の行を貼り付けてEnterを押していただくことで、
画面上からヘッダーを一時的に削除することができます。

Answer

度々すいません
A４で印刷しようとすると添付したキャプチャーのように余白が大きくある設定になってしまいます
macなのですが何か印刷設置が間違っている部分がありますでしょうか？###HR######IMG06a834c4851537b1fc0cb3a4114e031d2.jpegIMG0######BR###

Answer

さらに度々すいませんー

本日再度試して見たら、レイアウトが横にA4になっていて、
右側に大きく余白が出る感じです

ちょうどよくA4縦でレイアウトできるのが正常でしょうか？？
合わせてご確認ください、よろしくお願いいたします。###HR######IMG0f663e2e069201864332bb99fafcbbeac.jpegIMG0######BR###

Answer

ECマスターズの田中です。

> ちょうどよくA4縦でレイアウトできるのが正常でしょうか？？

はい、私の環境では、A4縦でレイアウトされる仕様になっておりました。
レイアウト（Layout）を縦（Portrait）に、
詳細設定（More settings）の中にある用紙サイズ設定をA4にご変更の上、
プレビュー画面をご確認いただきますようお願いします。

Answer

田中さま
手取り足取りありがとうございました。
できました！！！###HR######IMG0fb53aa158bda7528202f3ad3f2d4fa44.jpegIMG0######BR###