ECステーションツールのレイアウトについて

Question

いつもありがとうございます。
ＥＣステーションのツールの出荷日バナーやイベントバナーを設置しているのですがバナー内のレイアウトがなかなかうまくいきません。
端に寄り過ぎていたり修正しても行きすぎていたり、スマホ比較君やステーション内のプレビューで確認しても、実際のサイト内で見てみると違った位置に表示されます。
効率のよい文字の設置方法（レイアウト）等ありますでしょうか？
主に文字のサイズや設置位置で悩んでいます。（縦pxや横px値です。）
目視で見てpxを決めているのですがなかなかピッタリとはまりません。
宜しくお願いします。

Answer

ECマスターズの田中です。

バナーを作成された後、設定とは異なるサイズで表示させていないでしょうか。

バナー内のレイアウトは、基本的に左端・上端からの距離で指定しておりますので、
プレビューで想定通りに表示されたのをご確認いただいた後、
実際に設置する時に異なる横幅・高さで表示すると、
レイアウトが崩れてしまいます。

設置の際に使われたタグにて、
作成時のサイズと異なっていないかどうかご確認をお願いいたします。

サイズを合わせても位置ズレが解決しない場合は、
ECステーションにお問い合わせいただきますでしょうか。
（年内のサポートが本日２５日の１７時３０分までなので、お早めにご確認をお願いします）

Answer

文字のレイアウト設置はやはり目視で測定してｐｘ値を決めるしかないのでしょうか？

Answer

ECマスターズの田中です。

はい、目視で測定の上、pxの値をお決めください。

下記URLで紹介されている
ピクセル定規のようなフリーソフトを使うことで、
画面内の距離を測ることができますので、
位置調整にご利用ください。
http://www.bee-custom.com/2013/10/06/%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%B3%E3%81%AB%E7%94%BB%E9%9D%A2%E4%B8%8A%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E6%B8%AC%E3%82%8C%E3%82%8B-%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E5%AE%9A%E8%A6%8F/

あるいは、各ブラウザの開発者用ツールを利用して
スタイルシートを書き換えることで、
リアルタイムで変更後の見た目を確認しながら修正することができます。

Chromeの場合は、右クリックメニューの「要素と検証」（最新バージョンでは「検証」）より、
https://ferret-plus.com/1880

IEの場合は、右クリックメニューの「要素を検査」より、
http://beginners-hp.com/developers_tool.html

それぞれリアルタイムで見た目の修正ができます。

Answer

ありがとうございます。
助かりました。