商品ページの文字表示について

Question

いつもお世話になります。
楽天の商品ページ作成を、現在、Internet Explorerにて作成しております。
画像の横に文字を入れてますが、 Google Chromeで見ると文字がずれてしまいます。
Google Chromeでもきちんと見れるようにするにはどのようにすればいいのでしょうか。

Answer

ECマスターズの塚本です。

＞画像の横に文字を入れてますが、 Google Chromeで見ると文字がずれてしまいます。
＞Google Chromeでもきちんと見れるようにするにはどのようにすればいいのでしょうか。

まずは実際のページを確認させていただきたく思いますので、
商品URLをご共有いただけますでしょうか。

本投稿にて共有が難しい場合は、
リクエストフォームよりご連絡ください。

Answer

ECマスターズの田中です。

ご連絡いただいたうち、１つ目のページを拝見したところ、
Chromeで見るとたしかに

バ」は
す。
い。

など、中途半端に改行された文字が見当たります。

Webページでの改行に関して、
念頭に入れていただきたい内容がございますので、
下記URLの記事をご参照ください。
https://www.koushinclub.com/blog/903.html

OSの違いによって、フォントの表示幅は
大きく変わってまいりますし、
文字サイズを大きく設定されていると
さらに幅は広くなります。

一つの環境でギリギリ綺麗に表示される設定で作成されると、
他の環境で見た時に行をはみだし、
強制改行が入ってしまう原因となりますので、

上記ページにもございます通り、
長い文章は自然改行に任せるようにしていただいたり、
どうしても強制改行のまま行っていくのであれば、
表示幅に十分余裕をもたせた上で、
いろんなOS・ブラウザの組み合わせでチェックしていただく、
といった方法でご対応いただく必要がございます。


２つ目のページの該当部分について、
この部分だけでなく全ての説明文に言えることなのですが、
文字などを左端から離そうとされる際、
各行頭に



を挿入されているケースが多く見られます。

この方法では、実際にkeiさんにてご確認いただいた通り、
ブラウザによって、そしてOSや文字の大きさ設定でも
表示位置が変わってしまいます。
また、１行１行先頭にタグを書かねばならず、非常に面倒です。

中央揃えを基準として販売説明文を作成されているのであれば、
販売説明文全体を中央揃えにしてしまうのはいかがでしょうか。

たとえば、やで
販売説明文全体を囲む、と言った形です。
（※いずれも、HTML5では廃止された記述方法です。
　　.sale_desc { text- align: center; }
　　のように、スタイルシートをご利用いただくことをオススメします）

そうすると、文字も中央揃えになってしまいますが、
たとえば

上記タグで囲んでいただくと、
全体が中央揃えになった中で左揃え、を実現することができます。
※◯◯◯の部分は、実際に表示させたい領域の幅を、半角数字でご記載ください。

ちなみに、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
 .sale_desc p { display:inline-block;text-align:left; } 
とご記載いただくと、
「display:inline-block;text-align:left;」のスタイルシートを
販売説明文内全てのpタグに適用させることができますので、
指定のための文字数を大幅に減らすことができます。

Answer

田中さま

お忙しい中、いつもご丁寧にありがとうございます。
 .sale_desc p { display:inline-block;text-align:left; } の記載は
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）すべてに記載するのでしょうか。

Answer

ECマスターズの田中です。

＞ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）すべてに記載するのでしょうか。
１ページの中に１回記述があれば反映されますので、
いただいた項目のうち、１箇所だけにご記載いただければ結構です。

Answer

田中さま

お忙しい中、ありがとうございました。
早速試してみます。
ありがとうございました。