楽天の納期情報で見づらい状態を回避しよう!

  • このエントリーをはてなブックマークに追加
  • LINEで送る
スクリーンショット_030416_043220_PM

楽天の納期情報で買い物かごの表が見づらい状態を回避しよう!

前回、納期情報の赤文字を直すエントリーを書いたかと思いますが

今度はその納期情報が何故か
お店によっては、
項目選択肢の横ラインに入ってる
文字に対してセルの幅が決まってしまって
とても見づらい・・・と
お困りではないですか?

例えば横ラインに 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にすれば目立つかなと思います。

スポンサードリンク

最後までお読みいただきありがとうございます♪

今回の情報が、少しでもお役に立てれば幸いです。 ランキングにも参加していますので、ポチッとお願いします^^ さらに情報をシェアいただければ、とっても嬉しいです♪

にほんブログ村 デザインブログ Webデザインへ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*