Rakutenページ横幅文字数について

Question

いつもお世話になります

10月1日公開コンサルティング拝見し、商品ページの「見やすさ」が重要だど思いました
全ページを編集するには時間を要しますがコツコツやろうとおもいます
清水さん、ありがとうございます

あらためて、自店舗ページの醜さがきになります
今後は、スマートファーストで整えていきたいと思っているのですが
その前に、質問させてもらいます

Rページの「横幅カウント」してみました。
・全角文字数は、24文字(スマホ含む) クローム拡張機能ページビューレイアウトも同様
・Rアプリでは、15文字

いままで、何となくこのくらい？で改行したら見栄えがいいかなと思いながら、pcとスマホ拡張機能ビューを見ながら改行していました。

以前、マスターズさんから、キャッチコピーと商品名の間に自動的にはいる改行を教わりました
↓


span.catch_copy {
display: block;
margin-bottom: 1em;
}



また、固定文言・フォントカスタマイズも調整し若干見やすくなったとは思うのですが
まだまだ、改良の余地ありです。

商品ページ等、横幅文字数を自動改行するようなspanソースありますでしょうか？
現在の商品ページは、いろんな場所で改行になっており調整したいとおもいます

よろしくお願いします

Accepted Answer

ECマスターズの田中です。

ご要望いただき、ありがとうございます。

グリッド線による対応ですと、
いただいたスクリーンショットの
スマートフォン用商品説明文のように、
HTMLタグが左側に入ってしまい、
単純な文字数の判断が
どうしても難しくなってしまいます。

決まった文字数で改行位置を決める、
という目的であれば、
改行位置を修正できるテキストエディタを
ご利用いただくのも１つの方法です。

「Mery」フリーの高機能テキストエディター - 窓の杜
https://forest.watch.impress.co.jp/library/software/mery/

の場合は、表示メニューから「ルーラ」を表示させ、
マウスの左ボタンでドラッグすることで、
表示上改行する位置を自由に調整することができます。

あくまでも見た目上の改行ですので、
改行位置の設定をなくした後でも改行されたままになるよう、
実際に改行を入れていただきますようお願いします。

文章だけを入れて改行位置を決めたあとに、
HTMLタグをご記載いただく、
という形でご活用いただければ幸いです。

Answer

ECマスターズの田中です。

たとえば、指定した文字数で自動で改行を加えたい、
ということであれば、
文章を囲むHTMLタグの横幅を指定する方法がございます。

スマートフォン用の説明文にて、文章を

と

で囲んでいただくことで、
おおよそ全角２０文字の位置で、文章を改行することができます。

数字を増減させることで、
横幅を変更することができます。
半角文字や、フォントの中で横幅が特別に狭い（広い）文字などの関係で、
一行あたりの字数が指定と異なる場合もございます。

中央寄せを左寄せに変更したい場合は、

のように、「margin-left:0;」の指定を加えていただきますようお願いします。

この方法で、一行あたりの字数を制限することはできますが、
結果として、想定しない位置で改行が加えられる場合もございます。

ご希望の見た目に近づけるには、
実際に適用して表示をご確認いただき、
ご希望にそぐわない場合は値を修正していただく、
この繰り返しを行っていく必要がございますので、
何卒、試行を繰り返していただきますようお願いします。

Answer

田中さん

お世話になります
コメントの方法も利用してレイアウト調整していきたいと思います。
また、ダメ元でクローム拡張機能などの希望なのですが・・
楽天商品ページに「縦に伸びるグリッド線」などあれば
「この辺りで横幅改行しよう！とイメージわくかもしれないです」
すいません、勝手ばかり、よろしくお願いします###HR######IMG09e899a058099a6c905ac558e2df9bfd7.pngIMG0######BR###

Answer

ECマスターズの中野です。

> なんつれさん

いただいたこちらのご質問ですが、
終日田中が不在のため、明日回答させていただきます。

お時間いただいており申し訳ございませんが、
もうしばらくお待ちいただければと思います。

Answer

中野さん

最後のコメントは、クローム拡張機能追加への希望なので、解決済みとさせて頂きます

Answer

田中さま

お世話になります。
試しに使ってみました～イイですね。
スマホページ幅の文字数がイメージでき整いそうです。
ありがとうございます

Mery」フリーの高機能テキストエディター - 窓の杜
https://forest.watch.impress.co.jp/library/software/mery/