Coincheckのデザイン変更でスプレッド表示のレイアウトが崩れたのでCSSで揃えてみた

コインチェックは仮想通貨(暗号通貨)の売買レートが異なるみたいで、このスプレッドをブラウザ(Chrome)で可視化するツール「CCSpreadVisualizer」を使っています。

CCSpreadVisualizerを使うにはChromeの拡張機能で「Tampermonkey」を利用するのですが、作者さんのサイトに詳しく解説してあります。

暗号通貨取引所Coincheckのスプレッドを可視化する
更新履歴: 2017.9.1: Ver.0.2 BCHに対応。表示がパカパカするのを修正 僕の人生を変えてくれた暗号通貨。 そして、その愛すべき暗号通貨取引所Coincheckは平易なUIと使いやすさで定評があります。 Coincheckは取引所といっても、取引所にてユーザー同士で売買ができるのはBTCに限られ、それ以...

コインチェックの取引所ページのデザイン変更で、スプレッド表示のレイアウトが崩れて見づらくなったので、「CCSpreadVisualizer」のソース内にCSSを追加して見やすく揃えることにします。

CSSを追加しただけの簡易的な表示なので、参考程度に見ていってください。

Coincheckのデザイン変更でスプレッドのレイアウトが崩れた

コインチェックの取引所ページの各銘柄のレート表示は今まで上の画像のように表示され、「CCSpreadVisualizer」のスプレッド表示もレートの下に表示されていました。

それが、コインチェックのデザイン変更でスプレッドのレイアウトが崩れます。

コインチェックのデザイン変更でスプレッド表示が醜くなっている

コインチェックのデザイン変更でスプレッド表示が醜くなっている

スプレッド表示が変なところで改行されみにくいです。

なので、CCSpreadVisualizerソース内にHTMLかCSSを追加してスプレッドの表示を改行できないかと色々試しましたが、意外と単純な方法で解決できました。

Coincheckでスプレッド表示が崩れたらCSSで見やすく揃える

スプレッドの表示を改行するようにしてます。一応、ブラウザ(Chrome)の幅を変えても表示に問題なさそうなので、方法について書いていきます。

スプレッド表示のレイアウトを改行して表示するように調整

スプレッド表示のレイアウトを改行して表示するように調整

「CCSpreadVisualizer」のソース内のCSSを追加して、上の画像のようにスプレッドを改行して表示するようにしました。ブラウザを最大化した時の表示です。

CCSpreadVisualizerのコード内にCSSを追加する

CCSpreadVisualizerの導入については、最初に作者のサイトのリンクしているので、そちらを参考にしてください。

スプレッドを表示する「買」の手前にCSSを追加していきます。CCSpreadVisualizerのソースはCSSを追加するところ以外は省略しています。

$(document).ready(function(){
    $.each(currencies, function(index, elem) {
        $("[href='/ja/buys?pair=" + elem + "_jpy']").append("<div style=\"width: 100%;\"></div><p class=\"currency_desc ng-binding append\"><span style=\"color:green; font-weight: bold;\">買</span><span id=\"" + elem + "-buy-price\"></span></p>");
        $("[href='/ja/buys?pair=" + elem + "_jpy']").append("<p class=\"currency_desc ng-binding append\">(<span id=\"" + elem + "-buy-difference\"></span>%)</p>");
        $("[href='/ja/buys?pair=" + elem + "_jpy']").append("<p class=\"currency_desc ng-binding append\"><span style=\"color:red; font-weight: bold;\">売</span><span id=\"" + elem + "-sell-price\"></span></p>");
        $("[href='/ja/buys?pair=" + elem + "_jpy']").append("<p class=\"currency_desc ng-binding append\">(<span id=\"" + elem + "-sell-difference\"></span>%)</p>");
    });
});

太字で色を付けてる部分の「<div style=\”width: 100%;\”></div>」を追加しているだけです。

ブラウザの幅を変えても問題なく表示されてそうです

Chromeのの表示幅を変えても改行されて表示されたので、いくつか幅をを変えた時のスプレッド表示のスクリーンショットを貼り付けますね。

ブラウザ幅を小さくした時のスプレッド表示

ブラウザ幅を小さくした時のスプレッド表示

ブラウザの幅を小さくすると、チャットやレート表示などが1行になりますが、スプレッドは横幅はあるものの改行されて表示されてるようです。

ブラウザ幅を変えてのスプレッド表示(通貨2列表示)

ブラウザ幅を変えてのスプレッド表示(通貨2列表示)

さきほどより、少し幅を広くしました。仮想通貨の銘柄が2列で表示されていますがスプレッドは問題なく改行されてるようです。

ブラウザ幅を変えてのスプレッド表示(買い売り板の表示と2列)

ブラウザ幅を変えてのスプレッド表示(買い売り板の表示と2列)

もう少しブラウザの幅を広くしました。「買い板/売り板」と2列表示です。これでもスプレッド表示は問題なく表示されているようです。

まとめ

コインチェックの取引所ページに表示されるスプレッドをレートの下に表示するようにしました。

環境によって綺麗に表示できなかったり、今後のコインチェックのデザイン変更等の影響を受けるかもしれないので、もしレイアウトが崩れたら追加したCSSを外してください。

スポンサーリンク

フォローする

スポンサーリンク