読者です 読者をやめる 読者になる 読者になる

clock-up-blog

go-mi-tech

【今日のMFクラウド改造】仕訳帳の借方と貸方の間に線を付ける

CSS Chrome

MFクラウドとは

家計簿アプリであるところの「マネーフォワード」のビジネス版です。

みたいな位置付け。だと思う。

改造します

MFクラウド、全般的に高機能なのですが、細かいインターフェースにはまだまだ調整の余地があります。

幸いウェブベースのアプリなので、インターフェース部分は好みに合わせてJSやCSSで改造していくことにしました。(改造は自己責任で)

CSS拡張のために導入したもの

ChromeStylebot という拡張を使って CSS を書き換えます。

f:id:kobake:20151010173454p:plain

特定ドメインCSS に追加のスタイルをあてることができます。リアルタイムに書き換え結果が見れるので便利。


今回の改造:仕訳帳の借方と貸方の間に線を付ける

f:id:kobake:20151010172208p:plain

これを
( ^ω^)
⊃)  (⊂

( ^ω^)
≡⊃⊂≡

.book-journal .js-td-dl-item,
.book-journal .js-td-dr-item,
.book-journal .js-td-cl-item,
.book-journal .js-td-cr-item,
.book-journal .js-td-remark
{
    border-left: 2px solid #88f;
}

.book-journal thead[class="detail"] th:nth-child(4),
.book-journal thead[class="detail"] th:nth-child(7),
.book-journal thead[class="detail"] th:nth-child(10)
{
    border-left: 2px solid #88f;
}


こうじゃ…

( ^ω^)
⊃ .. ⊂  
‘∵  
‘:’;

f:id:kobake:20151010172211p:plain

区切り線だいじ。

仕訳帳入力(β)も同様にCSS書き換え

.js-block-journalize-manual #spreadsheet-wrap > div.spreadsheet-head.no-dept > div:nth-child(5)
{
    border-left: 2px solid #88f;
    margin-left: -1px;
}

.js-block-journalize-manual #spreadsheet-wrap > div.spreadsheet-head.no-dept > div:nth-child(9),
.js-block-journalize-manual #spreadsheet-wrap > div.spreadsheet-head.no-dept > div:nth-child(13)
{
    border-left: 2px solid #88f;
}

.js-block-journalize-manual .item, .js-block-journalize-manual .remark
{
    border-left: 2px solid #88f;
}

f:id:kobake:20151010173235p:plain

区切り線だいじ(2回目)。

おしまい

他にも改造ネタがありますがまた後日。

});