makuakeのリターンを見比べやすくするcssHack

概要

makuakeのプロジェクトで、リターンの種類が多いと、見比べるのが大変です。
そんなわけで、一覧化して見やすくしました。

環境

google chrome + css/js上書きプラグイン
上書きプラグインは、User JavaScript and CSS を使いました。

実装

makuake.com 内のページに以下のCSSとjsを適用します。

css

div#return {

    /* 表示位置設定 */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2147483647;

    /* 見た目の微調整 */
    border: 3px solid black;
    margin: 10px;
    padding: 10px;
    background-color: gray;

    /* 横スクロールできるようにするための設定 */
    width : 95vw;
    overflow-x: scroll;
    /*
      white-space: nowrap; 
      これをcssで指定しておくと、
      画面に収まらないところにある画像が読み込まれないので、
      javascriptのonloadで指定するようにする
    */
    /* white-space: nowrap; */
}

div#return section.return-section {

    /* 親要素(div#return) から引き継いでしまうので、normalで上書きする */
    white-space: normal; 

    /* 横に並べる */
    display: inline-block;
}

js

(window.onload = function() {
    var el = document.getElementById("return");
    el.style.whiteSpace = 'nowrap';
});

結果

HD画面

4K画面

ポエム

早割りとか売り切れとか把握するのもひと手間で、もうちょっとなんとかならんのかって思って作りました。
一度、間違えてオプション足りないやつを買ってしまったこともありますorz

公式にこういう表示をさせるボタンが実装されるといいな