お世話になります。
ECステーションのにぎわいRMIXを利用して店舗状況を表示させています。
添付画像の通り、Yahoo!ショッピングのスマホページだと日付が切れてしまっているのですが、どこを変更すればきれいに表示されるでしょうか。
ーーーここからーーー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="jquery-1.2.6.js"></script>
<style type="text/css">
<!--
/*------------------------------------------------------------
●全体枠、タイトル部分の設定
------------------------------------------------------------*/
/*◇◇◇全体枠◇◇◇*/
.rmix-waku{
margin: 0px;
padding: 0px 0 5px 0;
border: 1px solid #efefef;/*◎色設定*/
max-width: 100%; /*全体幅を指定*/
}
/*◇◇◇ヘッダータイトル部◇◇◇*/
/*タイトル設定*/
.rmix-header{
background-color:#ccc;/*◎色設定*/
font-size: 1.1rem;
font-weight: bold;
color: #fff;/*◎色設定*/
padding: 5px 10px 5px 10px;
background-image :;/*透過PNGで背景画像を指定(削除で背景画像なし)url("ファイル名.png")*/
text-align: right;
vertical-align: top;
}
.title{
text-align:center;
}
/*タイトルの日時*/
.rmix-day{
font-size: 0.8rem;
line-height: 1.4em;
font-weight: normal;
color: #fff;/*◎色設定*/
margin: 3px 0 0 0;
text-align: right;/*中央寄せ left左寄せ right右寄せ*/
}
/*◇◇◇各テーブルの外枠・マージン設定◇◇◇*/
.rmix-t{
margin: 5px 5px 0px 5px;
border: 1px solid #efefef;/*◎枠色設定*/
}
/*------------------------------------------------------------
●画像関連の設定
------------------------------------------------------------*/
/*◇◇◇タイトル画像の設定◇◇◇*/
.header-pic{
width:100%;/*●サイズ調整*/
}
/*◇◇◇商品画像の設定◇◇◇*/
.rmix-pict{
margin:5px;
height:80px;/*●サイズ調整*/
}
/*◇◇◇商品画像列の設定◇◇◇*/
.rmix-1st-td{
width: 18%;/* テーブルの先頭列の幅を指定 *//*●サイズ調整*/
text-align: center;/*中央寄せ left左寄せ right右寄せ*/
background-color: #fcfcfc;/*◎背景色設定*/
}
/*商品画像列の横幅調整用*/
.size{
width: 100%;
height: 1px
}
/*レビュースターアイコンの大きさ*/
.star-size{
width: 15px;
}
/*◇◇◇表示データ種類アイコンの設定◇◇◇*/
.rmix-info{
margin:0px;
width: 50px;/*●サイズ調整*/
}
/*◇◇◇表示データ種類列の設定◇◇◇*/
.rmix-end-td{
width: 50px;/* テーブルの最終列の幅を指定する場合 *//*●サイズ調整*/
text-align: center;/*中央寄せ left左寄せ right右寄せ*/
background-color: #fcfcfc;/*◎背景色設定*/
}
/*◇◇◇マウスオーバーで画像を透過(背景白なら白色化)◇◇◇*/
/*マウスをリンク付き画像に乗せると色が薄くなります。*/
/*効果を「なし」にしたい場合は下記を削除してください。*/
a:hover img{
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
a img{
border: none;
}
a img {
border-style:none;
}
/*------------------------------------------------------------
●文字、各行の設定
------------------------------------------------------------*/
/*◇◇◇データ部分 共通設定◇◇◇*/
.rmix-data{
font-size: 0.9rem; /* 文字サイズ */
color:#555;/* データ部分文字色 */
font-weight: normal; /* normal → bold で太字 */
text-align: center; /* left(左寄せ)center(中央)right(右寄せ)*/
line-height: 1.2em; /* 行間 */
padding: 7px 5px 5px 5px ; /* 余白 */
width: 100%;/*●サイズ調整 各行のデータ部分横幅*/
vertical-align:top;
background-color: #fcfcfc;/*◎背景色設定*/
}
/*◇◇◇リンク文字の設定(文字色、下線あり・なし)◇◇◇*/
a{ text-decoration: none; } /* none → underlineで下線有り */
a:link{color: #2388da; } /* 商品名のフォント色 */
a:visited{ color: #2388da; } /* クリック済みの色 */
a:hover{
color: #2388da; /* マウスを当てた時の色 */
text-decoration: none; /* マウスオンで下線underline、下線なし none */
background-color: #fffdcf;
}
/*※商品名の表示文字数は「にぎわいRMIX>テンプレート編集>書式設定」で指定できます。*/
/*------------------------------------------------------------
●各データ種類ごとの文字プロパティ詳細
------------------------------------------------------------*/
/*------注文速報 受注日、注文番号部分------*/
.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-name2{
font-weight: normal; /* normal → bold で太字 */
line-height: 1.3em; /* 商品名の行間 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ)*/
margin: 2px 0 0 0;
font-size: 0.8rem;
background-color: #;
padding: 5px 5px 5px 5px;
border-top: 2px solid #FF8E00;/*レビュー文上部バー 消す場合0px*/
height: 43px;
overflow: hidden;/*文字がはみ出た場合に隠す設定*/
}
/*------おしらせ文の設定------*/
.rmix-name3{
font-weight: normal; /* normal → bold で太字 */
line-height: 1.3em; /* 商品名の行間 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ)*/
margin: 2px 0 0 0;
font-size: 0.8rem;
background-color: #;
padding: 5px 5px 5px 5px;
height: 40px;
overflow: hidden;/*文字がはみ出た場合に隠す設定*/
}
/*------レビュー点数の文字------*/
.rmix-review{
font-weight: normal; /* normal → bold で太字 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ)*/
font-size: 0.9rem;
margin: 0 5px;
line-height: 1.4em;
vertical-align: top;
color: #555;
}
/*------お知らせ登録日の文字------*/
.rmix-infosub{
font-weight: normal; /* normal → bold で太字 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ)*/
font-size: 0.8rem;
line-height: 1.2em;/*画像と高さを揃える*/
margin-left: 3px;
vertical-align: top;
color: #555;
}
/*------新着登録日の文字------*/
.rmix-infosub2{
font-weight: normal; /* normal → bold で太字 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ)*/
font-size: 0.7rem;
line-height: 1.2em;/*画像と高さを揃える*/
margin-left: 0px;
vertical-align: top;
color: #555;
}
/*------販売価格の文字(注文速報・新着)------*/
.rmix-price{
font-weight: normal; /* normal → bold で太字 */
text-align: right; /* left(左寄せ)center(中央)right(右寄せ)*/
color: #EB1010;
}
/*------------------------------------------------------------
●全体設定
------------------------------------------------------------*/
body{
margin: 0;
font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
overflow:hidden;
}
/*------------------------------------------------------------
●スライド部分
------------------------------------------------------------*/
#ticker ul {
list-style: none;
margin: 0px;
padding: 0px;
position:relative;
}
#ticker li {
margin:0px;
padding: 0px;
height: 98px;
overflow: hidden;
}
-->
</style>
<script type="text/javascript">
$(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('<li>' + $(this).html() + '</li>');
});
total = items.length;
$list.wrap('<div class="spyWrapper" />').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);
</script>
</head>
<body>
<div id="ticker" >
<ul class="spy">