高さ調節のための変更箇所につきまして。

Question

お世話になります。
ECステーションのにぎわいRMIXを利用して店舗状況を表示させています。
添付画像の通り、Yahoo!ショッピングのスマホページだと日付が切れてしまっているのですが、どこを変更すればきれいに表示されるでしょうか。


ーーーここからーーー











$(function () {
    $('ul.spy').simpleSpy();
});
(function ($) {
    
$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 5;
    interval = interval || 6000;
    
    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();
            
        // capture the cache
        $list.find('> li').each(function () {
            items.push('' + $(this).html() + '');
        });
        
        total = items.length;
                
      $list.wrap('').parent().css({ height : height * limit  + 10 });
      $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0,
                display : 'none'
            }).prependTo($list);
                        
            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                
                // AND at the same time - decrease the height of the LAST item
                // $(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });
            
            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }
            
            setTimeout(spy, interval)
        }
        
        spy();
    });
};
    
})(jQuery);







###HR######IMG0527b4299fe68ece31f9bdd069b00481b.pngIMG0###

Answer

ECマスターズの中村です。

>添付画像の通り、Yahoo!ショッピングのスマホページだと日付が切れてしまっているのですが、どこを変更すればきれいに表示されるでしょうか。

該当の部分は、以下の要素を
変更する事で表示を調整できます。

表示されるデータのBOXの高さを
調整したい場合は「height: 98px;」
部分を変更して下さい。
----------------------------
#ticker li {
margin:0px;
padding: 0px;
height: 98px;
overflow: hidden;
}
----------------------------

文字の大きさを調整する場合は、
下記の部分の
「font-size」や「margin」の値を
調整して日付部分も表示されるか
ご確認下さい。
----------------------------

/*------------------------------------------------------------
●各データ種類ごとの文字プロパティ詳細
------------------------------------------------------------*/


/*------注文速報 受注日、注文番号部分------*/
.rmix-sub{
font-size: 0.7rem; /* 商品名の文字サイズ */
color:#999;/* データ部分文字色 */
font-weight: normal; /* normal → bold で太字 */
text-align: left; /* left（左寄せ）center（中央）right（右寄せ）*/
margin: 3px 5px 5px 0px ; /* 余白 */
line-height:1.1;
}


/*------注文速報 商品名の設定------*/
.rmix-name{
font-size: 0.8rem;
font-weight: bold; /* normal → bold で太字 */
line-height: 1.3em; /* 商品名の行間 */
text-align: left; /* left（左寄せ）center（中央）right（右寄せ）*/
}

.rmix-takasa{
height: 75px;
overflow: hidden;
}
---------------------------------
また、共有頂いた中にも記載がありますが、
商品名の表示文字数は
にぎわいRMIX＞テンプレート編集＞書式設定
で指定できます。

これらの部分を調整しながら
表示をご確認下さい。

よろしくお願い致します。

Answer

表示されるデータのBOXの高さを
調整したい場合は「height: 98px;」
部分を変更して下さい。
----------------------------
#ticker li {
margin:0px;
padding: 0px;
height: 98px;
overflow: hidden;
}
----------------------------


上記の数値を大きくした際、
BOXＧとBOXの間隔が広くなるだけでした。
BOX自体が高くなるようにするには
どうすれば良いでしょうか。

Answer

ECマスターズの松本です。
CSS上は

#ticker li{
    margin: 0px;
    padding: 0px;
    height: 98px;
    overflow: hidden; //①はみ出したら消す、ここをvisibleに変更
}

.rmix-takasa{
height: 75px; //②ここが中のコンテンツの高さを制御する部分、親に併せてここを98pxにする
overflow: hidden; //③はみ出しているものは非表示にする、ここをvisibleに変更
}

この3か所を変更すれば表示されると思います。
※ただこの場合下の余白がかなりキツくなります。
→この余白の調整も併せて行う場合は、上記の#ticker liに対して
以下のように !important を付けて強制上書するといいかもしれません

#ticker li{
    margin: 0px;
    padding: 0px;
    height: 110px !important; //④ 高さを強制上書き
    overflow: hidden; 
}

.rmix-t {
    margin: 5px 5px 0px 5px;
    border: 1px solid #efefef;
    height: 100%; //⑤レビューの内容の際に高さが小さくならないように追記
}

これで調整出来るかと思います。

ただ、力技で書き換えているだけですので、
この方法しかないのか？（管理画面で設定ができないか）
インテクレッセ様にお問い合わせ頂けますと幸いです。