楽天PC用販売説明文の見やすいHTMLについて

Question

いつも専門的なタグのお知恵をいただきありがとうございます。

現在新規ページを作っています。
https://item.rakuten.co.jp/komekopan/gf-plain2/

つくり途中なのですが、ページ自体の構成としては画像を挟みながら、文字でも説明文を添えていくスタイルの予定です。

・文章が長くなると、左右に画面が伸びとても見にくいんです。
ページ自体の横幅をそのページ全体で合わせて設定したい場合のタグを教えてください。

・また、現在すべて同じフォントなのでメリハリがありません。
や文字色変換以外でスクロール見しただけで内容がある程度目に入りやすくなるようなタグがありましたら教えていただけませんか。
ブログを書かれている方がよくうまいこと構成をされていますよね。
うまく言えないのですが、そういう感じのシンプルで読みやすい文字配置にしたいのですが、詰まっています。

よろしくお願いいたします。


↓現在のタグ↓


                
              




                

＼　大変お待たせいたしました！　／


明治32年創業、120年続く
瀬戸内の老舗ベーカリーピーターパンがお届けする

こだわりの無添加素材でシンプルに焼き上げるグルテンフリー米粉パン


2002年の発売から今もなお愛されているベストセラーのグルテン入り米粉食パン「米太郎食パン」の発売から20年、何年も何年も開発を続けていたグルテン不使用のグルテンフリー米粉パンがついに完成！


「これしか食べられないから選ぶ」ではなく、「おいしいから選ぶ」を目指す、ピーターパンのグルテンフリー米粉パンが出来上がりました。

食事制限をしている方でなくても、その日の気分で選べるチョイスの一つとして美味しくお召し上がりいただけます。


【　内容量　】
グルテン不使用 グルテンフリー米粉食パン　２本

【　グルテン不使用 グルテンフリー米粉パン　原材料】
国産米粉、有機オーガニックパーム油（トランス脂肪酸を含まない）、粗糖、白神こだま酵母（天然酵母）、食塩（赤穂の天日塩）、水あめ
※同一工場内で小麦粉を使用した製品を製造しておりますため、アレルギー対応食品ではございません※



お忙しい方や、大家族の嬉しい味方！
安心の無添加パンを、ピーターパンオリジナル包装で包むことにより、未開封の状態で、常温で約1か月日持ちするロングライフパンです。
まとめてお取り寄せして、ごゆっくりお楽しみください。
常温でお届けしますので、冷凍庫をパンパンにする必要もありません。
ご近所、ご親戚におすそ分け、お子様への仕送りや大切な方へのギフトにもとっても喜ばれています。

約1か月常温で日持ちいたしますので、小腹がすいたときのおやつ、
おかず、朝食など様々な場面で大活躍します。





こちらの米粉パンは、
安心安全な熊本製粉のミズホチカラ米粉を使用しています。

シンプル、こだわりの厳選素材に120年続くパンつくりの魂を込めてパンを焼き上げています。

・熊本製粉の安心の国産米粉ミズホチカラ
・天然酵母 白神こだま酵母
・有機オーガニックパームオイル（トランス脂肪酸を含まない）
・赤穂の天日塩













こちらの大容量でお得な送料無料セットもオススメです♪

Accepted Answer

ECマスターズの北原です。

>このテーブルを２ｘ２に修正したいのですが、タグを教えていただけませんか？
>２と２の間には一行改行を入れて見やすくしたいです。

こちらはテーブルで作られているので、
以下のようにタグを加えることで2 x 2に分けることができます。

 
                
                    
                    
                    
                
                
                    
                
                
                    
                    
                    
                
            

テーブルのタグは一行を意味しており、 〜 で囲まれた部分は一行で表示されます。
次のように記述することで、テーブルを複数行にすることができます。

    
    　
    

こちらは三行のテーブルになります。

また、今回は改行を入れたいとのことでしたので
というように
テーブル内にタグを挟むことで改行致しました。


    画像画像
    　←改行用の行
    画像画像


テーブルは多くの場面で使われると思いますので、
今後の参考になればと思います。

Answer

ECマスターズの海老塚です。

> ・文章が長くなると、左右に画面が伸びとても見にくいんです。
> ページ自体の横幅をそのページ全体で合わせて設定したい場合のタグを教えてください。

こちらは、文章のせいではなく、

以下の部分が横幅を広げる原因となっておりますので、
https://ec-masters.gyazo.com/669a5edade7864d76db4e5905dca5dab

・画像を小さくする
・2x2列にする

などの対応をしてみてください。

> ・また、現在すべて同じフォントなのでメリハリがありません。
> や文字色変換以外でスクロール見しただけで内容がある程度目に入りやすくなるようなタグがありましたら教えていただけませんか。
> ブログを書かれている方がよくうまいこと構成をされていますよね。
> うまく言えないのですが、そういう感じのシンプルで読みやすい文字配置にしたいのですが、詰まっています。

フォントによって見づらいという印象はございませんので、
もし、参考にしたいブログ記事などをご教示いただけましたら、
実現するためのタグなどはご案内させていただきますので、
ご連絡いただけましたら幸いです。

Answer

海老塚さん回答ありがとうございます。

４つ並べているテーブルのせいだったのですね。
このテーブルを２ｘ２に修正したいのですが、タグを教えていただけませんか？
２と２の間には一行改行を入れて見やすくしたいです。

横長が解消されたら、今の読みにくさが軽減するかもしれないので、とりあえずフォントの件は大丈夫です。
ありがとうございます。