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

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

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

暗号通貨取引所Coincheckのスプレッドを可視化する

更新履歴: 2017.9.1: Ver.0.2 BCHに対応。表示がパカパカするのを修正僕の人生を変えてくれた暗号通貨。そして、その愛すべき暗号通貨取引所Coincheckは平易なUIと使いやすさで定評があります。

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

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

Coincheckのデザイン変更でスプレッドのレイアウトが崩れた
Coincheckでスプレッド表示が崩れたらCSSで見やすく揃える
1. CCSpreadVisualizerのコード内に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>」を追加しているだけです。