【yahooショッピング】TOPページのフリースペースにできる長い余白について

Question

いつもお世話になっております。

https://store.shopping.yahoo.co.jp/kaban-club/

yahooショッピングのTOPページのフリースペース 3に、新商品を3列並べて表示させる以下のようなHTMLを入れております。

----------------------------------------------------



    New ITEM鞄倶楽部の新作
    
        品番価格
        品番価格
　　　・
　　　・
　　　・
    


＜保証のバナー＞
＜送料無料のバナー＞
----------------------------------------------------

Firefoxやgooglechromeで確認したところ、googlechromeのみ、上記HTML文の下に長い余白ができるます。
更新（F5）を押したらこの長い余白がなくなり普通に表示されることもあるので不思議に思っています。

色々試した結果、を消して表示した場合には『長い余白がなくなり普通に表示』されます。
もしかしてここに原因があるのかもしれません。

当社としてはcssを使ったページを作っていきたいと考えております。
色々原因を探っていますが分からないのでご教示いただけますと幸いです。

お手数をおかけしますが宜しくお願い致します。###HR######IMG0d4fdde82553cba15a9f731bc1dc6cb01.jpegIMG0###

Answer

ECマスターズの北原です。

>色々試した結果、を消して表示した場合には『長い余白がなくなり普通に表示』されます。
>もしかしてここに原因があるのかもしれません。

ページを確認しましたところ、現在は余白がないようでしたので、
既にlinkタグは削除済みという認識でお間違い無いでしょうか

linkタグを削除したことで、解消されたということなので、
おっしゃる通りCSS内で余白ができてしまうような
記述をされているのではないかと存じます。

お調べしますので、CSSのURLをご教授いただけますでしょうか。

Answer

お返事ありがとうございます。

＞ページを確認しましたところ、現在は余白がないようでしたので、
既にlinkタグは削除済みという認識でお間違い無いでしょうか

言葉足らずで申し訳ありません。
色々試した結果の1つとして書いたので、現在はlinkタグ有りで表示しております。
あと、よく出るのはキャッシュを消した後に出やすいです。

フリースペース使っているcssのURLです。
https://shopping.geocities.jp/kaban-club/css/index_common.css

ご確認よろしくお願いします。

Answer

ECマスターズの北原です。

>色々試した結果の1つとして書いたので、現在はlinkタグ有りで表示しております。
>あと、よく出るのはキャッシュを消した後に出やすいです。

ご教授いただき誠にありがとうございます。

お調べしましたところ、Yahooのiframeタグの
仕様が少し特殊であるために起こる現象でございました。

結論からお伝えさせていただきますと、
CSSはlinkタグで読み込むのではなく、
下記のようにHTMLタグに直接style属性を記述することで
改善することができます。



以下より調査の結果をお伝えさせていただきますが、
読み飛ばしていただいても構いません。

Yahooの新ストアページの仕様は
フリースペースに記述されたHTMLを
ページが読み込まれた後にJavaScriptを使って
iframeタグ内に追加するような特殊な使用をしております。

その際にフリースペースのコンテンツの高さを自動計算し
iframeタグのheight属性に高さが記述されます。
下記のようにiframeのheightが大きく計算されてしまった時に
余白ができてしまう現象が起きておりました。

余白がない時のiframeタグ（height="1749px"）


余白がある時のiframeタグ（ height="6725px"）


では、iframeの高さが大きくなってしまう原因ですが、
linkタグ（CSS）が読み込まれるタイミングにあります。

CSSが読み込まれると画像のサイズや並び方（縦並びから横並び）が
変更されるため、コンテンツのサイズが最初もより小さくなります。

CSSが読み込まれる前に、コンテンツの高さを計算した場合、
height="6725px"となり余白ができてしまいます。

キャッシュが残っている場合、あらかじめCSSが読み込まれた状態となるため、
高さの自動計算が行われるよりも前にCSSによってコンテンツが小さくなるため
height="1749px"となります。
その結果、キャッシュが残っているかどうかで余白がある時、ない時がございました。

CSSが読み込まれるタイミングと、
JavaScriptによる高さに自動計算のタイミングは
店舗のページ設定では制御することができません。

そのため、確実にCSSを適用させた後に
高さの自動計算をするためにはstyle属性に直接
CSSを記述する必要があります。

また、コンテンツのサイズが変化しないようなフォントの色を変えるなどの
CSSであれば今回のようにiframeの高さに影響することはございませんので、
linkタグを使ってCSSを読み込んでも問題ありません。

Answer

北原様

おはようございます。
余白ができてしまう原因や解決方法まで詳しくご教示いただきありがとうございます。

コメントに書かれていた通り、
＞HTMLタグに直接style属性を記述することで
＞改善することができます。
をしたのですが、やはりまだ余白が出来たり、今度は２行目が見切れたりする現象があるみたいです。

css等も色々かえたのですが、他にiframeの高さ取得の邪魔をしているような原因等ってあるのでしょうか？

お手数をおかけしてすみません。
ご返信いただければ幸いです。###HR######IMG0e2f110e843b48fe523917cfa35739271.pngIMG0###

Answer

ECマスターズの北原です。

>css等も色々かえたのですが、他にiframeの高さ取得の邪魔をしているような原因等ってあるのでしょうか？

コンテンツの高さが変わってしまうような
CSSは全てstyle=""で記述していただく必要があります。
例としては、『margin: 0 auto 150px』のような
下側に余白をあけるものもstyle=""に記述いただきたいです。

コンテンツサイズを変更するCSSを使い分けるのが
大変ということあれば全てstyle=""に変更いただくのが
良いかと存じます。

フリースペース３に記述されたHTMLとindex_common.cssをもとに
修正させていただきましたので、下記をお試しいただけますと幸いです。




    New ITEM鞄倶楽部の新作
    
        
            
            28007
            12,650
        
        
            28008
            12,430
        
        
            28009
            10,450
        
        
            28010
            8,800
        
        
            28011
            10,230
        
        
            28012
            7,480
        
        
            22358
            22,550
        
        
            26707
            15,730
        
        
            42583
            16,500

Answer

北原様

お忙しい中、ご返信いただきありがとうございます。

＞コンテンツの高さが変わってしまうような
＞CSSは全てstyle=""で記述していただく必要があります。

marginやpaddingもcssで書かず、style属性に書いたほうがいいと言うことですね。

コメントに書かれている内容を元に修正をし、他の方にも見て頂きましたが余白や見切り等問題なく見れているようです。
おかげで無事解決できたと思います。
わざわざフリースペース３に記述されたHTMLの修正までしていただきありがとうございました。

今後もまた何か質問させていただく事もあると思いますが、その時もまたよろしくお願いいたします。

Answer

ECマスターズの北原です。

解決いただけたようで何よりでございます。
今後とも何卒よろしくお願いいたします。