【Cocoon】コメント欄を見やすくカスタマイズしてみたよ【CSS公開】

Cocoonカスタマイズ

この記事ではCocoonのコメント欄をカスタマイズするためのCSSを公開しています。


こんにちは、斉藤コウ(@s41t0h)です。

SEOチェキで調査したところ、「Cocoon カスタマイズ」の検索順位が1位になっていました!(ワーイ)

狙っていたワードで1位が取れると嬉しいものです。

そこで今回は、Cocoonのコメント欄をより見やすくするカスタマイズを紹介します。

コメントが賑わってきたらぜひ導入しておきたいカスタマイズです。

スポンサーリンク

Cocoonのコメント欄を見やすくカスタマイズしよう!

実際のコメント欄はこの記事(Cocoonのブログカードに「続きを読む」を入れてクリック率上げよう大作戦!)を見てみてくださいね。

このカスタマイズで変更できるのは

  • コメント本文の文字サイズ・行間の調整
  • アイコンをTwitterのように丸く切り抜く
  • 管理人コメントはアイコンを右側にしてわかりやすく
  • コメントに対する返信は入れ子にして左側に線を表示

こんなかんじです。

カスタマイズ用CSSはこちら

CSSを追加する方法は【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。を参考にしてくださいね。

.st-comment-content p{
	font-size: 14px;
	line-height: 20px; /* コメント本文のサイズ・行間調整 */
}

.st-comment-meta .avatar{
	float: left !important;
	border-radius: 27.5px; /* アイコンを丸く切り抜く */
	margin-right: 0.5em;
}
.st-comment-meta::after{
	content: '';
	display: block;
	clear: left; /* アイコンの回り込み解除 */
}

.bypostauthor .avatar{
	float: right !important; /* 管理人のアイコンは右寄せ */
}

.comment-author{
	font-style: normal; /* 斜体の解除 */
}

.commets-list .children{
	margin-left: 10px;
	padding-left: 6px !important;
	border-left: 2px solid #eee; /* 入れ子コメントの左側に線を表示 */
} 

.commets-list .comment-body, .commets-list .st-comment-body{
	margin-bottom: .5em; /* コメントの間隔を狭める */
}

.comment-reply-link{
	font-size: .5em; /* 「返信」ボタンを小さく */
}

適宜アレンジしてみてくださいね。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント