• 文字サイズ


未回答

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

  • 相談者:非公開
  • 2025/11/16 16:00
お世話になります。
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">

投稿内容について報告する