プリザンターのコメント欄を少し見やすくしてみる

はじめに

プリザンターの第2世代UI、ちょっとモダンになって今時の画面にはなったのですが、急にモダンになりすぎて見にくくなっているところがあります。今回はその代表格のコメント欄の見た目を改善してみます。

現状を見てみる

このような形でコメントの間はHRタグのような横線で区切られています。背景色が淡いパステル系の色なので、横線のグレーと同化してしまいやすい配色で、カラーアクセシビリティの観点からもコントラスト比あまり望ましい状態ではありません。

スタイルを変更してみる

せっかく入力欄が枠付きの入力フォームになっているので、これにならう形で枠をつけてみます。
入力欄の枠のスタイルは

border-radius: 5px;
boarder: 1px solid var(--control-border);

となっているので、これにならいます。
色はCSS変数で--control-borderと定義されていますが、これは#cececeになので、今の横棒の色と同じです。
今回はコントラスト確保と見やすさを重視して色は黒とします。

コメント欄のHTML要素を見てみると、#CommentList .commentとなっていることが確認出来ます。
この要素にスタイルを設定します。

CommentBorder.css

#Editor #EditorComments .comment {
  border-radius: 5px !important;
  border: 1px solid #000 !important;
}

既存の組み込まれているCSSを上書きする必要があるため!importantを宣言しています。
このCSSをサイトの管理のスタイルから適用してみると、このような表示なります。

いい感じですね。
これを全てのサイトに適用させる場合は、拡張スタイルに入れると適用されます。

まとめ

今回はコメント欄の見やすさ改善の方法を紹介しました。プリザンターのUIモダン化の中で「くっきり」「はっきり」感が今ひとつだなという部分が出てきています。今回のようにお気に入りのCSSを作成して組込テーマを上書きすることで、実際の利用者層に合わせて調整することが可能です。是非試して見てください。