マネーフォワード クラウド会計を使っていて、以前からかなり気になっていたのが「仕訳帳入力」の表示領域です。
画面自体はかなり広いのに、仕訳が5行くらいしか表示されません。
しかも、その下には大量の空白があります。
大きなモニターを使っているのに、この状態ではあまり意味がありません。
仕訳をまとめて確認したいのに、数行見るたびにスクロールする必要があります。
「この下の空白を使わせてくれればいいのに……」
と以前から思っていました。
実は、同じ要望はすでに出ていた
気になって調べてみると、これ、私だけが不満に思っていたわけではありませんでした。
マネーフォワード公式のクラウドコミュニティには、2024年9月の時点で、
「仕訳帳入力の表示行数が5～6行ととても狭い」
という、まさに今回と同じ要望が投稿されています。
しかもマネーフォワード側からも、
「具体的な予定は約束できないが、要望として起票する」
という回答が付いています。
おお、ちゃんと要望は届いてるやん。
……と思ったのですが。
2026年9月現在、少なくとも私の環境では5行くらいしか表示されないままです。
要望が出たのが2024年9月なので、もう約2年。
「要望として起票しました！」から何も変わってないやんけ！
もちろん内部でどう扱われているかまでは分かりませんし、今後改善される可能性もあります。
ただ、今すぐこの狭さをどうにかしたい。
ということで、自分で何とかすることにしました。
公式コミュニティの元投稿はこちらです。
「≪要望≫総勘定元帳・補助元帳・仕訳帳入力の表示行数について」
F12の開発者ツールで原因を調べる
まず、Chromeでマネーフォワードを開き、F12 を押して開発者ツール（DevTools）を起動しました。
仕訳帳入力の表周辺にあるHTMLやCSSを順番に確認していきます。
最初は、外側にあるコンテナの高さが原因だと思い、該当しそうな部分を探しました。
その中で見つかったのが、次の要素です。
.spreadsheet-app-containerこの部分の高さを試しに500pxから800pxへ変更してみました。
ところが、外側の領域を変更しただけでは、肝心の仕訳表自体は広がりません。
さらに中の要素を追っていくと、仕訳帳本体と思われる要素に高さ制限が掛かっていることが分かりました。
具体的には、次のような状態です。
height: 500px;
max-height: 500px;ここで、試しにDevToolsから次のように変更してみました。
height: 800px !important;
max-height: 800px !important;すると、
仕訳帳の表示領域が広がりました。
原因はこれでした。
特に重要だったのが max-height: 500px です。
単純に height だけを800pxへ変更しても、max-height が500pxのままだと500px以上には広がりません。
両方変更する必要がありました。
1100pxくらいがちょうどよかった
その後、800px、900pxなど何度か高さを変更して確認しました。
私の環境では、最終的に1100pxくらいがちょうどよさそうでした。
1100pxまで広げると、一度に確認できる仕訳の数がかなり増えます。
最初の状態と比べると、かなり使いやすくなりました。
大きなモニターの縦方向をようやく有効に使えている感じです。
ただしF12から毎回変更するのは面倒
ここまでで、表示領域を広げる方法自体は分かりました。
ただし、DevToolsから変更したCSSはページを再読み込みすると元に戻ります。
つまり、次回マネーフォワードを開いたときにも、
- F12を開く
- 対象の要素を探す
heightを変更max-heightも変更
という作業が必要になります。
さすがに毎回これをやるのは面倒です。
もっと簡単に、自動で適用できる方法がないか調べてみました。
そこで使うことにしたのが、Chrome拡張機能のStylusです。
StylusならCSSを自動適用できる
Stylusは、特定のWebサイトに自分で指定したCSSを適用できるChrome拡張機能です。
一度設定しておけば、対象のWebサイトを開いたときに自動でCSSが適用されます。
つまり今回の場合、
マネーフォワードを開くだけで、仕訳帳の高さを1100pxにする
ということができます。
Stylusをインストールしたら、新しいスタイルを作成します。
適用先は、マネーフォワード クラウド会計全体にしたかったので、次のURLから始まるページを対象にしました。
https://accounting.moneyforward.com/Stylus側では、「次で始まるURL」にこのURLを指定しています。
これで、仕訳帳入力だけでなく、マネーフォワード クラウド会計内の他の画面にもCSSを適用できます。
Stylusに設定したCSS
最終的にStylusへ設定したCSSはこちらです。
.spreadsheet-app-container {
height: 1100px !important;
}
.spreadsheet-app-container [class*="SpreadsheetAppRoot"],
.spreadsheet-app-container [data-testid*="spreadsheet"] {
height: 1100px !important;
max-height: 1100px !important;
}ポイントは、次の2つです。
height: 1100px !important;だけではなく、
max-height: 1100px !important;も指定しているところです。
今回のマネーフォワード側のCSSでは、max-height: 500px が指定されていたため、height だけを変更しても500pxで止まっていました。
なお、1100pxという数字は私の環境に合わせたものです。
例えば800px程度にしたい場合は、
height: 800px !important;
max-height: 800px !important;と変更すればOKです。
保存してマネーフォワードを再読み込み
StylusでCSSを保存したあと、マネーフォワードの画面を再読み込みします。
すると……
広がりました。
それまで5行程度しか見えていなかった仕訳が、一気にたくさん表示されるようになりました。
しかも、Stylusが自動的にCSSを適用してくれるため、次回からはF12を開く必要もありません。
マネーフォワードを普通に開くだけです。
仕訳帳入力以外の画面にも適用できる
今回のCSSでは、特定の仕訳帳だけを直接指定するのではなく、
[class*="SpreadsheetAppRoot"]や、
[data-testid*="spreadsheet"]といった指定にしています。
そのため、マネーフォワード内で同じスプレッドシート形式を使っている画面であれば、同じように高さを広げられる可能性があります。
まとめ
マネーフォワード クラウド会計の仕訳帳入力は、私の環境では画面に十分な余裕があるにもかかわらず、5行程度しか表示されませんでした。
DevToolsで調べたところ、仕訳帳本体に高さの上限が設定されていました。
height: 500px;
max-height: 500px;これをStylusから上書きし、
height: 1100px !important;
max-height: 1100px !important;とすることで、表示領域を大きく広げることができました。
最初はF12から手動で変更していましたが、Stylusを使えば一度設定するだけで自動適用できます。
大きなモニターを使っていて、
「なんで画面の下半分が空いているのに、仕訳が5行くらいしか見えないんだ」
と思っている人には、かなり便利な方法だと思います。
注意点
今回の方法は、マネーフォワード公式の設定機能ではありません。
Chrome側でWebページのCSSを上書きして、見た目を変更しています。
そのため、今後マネーフォワード側のHTML構造やクラス名などが変更された場合、CSSが効かなくなる可能性があります。
その場合は、再度F12のDevToolsで対象の要素を確認して、Stylusに設定したCSSを修正する必要があります。
また、今回変更しているのは表示部分だけで、仕訳や会計データそのものを書き換えているわけではありません。
とはいえ、一度設定してしまえば普段は完全に自動です。
標準状態と比べると、かなり快適になりました。
コメント