【Cocoon】コメントが来やすいコメントフォームにCSSカスタマイズしてみよう!

Cocoonカスタマイズ

この記事ではWordPressテーマCocoon向けの、コメント入力欄を丸っこくかわいくできるCSSカスタマイズを紹介しています。


こんにちは、さいとう(@s41t0h)です。

ブログでコメントを貰うと嬉しいですよね。

「自分のブログ読んでもらってるんだ~!」と素直に嬉しく思えます。

また、Googleのゲイリー・アイリーズ氏はTwitterでコメントには多大なSEO効果があると断言しています。

ブログなどのコメントの多さ、SEO効果「高い」!/Google明かす | SEO Packのブログ 初心者もすぐわかる
SEO Packのブログ「ブログなどのコメントの多さ、SEO効果「高い」!/Google明かす」の記事です。
スポンサーリンク

Cocoonのコメント欄カスタマイズ!

というわけで、コメントしやすい入力欄にしてみました!

Cocoonコメント欄カスタマイズ後のキャプチャ

Twitterライクに水色にして、角を丸くしてみました。

いかがですか?

コピペ可! コメントフォームカスタマイズCSSコードはこちら

では早速カスタマイズしてみましょう。

#commentform label{
	display: inline-block;
}

#commentform textarea, #commentform input{
    border: 1px solid #4DD0E1; /* 枠線の色 */
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 80%;
	
}

#commentform textarea:focus, #commentform input:focus{
	outline: none;
	border: 3px solid #4DD0E1; /* 枠線の色 */
}

#commentform #submit{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: skyblue; /* 送信ボタンの背景色 */
	color: white;
	border-radius: 15px;
	height: 40px;
	border: none;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	transition: all .2s ease;
}

各部分の色はサイトデザインにあわせて適宜変更してみてくださいね。

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

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

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

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

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

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

コメント