
楽天の納期情報で買い物かごの表が見づらい状態を回避しよう!
前回、納期情報の赤文字を直すエントリーを書いたかと思いますが
今度はその納期情報が何故か
お店によっては、
項目選択肢の横ラインに入ってる
文字に対してセルの幅が決まってしまって
とても見づらい・・・と
お困りではないですか?
例えば横ラインに M、L と入ってたとしたら
M の文字サイズに合わせて
納期情報が改行されて
なんとも細いセルになってしまって
タブレットで回覧した時に、ラジオボタンが
押しにくくなるという事が・・・
そして、今回は
納期情報を改行しないようにする事と、
ラジオボタンを大きくする事を
記事にしてみました^^
納期情報の文字色と、文字サイズは
前回同様
こちらのCSSで対応できます。
td.inventory font{ font-size:11px; color:#999; }
そこに、セル内の自動的な折り返しを禁止する
値を入力します。
それが
white-space: nowrap;
td.inventory font{ font-size:11px; color:#999; white-space:nowrap; /* セル内の自動的な折り返しを禁止 */ }
に修正してCSSをアップしてみてください。
納期情報が、改行されずに一行になり
スッキリしましたね!!!
店舗によっては、納期情報に
沢山のテキストを入れてる所があると
思います。その場合は改行が無視されるので
表が横長になってしまって
商品ページのレイアウトが崩れてしまう
原因となります。。。
なので、短い文章の納期情報にするか、
フォントサイズを小さくするなどの
対策をとってください。
さらに、納期情報のテキストギリギリにセルの枠が
きてしまっているので
なんだか窮屈なイメージに思えるので
余白を追加します。
td.inventory font{ font-size:11px; color:#999; white-space:nowrap; /* セル内の自動的な折り返しを禁止 */ padding-left: 10px; padding-right: 10px; display: block; }
無理やりですが・・・ブロック要素にして
パディングをつけました。
これで、ゆったりとした
見やすい表が出来上がると思います。
おまけに、ラジオボタンの拡大です
/* ラジオボタンのサイズ */ input[type=radio] { width: 15px; height: 15px; vertical-align: middle; }
こちらのCSSで指定してあげれば
ラジオボタンの●が大きくなっていると思います^^
PC、タブレット用でスマフォはあまり関係ありませんが・・・
20pxにすれば目立つかなと思います。
スポンサードリンク