Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

kintoneスレッドの親発言の切れ目をわかりやすくするCSS

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

kintone のスペースにはスレッドという、掲示板的な機能がある(ポータルに表示されるお知らせ掲示板とは別)。

このスレッドで返信機能を使うと、親発言の下にインデントされた形で子発言(返信)が表示される。

返信が長くなると、親発言の切れ目がやや分かりづらく、視認性が悪い。

少し見やすくなるよう、CSSで背景に色をつけてみた。

ソースコード

.ocean-ui-comments-post:nth-of-type(2n) {
    background-color: rgb(255, 249, 243);
}

.ocean-ui-comments-post {
    border-bottom: 3px solid rgb(219, 201, 179);
}

/* 「n件の古いコメントがあります」を赤字にして目立たせます */
div>.ocean-ui-comments-post-morecomment {
    color: red;
    font-weight: bold;
    border-bottom: 1px solid red;
}

/* 子スレッドにも色を追加 */
.ocean-ui-comments-post:nth-of-type(2n) .ocean-ui-comments-post-child .ocean-ui-comments-commentbase .ocean-ui-comments-commentbase-entity {
    background-color: rgb(255, 245, 235);
    }
.ocean-ui-comments-post:nth-of-type(2n+1) .ocean-ui-comments-post-child .ocean-ui-comments-commentbase .ocean-ui-comments-commentbase-entity{
    background-color: rgb(255, 253, 240);
}


適用方法

kintone のカスタマイズ権限があるようならCSSファイルにして、「設定 > 設定タブ > JavaScript / CSSでカスタマイズ」からCSS登録する。

カスタマイズ権限がないようなら、Stylusのようなユーザースタイルシートを適用するブラウザ機能拡張を使っても良い。

追記

「n件の古いコメントがあります」を目立たせるスタイル、子スレッドに着色するスタイルを追加しました。