kintoneのポータルやスペースの画面構成は、
- 左側：お知らせ、通知
- 右側：未処理、スペース、アプリ
といった構成になっていますが、いつからか左右の幅の比率が変わったことにお気付きでしょうか？
2026年4月現在、左側：右側＝60%：40% という比率になっています。
左側と右側の比率なんてどうでもいいと思うかもしれませんが、比率が変わったことで、以前はできていた「お知らせにグラフを3つ横並び表示する」ということができないのです。
※画面の解像度が1920 x 1200の場合
グラフを3つ横並びに表示させなくてもいい？いえいえ、3つ並べるとスッキリするんです。
そこでこの記事では、ポータルやスペースのお知らせ部分の幅を広げ、お知らせにグラフを3つ横並び表示させるようにするための方法をご紹介します。
目次
お知らせにグラフを3つ横並び表示できると何がいいのか？
元々、お知らせ欄にはグラフを3つ横並び表示させるような設定をしていたのですが、いつからかそれができなくなっていることに気づきました。
左右の幅に感じる違和感
ポータル画面が何か変わった気がする。いつから変わったのかは不明なのですが、私が気付いた時には変わっていました。ふと気づいたのは、次の違和感を感じたときでした。
「なんだか・・右側の幅が長くない？」
ポータル画面右側の、スペースやアプリの名前が表示される部分が広くなっている。前はこんなに広くなかったような・・・というのがきっかけで、気づきました。
右側の幅が広くなったので、必然的に左側のお知らせ部分の幅が狭くなったことを意味していたのですが、その時は「こんなに無駄に広くなくてもいいのに。まいっか。」ぐらいで特に気に留めていませんでした。
※ワイドコースではポータルのアプリやスペース部分が次のように1行に2つ表示されるようになっていますので、おそらくはワイドコースが出てきたあたりで幅が変わったのだろうと推測されます。
スペース（スレッド機能ON）のお知らせの表示が崩れる
スレッド機能をONにしているスペースで、問題に気付きました。
これまでお知らせにグラフを3つ横並びで表示していたのですが、2つだけ表示され、もう1つは下に表示されるようになったのです。
お知らせにグラフを3つ横並びさせた表示のイメージ
お知らせに表示できるグラフは、幅を400px/600px/800pxから選択することができます。
一番小さい400pxを選ぶことで、グラフを3つ横並びに表示させることができていました。
しかし、今（2026年4月時点）は、ずれてしまう。しかも600pxのグラフも2つ横並びにできず、無駄な余白がでている・・。
グラフを3つ横並びに表示し、これを複数行で表現すると簡易ダッシュボードのような表示となり見た目が良くなるのが気に入っていたのですが、幅が変わったことでこれができなくなったのです。
3つ横並びにした時のイメージ
ポータル・スペースの左右の幅を変える方法
どうにか幅を元に戻して、グラフを3つ横並び表示させたい。
kintoneのシステム管理画面の「kintone全体のカスタマイズ」ではCSSを設定できるので、ポータル・スペースの左右の幅はCSSで調整することにしました。
CSSでポータル・スペースの左右の幅を調整する
設定方法は簡単で、まず、次の内容でCSSファイルを作ります。以下の内容をコピーしテキストエディタに貼り付け後、CSSファイルとして保存します。
/** portal */
.ocean-portal-body-right {
width: 30%; /* default:40% */
}
.ocean-portal-body-left {
width: 70%; /* default:60% */
}
/** space(thread) */
.gaia-argoui-page-space-show-right {
width: 30%; /* default:40% */
}
.gaia-argoui-page-space-show-left {
width: 70%; /* default:60% */
}
次に、kintoneシステム管理画面→kintone全体のカスタマイズ画面を開き、PC用のCSSファイルに先ほどのファイルをアップロード後、保存します。
これで、指定した幅で左右が表示されるようになります。
ここでは、左右の幅を「60%：40%」から「70%：30%」に調整しましたが、比率は好きなように変えてください。
1行に幅400pxのグラフを3つ並べた場合
CSSの利用にあたっての注意点
今回ご紹介する方法は、kintoneのポータル・スペースで使用されているクラスに対して幅を設定してます。
そのため、今後のkintoneのバージョンアップにより動作しなくなる（指定した幅で表示されずデフォルト幅で表示される）可能性がある点をご注意ください。
まとめ
kintoneのポータル・スペースのお知らせ部分の幅を広げ、少し見やすくするTipsをご紹介しました。
「グラフは3つ横並びしたい！」というようなケースや、ポータル右側の幅が広すぎで無駄なので調整したい、というケースで活用できると思いますので、試してみてください。
また、kintone全体のカスタマイズでは、CSSだけではなくJavaScriptも設定ができます。コアノーツではポータルやスペースに添付しているPDFファイルをプレビュー表示することができるJavaScriptを無料で公開していますので、興味があればお試しください。
